objtube的卢克儿的 React 教程笔记
第1集
为什么学React？
大厂出品（Facebook）；找工作需要；简单易学；
第2集
React简介
React是用来构建用户界面的 Javascript 库；
三个特点
- 声明式编程（相比较于命令式编程）；
- 组件化（高复用）；
- 一次学习，随处编写（Web:ReactDOM, 移动端：ReactNative, VR：React360）；
第3集
CRA介绍
CRA: 官方脚手架工具 Create React App
用Create React App 创建一个React项目
npx create-react-app HelloWorld cd HelloWorld yarn start
React项目里的文件
package.json文件
scripts 中
*"start": 启动项目；
*"build": 打包构建项目；
*"test": 运行测试用例；
*"eject": 暴露 webpack 配置（不可逆）；
src/index.js文件改写
// 使用 jsx 语法必须引入 React
import React from "react";
// ReactDOM 用来在 Web 端渲染 React 元素
import ReactDOM from "react-dom";
// jsx 语法写的 React 元素
const element = <h1>Hello World !</h1>;
ReactDOM.render(element, document.getElementById("root")); 第4集
JSX 介绍
jsx:Javascript 的语法扩展，只能在 React 开发环境中使用；
// 表达式是会返回一个值的代码单元，插入 jsx 语法中必须用花括号括起来
const 表达式 = 'Song';
const element = <div>Hello, { 表达式 }</div>; jsx 会在运行或者打包阶段被 Babel 进行编译生成浏览器可以识别的代码。
const element = <h1>Hello World!</h1>
// 上面的代码会被 Babel 编译成
const element = React.createElement("h1", null, "Hello World!")；
// 上面使用了 React.createElement() ，这就是为什么使用 jsx 的文件就必须引入 React 的原因React.createElement 返回的结果是一个有着固定数据结构的对象。
React 为什么使用 jsx 语法？
官方解释：“一个页面或者组件的渲染逻辑应该与其他的UI逻辑放在一起：比如像事件的绑定，状态改变后渲染内容的变化。”
js 与 HTML 本质是强耦合的，本身就是不停的用 js 来改变 UI。分开思考会带来很多操作的不便和编程的低效，会限制我们的抽象思维。jsx 将 UI 逻辑和渲染逻辑的代码统统用 js 来写。
