1.目录结构
2.webpack.config.js
说明：
1.涉及到的插件需要npm install安装； 2.html-webpack-plugin创建服务于 webpack bundle 的 HTML 文件； 3.clean-webpack-plugin清除dist目录重复的文件； 4.extract-text-webpack-plugin分离css文件。
context: path.resolve(dirname,'./src'),entry: {
app: './main.js'
},output: {
path: path.resolve(dirname,'./dist'),filename: '[name].bundle.js'
},devtool: 'cheap-module-eval-source-map',module: {
rules: [
{
test: /.jsx?$/,exclude: /node_modules/,loader: 'babel-loader'
},{
test: /.css$/,use: ExtractTextPlugin.extract({
fallback: "style-loader",use: ["css-loader","postcss-loader"]
})
},{
test: /.less$/,use: ["style-loader","css-loader","less-loader"]
},{
test: /.(png|jpg)$/,loader: 'url-loader',options: {
limit: 8129
}
}
]
},devServer:{
historyApiFallback: true,host:'0.0.0.0',hot: true,//HMR模式
inline: true,//实时刷新
port: 8181 // 修改端口，一般默认是8080
},resolve: {
extensions: ['.js','.jsx','.css'],modules: [path.resolve(__dirname,'node_modules']
},plugins: [
new webpack.HotModuleReplacementPlugin(),new UglifyJsPlugin({
sourceMap: true
}),new webpack.LoaderOptionsPlugin({
minimize: true,debug: true
}),new HtmlWebpackPlugin({
template:'./templateIndex.html'
}),new ExtractTextPlugin({
filename: '[name].[hash].css',disable: false,allChunks: true,}),new CleanWebpackPlugin(['dist'])
],}
module.exports = config;
// webpack里面配置的bundle.js需要手动打包才会变化,目录可以由自己指定;
// webpack-dev-server自动检测变化自动打包的是开发环境下的bundle.js,打包路径由contentBase决定,两个文件是不一样的.
3.postcss.config.js(Autoprefixer)
4.新建.babelrc
5.index.html
<script src="app.bundle.js">
6.package.json
npm install 或 yarn -> 安装模块，npm run build -> 打包，npm start -> 启动localhost:8181
7.main.js:入口文件
// import Demo2 from './js/demo2.js';
render(
// render(<Demo2 myName="园中桥" sex="female"/>,$('#content')[0]);
8.templateIndex.html
打包后的模板index文件，插件html-webpack-plugin的template指定的目录。
9.demo
demo1.js
{
name:'name1',tel:'12343456783'
},{
name:'name2',tel:'12343456784'
},{
name:'name3',tel:'12343456785'
}
];
export default class Demo1 extends React.Component {
constructor(props) {
super(props);
this.state = {
content: true,value: 'inputText'
};
}
handleClick(){
this.setState({
content: !this.state.content
})
// this.refs.myInput.focus();
}
handleChange(event) {
this.setState({value: event.target.value});
}
renderArr() {
return arr.map((item,index)=>{
return
})
}
render(){
let btnStyle = {
border: '1px solid #ccc',background:'#fff',color: '#a106ce'
}
return (
/ 注释 /
Hello { this.props.textCont}!
{this.state.content ? 'initial value' : 'later value'}
{ /* 标签里面的注释外面要用花括号 */ }{this.state.value}
lalala
-
{ this.renderArr() }
Demo1.propTypes = {
title: React.PropTypes.string.isrequired
}
Demo1.defaultProps = {
textCont: 'React'
}
class DemoChild extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
demo1.css
demo2.js:父子组件生命周期
constructor(props){
super(props);
this.state = {
stateName: this.props.myName + ',你好',count: 0,}
console.log('init-constructor');
}
static get defaultProps() {
return {
myName: "xhh",age: 25
}
}
doUpdateCount(){
this.setState({
count: this.state.count+1
})
}
componentWillMount() {
console.log('componentWillMount');
}
componentDidMount() {
console.log('componentDidMount')
}
componentWillReceiveProps(nextProps){
console.log('componentWillReceiveProps')
}
shouldComponentUpdate(nextProps,nextState){
console.log('shouldComponentUpdate');
// return nextProps.id !== this.props.id;
if(nextState.count > 10) return false;
return true;
}
componentWillUpdate(nextProps,nextState){
console.log('componentWillUpdate');
}
componentDidUpdate(prevProps,prevState){
console.log('componentDidUpdate');
}
componentWillUnmount(){
console.log('componentWillUnmount');
}
render(){
console.log('render');
return (
问候：{this.state.stateName}
年龄：{this.props.age}
性别：{this.props.sex}
父元素计数是:{this.state.count}
Demo2.propTypes = {
myName: PropTypes.string,age: PropTypes.number,sex: PropTypes.string.isrequired
}
class SubMyPropType extends Component {
componentWillMount() {
console.log('subMyPropType-componentWillMount');
}
componentDidMount() {
console.log('subMyPropType-componentDidMount')
}
componentWillReceiveProps(nextProps){
console.log('subMyPropType-componentWillReceiveProps')
}
shouldComponentUpdate(nextProps,nextState){
console.log('subMyPropType-shouldComponentUpdate');
if(nextProps.count1 > 5) return false;
return true;
}
componentWillUpdate(nextProps,nextState){
console.log('subMyPropType-componentWillUpdate');
}
componentDidUpdate(prevProps,prevState){
console.log('subMyPropType-componentDidUpdate');
}
componentWillUnmount(){
console.log('subMyPropType-componentWillUnmount');
}
render(){
console.log('subMyPropType-render');
return(
子元素计数是:{this.props.count1}
) } }demo2.css
