Slog92_ Uses React framework for front-end development 4

ArthurSlog
SLog-92
1 Year,
Through China,
October 6th 2018

Scan the QR code on wechat and follow my official account

Personal website: http://www.arthurslog.com
CSDN：https://blog.csdn.net/u010997452/article/list/1
GitHub：https://github.com/BlessedChild/ArthurSlog
NPM：https://www.npmjs.com/~arthurslog
The Denver nuggets: https://juejin.cn/user/307518986009559
Jane: https://www.jianshu.com/u/b9ebe10f0534
segmentfault：https://segmentfault.com/u/arthurslog/articles

Nothing tastes nothing

Development Environment MacOS(Mojave 10.14 (18A391))

Information sources

Start coding

React is the first step to use react
Step by step to upgrade
Finished the layout design of the mall’s homepage today
The rest are divided into eight pages for prototyping and development
Images are replaced by ordinary divs for now
Here is the code updated today:

Client/Header.jsx

import React, { Component } from 'react'

// Style the Header area
const HeaderBarStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.position: 'fixed'.marginTop: '10px'.width: '100%'.height: 88.backgroundColor: 'rgba (0,0,0,0)' }
const searchBarStyle = { position: 'relative'.marginTop: 0.width: '100%'.height: 88.backgroundColor: 'rgba (0,0,0,0)'.width: '90%' }
const searchBarIconStyle = { position: 'absolute'.left: '0px'.width: '88px'.height: '88px'.backgroundColor: 'rgba (0,0,0,0.1)'.textAlign: 'center'.lineHeight: '88px'.borderStyle: 'none'.borderRadius: '50px' }
const searchStyle = { position: 'relative'.marginTop: 0.backgroundColor: 'rgba (0,0,0,0.1)'.width: '100%'.height: '84px'.fontSize: 40.textAlign: 'center'.borderStyle: 'none'.borderRadius: '50px'.border: '1px solid #F2F2F2' }

// Render the content of the Header area
class Header extends Component {
    render() {
        return <div style={HeaderBarStyle}>
                <div className='searchBar' style={searchBarStyle}>
                    <div style={searchBarIconStyle}>The picture</div>
                    <input placeholder='Please enter the name of the product' style={searchStyle}></input>
                </div>
        </div>}}export default Header
Copy the code

Client/BodyContainer.jsx

import React, { Component } from 'react'

import IssueList from './IssueList'

// The BodyContainet area style
const bodyContainerBarStyle = { zIndex: - 1.position: "relative".marginTop: 0.marginBottom: 128.height: '100%'.width: '100%'.fontSize: 40.textAlign: 'center' }
const carouselAreaStyle = { width: '100%'.height: 375.fontSize: 40.textAlign: 'center'.lineHeight: '375px' }
const bulletinBoardStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'raw'.width: '100%'.height: 64.fontSize: 40.textAlign: 'center'.borderStyle: 'none' }
const productListStyle = { width: '100%'.fontSize: 40.textAlign: 'center' }
const dividingLineStyle = { backgroundColor: '# 000000'.height: 1.width: '100%' }
const recommendStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#FFFFFF'.width: '100%' }
const navigationBarStyle = { display: 'flex'.alignItems: 'stretch'.backgroundColor: '#FFFFFF' }
const navigationBarItemStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '25%'.marginLeft: '10px'.marginRight: '10px'.textAlign: 'center'.fontSize: '30' }
const navigationBarItemStyleLeft = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '25%'.marginLeft: '20px'.marginRight: '10px'.textAlign: 'center'.fontSize: '30' }
const navigationBarItemStyleLRight = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '25%'.marginLeft: '10px'.marginRight: '20px'.textAlign: 'center'.fontSize: '30' }
const categoryStyle = { display: 'flex'.alignItems: 'stretch'.backgroundColor: '#FFFFFF' }
const categoryItemStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '33.3%'.marginLeft: '10px'.marginRight: '10px'.textAlign: 'center'.fontSize: '30' }
const categoryItemStyleLeft = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '33.3%'.marginLeft: '20px'.marginRight: '10px'.textAlign: 'center'.fontSize: '30' }
const categoryItemStyleLRight = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '33.3%'.marginLeft: '10px'.marginRight: '20px'.textAlign: 'center'.fontSize: '30' }
const categoryImgItemStyleLeft = { width: '220px'.height: '220px'.textAlign: 'center'.lineHeight: '220px'.backgroundColor: '#FFFFFF' }
const productStyle = { display: 'flex'.alignItems: 'stretch'.backgroundColor: '#FFFFFF' }
// const productItemStyle = { alignItems: 'center', display: 'flex', flexDirection: 'column', backgroundColor: '# d8f0F3 ', color: '#000000', width: '33.3%', marginLeft: '10px', marginRight: '10px', textAlign: 'center', fontSize: '30'}
const productItemStyleLeft = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '50%'.marginLeft: '20px'.marginRight: '10px'.textAlign: 'center'.fontSize: '30' }
const productItemStyleRight = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '50%'.marginLeft: '10px'.marginRight: '20px'.textAlign: 'center'.fontSize: '30' }
const productImgItemStyle = { width: '400px'.height: '400px'.textAlign: 'center'.lineHeight: '400px'.backgroundColor: '#FFFFFF' }

const productItemInfoTextStyle = { width: '400px'.marginLeft: '0px'.textAlign: 'left' }
const productItemInfoPriceStyle = { width: '400px'.marginLeft: '0px'.textAlign: 'left' }
const productItemInfoStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.width: '400px' }
const productItemInfoTextareaStyle = { width: '400px'.textAlign: 'left'.margin: '0px' }

const bulletinBoardIconStyle = { width: '56px'.height: '56px'.fontSize: '12px'.textAlign: 'center'.lineHeight: '56px'.marginLeft: '20px' }
const recommendIconStyle = { width: '256px'.height: '256px'.textAlign: 'center'.lineHeight: '256px'.borderStyle: 'solid' }


const navigationBarIconItemStyle = { width: '200px'.height: '200px'.textAlign: 'center'.lineHeight: '200px'.backgroundColor: '#FFFFFF'.borderStyle: 'solid' }
// Render the content of the BodyContainer area
class BodyContainer extends Component {
    / * render () {return < div > < div > 2. The navigationBar (navigation) < / div > < div > 2.1 all goods spell group | | 2.2 2.3 promotion < / div > < div > commodities 1 | goods | 2 3 < / div > The < div > commodities 4 | goods | 5 6 < / div > < div > commodities 7 | goods | 8 9 < / div > < IssueList / > < / div >} * /
    render() {
        return <div className='bodyContainer' style={bodyContainerBarStyle}>
            <div>
                <div className='carouselArea' style={carouselAreaStyle}>carouselArea</div>
                <div style={dividingLineStyle}></div>
                <div style={bulletinBoardStyle}>
                    <div style={bulletinBoardIconStyle} >The picture</div>
                    <div className='bulletinBoard'>bulletinBoard</div>
                </div>
                <div style={dividingLineStyle}></div>
            </div>
            <div className='navigationBar' style={navigationBarStyle}>
                <div style={navigationBarItemStyleLeft}>
                    <div style={navigationBarIconItemStyle}>The picture</div>
                    <div>All the goods</div>
                </div>
                <div style={navigationBarItemStyle}>
                    <div style={navigationBarIconItemStyle}>The picture</div>
                    <div>Spell group</div>
                </div>
                <div style={navigationBarItemStyle}>
                    <div style={navigationBarIconItemStyle}>The picture</div>
                    <div>Timed promotions</div>
                </div>
                <div style={navigationBarItemStyleLRight}>
                    <div style={navigationBarIconItemStyle}>The picture</div>
                    <div>Seconds kill</div>
                </div>
            </div>
            <div style={dividingLineStyle}></div>
            <div className='recommend' style={recommendStyle}>
                <div style={recommendIconStyle}>The picture</div>
                <div>Recommend sell like hot cakes</div>
            </div>
            <div style={dividingLineStyle}></div>
            <div className='category'>
                <div style={categoryStyle}>
                    <div style={categoryItemStyleLeft}>
                        <div style={categoryImgItemStyleLeft}>The picture</div>
                        <div>Category 1</div>
                    </div>
                    <div style={categoryItemStyle}>
                        <div style={categoryImgItemStyleLeft}>The picture</div>
                        <div>Category 2</div>
                    </div>
                    <div style={categoryItemStyleLRight}>
                        <div style={categoryImgItemStyleLeft}>The picture</div>
                        <div>Category 3</div>
                    </div>
                </div>
                <div style={categoryStyle}>
                    <div style={categoryItemStyleLeft}>
                        <div style={categoryImgItemStyleLeft}>The picture</div>
                        <div>Category 4</div>
                    </div>
                    <div style={categoryItemStyle}>
                        <div style={categoryImgItemStyleLeft}>The picture</div>
                        <div>Category 5</div>
                    </div>
                    <div style={categoryItemStyleLRight}>
                        <div style={categoryImgItemStyleLeft}>The picture</div>
                        <div>Category 6</div>
                    </div>
                </div>
            </div>
            <div style={dividingLineStyle}></div>
            <div className='productList' style={productListStyle}>
                <div style={productStyle}>
                    <div style={productItemStyleLeft}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                    <div style={productItemStyleRight}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={productStyle}>
                    <div style={productItemStyleLeft}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                    <div style={productItemStyleRight}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={productStyle}>
                    <div style={productItemStyleLeft}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                    <div style={productItemStyleRight}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style={productStyle}>
                    <div style={productItemStyleLeft}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                    <div style={productItemStyleRight}>
                        <div style={productImgItemStyle}>The picture</div>
                        <div style={productItemInfoStyle}>
                            <div style={productItemInfoTextStyle}>The introduction</div>
                            <div style={productItemInfoPriceStyle}>
                                <span style={productItemInfoTextareaStyle}>selections</span>
                                <span style={productItemInfoTextareaStyle}>8888</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>}}export default BodyContainer
Copy the code

Client/Bottom.jsx

import React, { Component } from 'react'


const bottomStyle = { backgroundColor: '#FFFFFF'.position: "fixed".bottom: 0.height: 128.width: '100%'.fontSize: 28.textAlign: 'center' }
const bottomTabBarStyle = { display: 'flex'.alignItems: 'stretch'.backgroundColor: '#FFFFFF'.height: 128 }
const bottomTabBarItemStyle = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '33.3%'.marginLeft: '1px'.marginRight: '1px' }
const bottomTabBarItemStyleLeft = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '33.3%'.marginLeft: '0.5 px..marginRight: '1px' }
const bottomTabBarItemStyleRight = { alignItems: 'center'.display: 'flex'.flexDirection: 'column'.backgroundColor: '#d8f0f3'.color: '# 000000'.width: '33.3%'.marginLeft: '1px'.marginRight: '0.5 px. }
const bottomTabBarItemImg = { height: '88px'.width: '88px'.textAlign: 'center'.lineHeight: '88px'.backgroundColor: '#FFFFFF' }
const bottomTabBarItemText = { height: '40px' }

class Bottom extends Component {
    render() {
        return <div className='bottom' style={bottomStyle}>
            <div className='bottomTabBar' style={bottomTabBarStyle}>
                <div style={bottomTabBarItemStyleLeft}>
                    <div style={bottomTabBarItemImg}>The picture</div>
                    <div style={bottomTabBarItemText}>Mall homepage</div>
                </div>
                <div style={bottomTabBarItemStyle}>
                    <div style={bottomTabBarItemImg}>The picture</div>
                    <div style={bottomTabBarItemText}>The shopping cart</div>
                </div>
                <div style={bottomTabBarItemStyle}>
                    <div style={bottomTabBarItemImg}>The picture</div>
                    <div style={bottomTabBarItemText}>Promotion center</div>
                </div>
                <div style={bottomTabBarItemStyleRight}>
                    <div style={bottomTabBarItemImg}>The picture</div>
                    <div style={bottomTabBarItemText}>Personal center</div>
                </div>
            </div>
        </div>}}export default Bottom
Copy the code

Previous picture of current mall interface:
At this point, the temporary completion of the ‘mall home page’ page layout.

Please follow my wechat account ArthurSlog

If you like my article, please like it and leave a comment
thank you

Slog92_ Uses React framework for front-end development 4

Development Environment MacOS(Mojave 10.14 (18A391))

Information sources

Start coding

Related Posts

Learn the JS regular notes

Task scheduling based on NodeJS and Redis

Definition and use of annotations