React 创建项目

启动:webpack配置

const path =require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin') //导入在内存中国呢自动生成index页面插件

//创建一个插件的实例对象
const htmlPlugin =new HtmlWebPackPlugin({
        template:path.join(__dirname,'./src/index.html'),//源文件
        filename:'index.html'//生成的内存中首页的名称
})
//向外暴露一个打包的配置对象
module.exports={
    mode:'development',
    plugins:[
        htmlPlugin
    ],
    module:{
        rules:[
            { test: /\.js|jsx$/,use:'babel-loader',exclude: /node_modules/}
        ]
    },
    resolve:{
        extensions:['.js','.jsx','.json'],//可以省略这些后缀
        alias:{ //表示别名
            '@':path.join(__dirname,'./src') 
        }
    }
    
}

 

组件创建

import React from 'react'
export default function Hello(props){
    console.log(props)
    return <div>this is a hello {props.name}---{props.age}---{props.gender}</div>
}
//export default 把组件暴露

class创建 组件

class Animal extends React.Component{//使用参数 不需要接收,直接使用this.propos
    render(){
        return <div>class组件
            {this.props.name}
        </div>
    }
}
ReactDOM.render(<div>
    <Hello {...dog}></Hello>
    111
    <Animal {...dog}></Animal>
</div>,document.getElementById('app'))

class 中使用构造函数

class Animal extends React.Component{//使用参数 不需要接收,直接使用this.propos
    constructor(){
        super()//调用了super之后才能使用this关键字
        this.state={
            msg:'good morning'
        }
        
    }
    render(){
        this.state.msg='msg change'
        return <div>{this.state.msg}</div>

    }   
}
ReactDOM.render(<div>
    <Hello {...dog}></Hello>
    111
    <Animal {...dog}></Animal>
    
</div>,document.getElementById('app'))