准备工作
- 复制 public文件夹、.babelrc、webpack.config.js、package.json，删除vue相关的模块，安装依赖
- 疑问：element 元素的这种写法叫什么？
React jsx
- React 使用 JSX 来代替常规的js
- JSX 就是看起来很像是 XML 的js语法扩展
- 必须得使用jsx吗？
- JSX 执行高效，因为它在编译为js代码后进行了优化
- 类型安全，在编译过程中就能发现错误
- 使用 jsx 编写模板更加的简单快速
- 疑问：HTML标签的属性是不是可以随便的添加呢？
因为jsx其实就是js，一些标识 如 class 和 for 不建议作为xml属性名（class 是类的关键字，for是循环的关键字），作为代替，ReactDOM 中使用 className 和 htmlFor 来对应 class和for
className 和 htmlFor
- jsx 中的class
- 正确写法
- jsx 中的for（例如表单label中的for)
- 正确写法
js表达式
vue {{ 1 + 1 }} // 2
react { 1 + 1 } // 2
如何写行内样式
jsx注释写法
- 注释要写在 {} 中
单行注释
多行注释
数组
- 不写唯一key值会警告
react 组件
- 函数式组件 — 使用的js的函数
- 类组件 — 使用es6的类
函数式组件
- 又被称之为UI组件，无状态组件
- 只负责数据的渲染
const HelloWorld = () => (<div>函数式组件</div>)
类组件
万能组件
使用 es6 中的类来实现组件
使用es6的类的 继承 来将一个普通的类 转换成为一个react的类组件
必须使用 继承自父类的方法 render**，return一段jsx代码**
组件的导入与导出
- vue 定义组件 导出组件 导入组件 注册组件 使用组件
- react 定义组件 导出组件 导入组件 使用组件
- 如果是函数式组件呢？
组件状态
函数式组件 / 类组件
函数式组件又被称之为 无状态组件 ---- 类组件
- 回顾es6的类以及继承
class Student {
// 构造方法 this 代表当前的实例
// constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
constructor (age,username) {
this.age = age
this.username = username
}
run () {
console.log(this.username + '跑步')
}
}
// const stu = new Student(18, 'zywoo')
// stu.run()
// Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多
// Pupil 和 Student 类一模一样
// class Pupil extends Student {}
// const stu = new Pupil(18, 'zywoo')
// stu.run()
// 子类添加自己的属性和方法
class Pupil extends Student {
constructor (age, username, hobby) {
// super 表示父类的构造函数，用来新建父类的this对象
// 子类必须在constructor方法中调用super方法，否则新建实例时会报错
// 因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
// ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。 -- 我是李刚的爸爸
// ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。 -- 我爸是李刚
super(age, username)
this.hobby = hobby
}
run () {
console.log(this.username + '玩' + this.hobby)
}
}
const stu = new Pupil(18, 'zywoo', '篮球')
stu.run()
- 组件状态
组件列表渲染 - 单层遍历
- map方法会返回一个数组，react会默认展开数组
import React from 'react'
// 组件的状态
class HelloWorld extends React.Component{
constructor (props) {
super(props) // 继承了父类的属性和方法
// 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
this.state = { // 添加当前组件的状态 ---- 类似于vue的data
message: 'hello world',
list: [
'html',
'css',
'js'
]
}
}
render () {
return (
<div>
<h1>{ this.state.message }</h1>
<ul>
{ // react 使用 map 遍历数据（通用）
this.state.list.map((item, index) => {
// item 代表的数据的每一个元素
// index 代表索引值
// 返回一段遍历之后的JSX语法代码
// 遍历必写key，key具有唯一性 跟vue思想中保持一致
return (
<li key={index}>{ item }</li>
)
})
}
</ul>
</div>
)
}
}
export default HelloWorld
组件列表渲染 - 多层遍历
import React from 'react'
// 组件的状态
class HelloWorld extends React.Component{
constructor (props) {
super(props) // 继承了父类的属性和方法
// 添加状态 - 得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法
this.state = { // 添加当前组件的状态 ---- 类似于vue的data
message: 'hello world',
list: [
{
a: 'html',
arr: ['H5']
},
{
a: 'css',
arr: ['C3']
},
{
a: 'js',
arr: ['ES6','jQuery']
},
]
}
}
render () {
return (
<div>
<h1>{ this.state.message }</h1>
<ul>
{ // react 使用 map 遍历数据（通用）
this.state.list.map((item, index) => {
// item 代表的数据的每一个元素
// index 代表索引值
// 返回一段遍历之后的JSX语法代码
// 遍历必写key，key具有唯一性 跟vue思想中保持一致
return (
<li key={index}>web前端课程{ item.a }
<ol>
{
item.arr.map((itm, idx) => {
return (
<li key={idx}>{itm}</li>
)
})
}
</ol>
</li>
)
})
}
</ul>
</div>
)
}
}
export default HelloWorld
条件判断
- react 的条件判断实际上就是js的条件判断
