react前端自动化webpack配置

1. npm init
2. package.json install dependence
webpack webpack-dev-server
react react-dom react-hot-loader
css-loader style-loader
babel babelify babel-loader babel-core babel-preset-es2015 babel-preset-react

script start : webpack-dev-server

3. webpack.config.js
require resolve from path

entry : /src/js/index.js
output : /dist/main.js
module /\.js$/ loader:babel-loader query:presets:[es2015,react]

devServer :hot contentBase

plugins : new webpack.HotModuleReplacementPlugin()

webpack-dev-server

目录结构：

4. react component

生产component

export default class headerComponent extends React.Component{
    render(){
        return (
            <header>
                this is a header
            </header>
        )
    }
}

　并入index.js

import HeaderComponent from './components/header.component.js'

class Index extends React.Component{
    render(){
        return (
            <div>
                <HeaderComponent></HeaderComponent>
                <Container></Container>
                <FooterComponent></FooterComponent>
            </div>
        )
    }
}

渲染到index.html

ReactDom.render(
    <Index></Index>,
    document.getElementById('example')
)

5. 样式引用

style-loader和css-loader

main.css新建样式

.small-font{
    background: #;
    color:#fff;
    font-size: 12px;
}

组件引用

            <header className='small-font'>
                this is a header
            </header>    

创建样式对象

        const headerStyle = {
            background:'#333'
        }    

引入样式对象，此时会编译为行内样式

<header style={headerStyle} className='small-font'>
        this is a header
</header>

6 state props

　　1. state控制组件的状态，props进行组件传参

　　2. state改变可以迅速反应到dom上，进行虚拟virtual dom渲染,setState进行传