1. 创建 react 项目

react官网

全局安装 craete-react-app

npm insatll -g create-react-app // 全局安装
create-react-app -V // 查看版本
create-react-app my-app // 创建项目

npx create-next-app@latest // npx 是临时下载

对安装的 react 的一些说明

• react: react 的顶级库, 是一个包，它包含了一些用于创建 React 组件的函数和类。
• react-dom: 。
• react-scripts: 。

小写的组件时 浏览器默认的组件，首字母大写的组件是用户自己创建的组件

ES6 箭头函数中的 this 与外面的 this 指向保持一致

this 谁调用指向谁

2. jsx 语法

3. 组件

3.1 class 组件

3.2 函数式组件

3.3 组件的样式

4. 事件处理

4.1 四种事件绑定的写法

4.2 改变 this 指向方法

/**
 * call 改变this指向 并且自动执行函数
 * apply 改变this指向 并且自动执行函数
 * bind 改变this指向 不自动执行函数, 手动加 () 执行函数
 */

// call
var obj1 = {
    name: '张三',
    getName: function () {
        console.log('obj1', this.name)
    },
}

var obj2 = {
    name: '李四',
    getName: function () {
        console.log('obj2', this.name)
    },
}

// 使用 call 改变 this 指向
obj1.getName() // obj1 张三
obj1.getName.call(obj2) // obj1 李四

// apply
obj1.getName() // obj1 张三
obj1.getName.apply(obj2) // obj1 李四

// bind
obj1.getName() // obj1 张三
obj1.getName.bind(obj2)() // obj1 李四
// 注意洋相执行得加小括号 ()