设置 create-react-app

安装 Node.js

如果你使用 JavaScript 进行开发，那么 Node.js 和 npm 是必不可少的。你可以在官方网站上找到安装说明。安装 Node.js 时会一并安装 npm（Node 包管理器）。npm 用于通过命令行安装项目所需的库或框架（即 Node 包），而 node 命令本身则可用于在终端中编译和运行 JavaScript 文件，例如：

1$ node example.js

此外，还有一种替代方案可以用来安装和管理 Node.js：nvm。对于 macOS 用户，可以通过 Homebrew 安装 nvm；Windows 用户也有对应的 nvm-windows 版本。我强烈建议使用 nvm，因为它可以让你轻松安装和管理多个 Node.js 版本，同时还能帮助你方便地安装特定版本的 Node.js。

创建一个 create-react-app 项目

请按照官方 create-react-app 的设置指南进行操作，并阅读 App.js 文件，其中包含了 React 应用的基本骨架代码。代码结构大致如下：

1import React, { Component } from 'react';
2import logo from './logo.svg';
3import './App.css';
4
5class App extends Component {
6  render() {
7    return (
8      <div className="App">
9        <header className="App-header">
10          <img src={logo} className="App-logo" alt="logo" />
11          <h1 className="App-title">欢迎使用 React</h1>
12        </header>
13        <p className="App-intro">
14          要开始，请编辑 <code>src/App.js</code> 并保存以重新加载。
15        </p>
16      </div>
17    );
18  }
19}
20
21export default App;

如你所见，这个 React 类组件 对于没有太多 JavaScript 经验的人来说可能显得有些难以理解，尽管它实际上只是 React 项目的最基础结构。可以说，React 类组件并不是学习 React 的最佳起点。初学者需要掌握大量与 React 无关的知识点，比如类声明、类方法以及继承机制。

此外，在学习 React 的初期，这些导入语句只会增加理解难度。因此，接下来的课程将重点讲解编写这类代码所需的核心 JavaScript 基础知识，让你在不关注 React 本身的情况下也能轻松理解代码逻辑。在本课程结束时，我们会再次回到这个组件，到那时，相信你已经能够轻松读懂它了。

在下一课中，我们将学习 JavaScript 中变量声明的不同类型。