目标

• 掌握 createElement 方法使用；
• 掌握基于 JSX 的视图构建；
• 掌握基于 CRA 的 React 项目构建。

内容

React

• 一个用于构建用户界面的 JavaScript 库；
• 中文手册： https://react.docschina.org；

使用 React 构建视图

• React.js 提供 React.js 核心功能代码，如：虚拟 DOM、组件；
  • React.createElement(type, props, children);
  • 虚拟 DOM：以纯对象的形式描述 DOM 树。
• ReactDOM 提供了与浏览器交互的 DOM 功能，如 DOM 渲染：
  • ReactDOM.render( Vnode， container[, callback]);
    • Vnode：要渲染的内容；
    • container：要渲染的内容存放容器（会将内容存放到该容器下）；
    • callback：渲染后的回调函数。

  <script src="./js//react.js"></script>
  <script src="./js/react-dom.js"></script>
  <script>
    let h2 = React.createElement('h2', {style:{background:"red"}}, 'Hello World', 'aaa');
    let p = React.createElement('p', null, 'React 第一节课');
    let a1 = React.createElement('a', {href:'https://baidu.com'}, '链接1');
    let a2 = React.createElement('a', {href:'https://taobao.com'}, '链接2');
    let nav = React.createElement('p', null, a1,a2);
    let header = React.createElement('header', {id: "header"}, h2, nav, p);
    ReactDOM.render(header, document.querySelector('h1'), () => {
      console.log('渲染完成');
    })
  </script>
  

create-react-app

• create-react-app 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它我们可以使用 模块化 以及 ES6+ 等更（new）新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用。

安装

• npm：npm i -g react-react-app；
• yarn：npm i -g react-react-app。

使用

• 安装完成以后，即可使用 create-react-app 命令：
  • create-react-app <项目名称> 或者 npx create-react-app <项目名称>。

命令脚本

• create-react-app 同时也提供了其它一些命令来帮助我们进行开发。
• npm start：启动一个内置的本地 WebServer，根目录映射到 ./public 目录，默认端口：3000；
• npm run test：运行 Jest 测试；
• npm run build：打包应用（准备上线）；
• npm run eject：
  • 将 webpack config 暴露出来，但是这是一个不可逆的操作；
  • 默认将 webpack.config.js 隐藏在 node_modules/react-scripts/cinfig 下面。

JSX

• JSX 是一个基于 JavaScript + XML 的扩展语法；

插值表达式

• 在 JSX 中可以使用 {表达式} 嵌入表达式；
• 表达式：产生值的一组代码集合；
  • 变量；
  • 算术运算；
  • 函数调用；
  • 注意：分清楚 表达式 与 语句 的区别，if、for、while 这些都是语句，JSX 不支持语句。

在元素内容中插值表达式

• 在内容插值表达式可以接受的两种注释和 React Nodes：
• 注释：

  // 多行注释
  {/* 
    {false}
    {null} 
  */}
  
  // 单行注释
  {/* {undefined} */}
  

• React Nodes：
  • 文本节点：
    • 字符串、数字：原样输出；
    • 布尔值、空、未定义、symbol 会被忽略；

    每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符；这是该数据类型仅有的目的。

  • React Node；
  • 数组。

列表输出和条件输出

• 条件输出：
  • 三元运算符：
  • 与、或运算符；
  • 函数。
• 列表输出：借助数组进行输出。

JSX 中的特殊属性

• 涉及到关键字：class 等；
• 由多个单词组成，一般多使用驼峰命名的形式；
• 特殊属性：
  • style：是双花括号，第一个花括号是插值表达式，第二个花括号是style的值；
  • dangerouslySetInnerHTML：当有字符串包裹的标签时，需要使用这个属性，<h2 dangerouslySetInnerHTML={{__html: '<p>ttt</p>'}}></h2>。

JSX 使用注意事项

1. JSX 不是字符串；
2. JSX 不是 HTML，很多写法和 HTML 有区别，另外有强制的大小写规则；
3. 标签名必须小写，组件名首字母必须大写；
4. 所有的标记必须闭合；
5. JSX 中属性的写法，不一定和 HTML 一致：
   1. class --> className;
   2. 如果属性名由两个或两个以上单词组成，一般从第二个单词开始首字母要大写；
   3. 注意 style 的值，不是字符串，而是 对象；
   4. innerHTML 属性；
6. 除了字符串，其它所有的值都需要使用插值表达式；
   7.JSX 最终会变成虚拟DOM（一个对象），一定要注意，JSX 在输出时，必须有且只有一个顶层容器元素：16 之前使用 div 等标签包裹，16 新增了 Fragment 标签，17 之后可以使用 <></>。

在 react17 之后引入了 JSX-runtime，可以直接将 JSX 编译为虚拟 DOM，书写 JSX时 就不再需要引入 React。