第1集

为什么学React？

大厂出品（Facebook）；找工作需要；简单易学；

第2集

React简介

React是用来构建用户界面的 Javascript 库；
三个特点

  1. 声明式编程（相比较于命令式编程）；
  2. 组件化（高复用）；
  3. 一次学习，随处编写（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 来写。