react组件（一）

创建组件的方法
index.js 代码如下

//导包
import React from 'react' 
import ReactDOM from 'react-dom' 

const dog = {
    name:'Da',
    age:'3',
    gender:"x"
}

function Hello(props){

    console.log(props)

    return <div>akdkajksd {props.name} {props.age} {props.gender}</div>
}

ReactDOM.render(<div>
    123
    <Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
    <Hello {...dog}></Hello>
</div>,document.getElementById('app'))

抽离到单独文件
在src下创建components文件，在其中创建Hello.jsx文件
Hello.jsx代码如下

import React from 'react' 

export default function Hello(props){

    console.log(props)

    return <div>akdkajksd {props.name} {props.age} {props.gender}</div>
}
//把组件暴露出去
//export default Hello

index.js代码如下

import React from 'react' 
import ReactDOM from 'react-dom' 

//导入Hello组件
//默认，如果不做单独的配置，不能省略后缀名
import Hello from './components/Hello.jsx'

const dog = {
    name:'Da',
    age:'3',
    gender:"x"
}
ReactDOM.render(<div>
    123
    <Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>
    <Hello {...dog}></Hello>
</div>,document.getElementById('app'))

省略后缀名
在webpack.config.js文件中加入

resolve:{
        extensions:['.js','.jsx','.json']//表示这几个文件的后缀名不写
    }

设置@别名
在webpack.config.js文件中加入

alias:{//表示别名
            '@': path.join(__dirname,'./src')//这样@就表示项目根目录中src这一层路径
        }

webpack.config.js文件如下

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

//创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template:path.resolve(__dirname, './src/index.html'),//模板文件的路径
    filename:'index.html' //生成的内存中首页的名称
})
 
module.exports = {
    mode:'development', //测试development   开发production 
    plugins: [
        htmlPlugin
    ],
    module:{
        //所有第三方模块的配置规则
        rules:[{ test: /\.js|jsx$/, use:'babel-loader',exclude:/node_modules/}]
    },
    resolve:{
        extensions:['.js','.jsx','.json'],//表示这几个文件的后缀名不写
        alias:{//表示别名
            '@': path.join(__dirname,'./src')//这样@就表示项目根目录中src这一层路径
        }
    }
    
}