写在前面的碎碎念💬：

从大学自学前端到毕业做非前端工作再到裸辞重新学前端，两次学习的体会还是有所不同的。第一次学习的经历就像盲人摸象，摸到啥是啥，跟着网上的教程做，自己设置需求然后不断写bug，当时还是学生，时间也多，做了几个自认为不错的项目，凭着一股初生牛犊不怕虎的劲儿兴冲冲的找工作，当然结果是没找着，好像一股热情被浇了盆冰水。后面在亲戚介绍下做了份不搭边的工作，算是温水煮青蛙的过了三年，期间也有段时间在坚持学习前端知识，但终究还是迫于时间和工作的压力，顶多算是学了点水花。因为工作的关系，为提高效率，后来花了很多时间在学习VBA和Excel函数。虽然只算涉猎了些皮毛，但庆幸自己一直在坚持学习，脑子不太生锈，第二次学习虽然不如第一次掌握得快，但多嚼几遍总能加深印象。当然了，第二次学习更加是得益于有了系统的学习方法和前人的指导，内心里还是十分感激这些老师们的。好像说得有点多，这个等有空再整理出来吧。因为是刚写完几个React的项目，所以想着趁热打铁把笔记写到博客里，方便温故知新。

React 怎么用

通过 CDN 引入

用 <script> 先引入 react.x.min.js 再引入 react-dom.x.min.js
可以到 BootCDN 搜索 CDN
通过 webpack 引入

使用你喜欢的包管理器进行安装
```
yarn add react react-dom
```
在项目中通过 import 引入
```
import React from 'react'
import ReactDOM from 'react-dom'
```

通入 Create React App 引入

前置条件：Node.js Cmder

在预备创建项目的地方打开 Cmder 执行以下命令（~~关于 Cmder 等安装配置后面有空整理出来~~ 整理好了，在这：新手前端的装机攻略，拿来吧你 🙆‍♀）

npx create-react-app my-app

因为是自己做项目，所以一般用的第3种方式创建 React 应用，这种方式会配置好开发环境。成功后的目录是这样的

my-app
├─ .git
├─ .gitignore
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ logo192.png
│  ├─ logo512.png
│  ├─ manifest.json
│  └─ robots.txt
├─ README.md
├─ src
│  ├─ App.css
│  ├─ App.js
│  ├─ App.test.js
│  ├─ index.css
│  ├─ index.js
│  ├─ logo.svg
│  ├─ reportWebVitals.js
│  └─ setupTests.js
└─ yarn.lock

JSX 是什么

先来看一段有趣的代码吧

const element = <h1>Hello, world!</h1>

咋一看会以为是一个普通的 JavaScript 变量声明，但仔细看这个变量的值是一个并没有用引号包裹的 HTML 标签。这就是 JSX，它是一个 JavaScript 的语法扩展。一般建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 具有 JavaScript 的全部功能，并且可以生成 React “元素”。

webpack 内置了 babel-loader，可以将 JSX 编译成 JS 代码，这里涉及到编译原理不述，上面的代码被编译成：

var element = React.createElement("h1", null, "Hello, world!");

为什么使用 JSX 官网有解释，这里就不赘述了。

使用 JSX 的注意事项

驼峰命名法
因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（驼峰命名法）来定义属性的名称，而不使用 HTML 属性名称的命名约定。例如，JSX 里的 class 变成了 className。
嵌入表达式
标签里的所有 JS 代码都要用 {} 包起来。例如，使用到变量 n，则需写成 {n}；使用到对象 {n: 1}，则需写成 {{n: 1}}
养成 return 后面加 () 的习惯

React 元素

元素是构成 React 应用的最小单位。React DOM 负责更新 DOM 来与 React 元素保持一致。

元素渲染

通过 ReactDOM.render(element, container[, callback]) 将 React 元素(element)渲染到 DOM 节点(container)。

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

这里假设HTML 文件某处有一个 id 为 root 的 div。

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

React 组件

Element元素 VS Component组件

const div = React.createElement('div', ...)         // div 是 React 元素
const Div = () => React.createElement('div', ...)   // Div 是 React 组件

简单理解就是一个返回 React 元素 的 函数 就是组件。

在自定义组件中， JSX 所接收的属性以及子组件会被转换为单个对象传递给组件，这个对象被称之为 props。

注意：组件名称必须以大写字母开头。React 会将以小写字母开头的组件视为原生 DOM 标签。

class 组件

使用 ES6 的 class 定义组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

函数组件

使用 JavaScript 函数定义组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

组件渲染

上面例子 class 组件和函数组件是这样调用的：

<Welcome name='April-cl' />

在页面上会渲染成 Hello, April-cl

<Welcome name='April-cl' /> 会被编译成 React.createElement(Welcome, {name: 'April-cl'})

React.createElement的逻辑：

如果传入一个字符串 'div'，则会创建一个 div
如果传入一个函数，则会调用该函数，获取其返回值
如果传入一个类，则在类前面加个 new （这会导致执行 constructor），获取一个组件对象，然后调用对象的 render 方法，获取其返回值

April-cl

http://example.com/2021/08/14/xiao-bai-cai-bi-ji-react-yi/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 April-cl !

React

新手前端的装机攻略，拿来吧你

2021-08-16 电脑

命令行软件

本篇

小白菜笔记--React（一）基础篇

2021-08-14 前端

React