记录下React学习的过程。

想到什么写什么吧。

我学习通常比较笨，没什么好方法。找了个React搭建的前端，但项目从Github拉下来以后完全看不懂。没办法，只能自己从最简单的React项目开始。

既然学React，那肯定先去React官网看看了。在入门教程里提到了搭建本地开发环境。这里使用了Node.js的Create React App方式去创建新的React项目。

1、使用命令行的方式和Node.js的命令创建项目，项目名称为my-app。其中npx命令是用来执行Node.js的package的（npm5.2+附带的package运行工具），create-react-app是包的名称，而my-app是创建的React项目名称，也存放的文件夹名称。

npx create-react-app my-app

2、创建完成之后，使用命令进入刚才创建的文件夹里。

cd my-app

3、启动项目。

npm start

简单提下，这里我用Vscode终端执行的命令。

等项目webpack编译完成后会弹出界面（webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用）。

在项目路径下有个文件叫package.json，里面有段代码：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

这段代码的含义是执行对应的脚本，刚才执行的npm start相当于执行了对应的脚本。其本质上是使用了react-scripts 这个工具来启动、构建和测试我们的项目。

4、项目结束

在命令行中使用按键ctrl+c即可退出React程序。

---

在React中，元素是创建开销极小的普通对象。React DOM会负责更新DOM来与React元素保持一致。

在React中元素和组件是不同的东西。

将一个元素渲染成为DOM

如果在要展示的Html中有一块内容是我们称之为“root”

<div id="root"></div>

该节点内的所有内容都将由React DOM管理。

仅使用React构建的应用通常只有单一的根DOM节点。如果你在将React集成进一个已有应用，那么你可以在应用中包含任意多的独立根DOM节点。

想要将一个React元素渲染到根DOM节点中，需把它们一起传入 ReactDOM.createRoot()中。

const root = ReactDOM.createRoot(document.getElementById('root'));

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

root.render(element);

在上面的代码中声明了一个元素element，之后将该元素传入了“根”root中。

React元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的UI。

更新UI的方式可以是创建一个全新的元素，并将其传入root.render()。

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

// 相当于每秒重新写入root.render(element);
setInterval(tick, 1000);

但这种方式属于将整个DOM重新写了一遍。

---