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

组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径）"/>

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 关键字