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