这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

大项目需要的基础知识很多都要学习，这里记录跟随React文档初学项目练习的过程

一、前言

1 前置知识

需要对 HTML 和 JavaScript 都比较熟悉。除此之外，我们假定你也已经熟悉了一些编程的概念，例如，函数、对象、数组，以及 class 的一些内容。
可以阅读这篇教程回顾一下 JavaScript。并且也用到了一些 ES6（较新的 JavaScript 版本）的特性。教程中主要使用了箭头函数（arrow functions）、class、let 语句和 const 语句。

2 分章构成

二、准备环境 环境准备是学习该教程的起点。 三、概览 react官网概览介绍了 React 的基础知识：组件、props 和 state。

3 成果：用 React 开发一个井字棋（tic-tac-toe）

你可以提前预览我们要写的游戏的最终效果。如果你看不懂其中的代码，或不熟悉这些语法，别担心！接下来的教程会一步一步帮助你理解 React 及其语法。
在继续后面的教程之前，推荐你先玩一下这个井字棋。在游戏里，你会看到游戏面板的右边有一个标有序号的列表。这个列表记录了游戏中的每个步骤，并且会随着游戏的进行不断更新。
等你熟悉游戏功能，便可关掉它！我们会在一个简单的模板上开始写起。下一步就是帮做好准备工作，这样你就可以开始游戏开发了。

二、准备环境

1 在线环境：

首先在新的浏览器选项卡中打开这个初始模板。 你可以看到一个空的井字棋盘和 React 代码。我们接下来会在本教程中修改该 React 代码。

2 本地环境：

虽然在本地搭建环境要费一些时间，但是你可以选择自己喜欢的编辑器来完成开发。以下是具体步骤：

1. 确保你安装了较新版本的 Node.js。
2. 按照 Create React App 安装指南创建一个新的项目

npx create-react-app my-app
// 第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。
/*在对应文件夹的终端里首次运行上述代码后
To address all issues (including breaking changes), run:
npm audit fix --force

Run `npm audit` for details.

Success! Created mt-app at G:\dajavu\VS Codings\react crash\mt-app
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd mt-app
npm start

Happy hacking!
*/
cd mt-app
npm start

3. 删除掉新项目中 src/ 文件夹下的所有文件。

注意：
不要删除整个 src 文件夹，删除里面的源文件。我们会在接下来的步骤中使用示例代码替换默认源文件。

cd my-app 
cd src 
# 如果你使用 Mac 或 Linux: 
	rm -f * 
# 如果你使用 Windows: 
	del * 
# 然后回到项目文件夹 
	cd ..

4. 在 src/ 文件夹中创建一个名为 index.css 的文件，并拷贝这些 CSS 代码。
5. 在 src/ 文件夹下创建一个名为 index.js 的文件，并拷贝这些 JS 代码。
6. 拷贝以下三行代码到 src/ 文件夹下的 index.js 文件的顶部：

import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css';

现在，在项目文件夹下执行 npm start 命令，然后在浏览器访问 http://localhost:3000。这样你就可以在浏览器中看见一个空的井字棋的棋盘了。
推荐参照这篇教程来给你的编辑器配置语法高亮。
多运行了一次，变成3001

三、概览

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React.Component的子类

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 用法示例: <ShoppingList name="Mark" />

ShoppingList 是一个 React 组件类，或者说是一个 React 组件类型。
一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），
然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。
render 方法的返回值 _描述 _了你希望在屏幕上看到的内容。React 根据描述，然后把结果展示出来。
更具体地来说，render 返回了一个 React 元素，这是一种对渲染内容的轻量级描述。
大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，JSX 可以让你更轻松地书写这些结构。
语法

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);