React学习第二天（创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径）

React学习第二天

React学习第二天

创建组件的方式（ function 和 class）

ES6 扩展运算符使用

抽离 jsx 组件

如何省略 jsx 后缀名？

使用@别名表示路径

两种创建组件方式的对比

评论列表案例

没有收拾残局的能力，就别放纵善变的情绪！！！

创建组件

第一种创建组件的方式

//第一步：导入包
import React from 'react' //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' //把创建好的 组件 和 虚拟DOM 放到页面上展示的

function Hello() {
   
    return <div>这是一个组件</div>
}

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div>
    <Hello></Hello>
</div>, document.getElementById('app'))

接受外部传值

function Hello(props){
    console.log(props)
    return <div>这是一个组件---{props.name}---{props.age}</div>
}

const dog={
    name:'大黄',
    age:'18'
}

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div>
    <Hello name={dog.name} age={dog.age}></Hello>
    </div>, document.getElementById('app'))

改进：使用ES6 扩展运算符

function Hello(props){
    console.log(props)
    return <div>这是一个组件---{props.name}---{props.age}</div>
}

const dog={
    name:'大黄',
    age:'18'
}

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div>
    <Hello {...dog}></Hello>
</div>, document.getElementById('app'))

抽离 jsx 组件

//第一步：导入包
import React from 'react' //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' //把创建好的 组件 和 虚拟DOM 放到页面上展示的

import Hello from './components/Hello.jsx'

const dog={
    name:'大黄',
    age:'18'
}

//第三步：使用 ReactDOM 把虚拟 DOM 渲染到页面上
ReactDOM.render(<div>
    <Hello {...dog}></Hello>
</div>, document.getElementById('app'))

Hello.jsx:

import React from "react";

//创建并导出
export default function Hello(props){
    console.log(props)
    return <div>这是一个组件---{props.name}---{props.age}</div>
}

如何省略 jsx 后缀名？

配置 webpack.config.js 文件：

resolve:{
   
    extensions:['.js','.jsx','.json']
}

使用@别名表示路径

配置 webpack.config.js 文件：

resolve:{
    extensions:['.js','.jsx','.json'],
        alias:{
            '@':path.join(__dirname,'./src') //这样，@ 就表示 项目根目录中的src 这一层路径
        }
}

第二种创建组件的方式

使用 class 关键字来创建自建

ES6 中 class 关键字࿰