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'))