React.js 基本环境安装

开发一个新的 React 项目

在使用 React 开发一个项目的时候，我们会用到一堆工具来辅助我们进行开发。比如使用 Babel 来进行编译，借助 React-router 来管理单页应用的路由，使用 Redux 来进行状态管理，使用 eslint 来规范代码，使用 webpack 来进行打包。那么，每次开启一个新的项目，我们都需要去配置这些东西。React 官方推荐了一个 create-react-app 的工具，让我们可以用它来帮我们一键式生成附带我们所需要的工具的工程，每次开启一个新项目只需要通过它一键生成新项目即可。

create-react-app

工具地址： https://github.com/facebook

注：使用之前请确认是否已经在本地环境上安装了 Node 以及 NPM。

使用 create-react-app 来构建一个新的 React 应用非常简单，只需要三步即可。

首先执行

npx create-react-app my-app

npx 是 npm v5.2.0引入的一条命令，它可以使开发者直接使用包内提供的命令行工具进行体验。

等同于

npm install create-react-app
create-react-app my-app

这样我们就在本地通过 create-react-app 创建了一个新的 React 应用 my-app。

接下来第二部我们使用 cd 命令进入项目。

cd my-app

执行 npm start 使项目跑起来。

npm start

至此，我们已经顺利借助 create-react-app 让我们新的 React 应用跑了起来。

在终端中可以看到 Compiled successfully! 的提示。

打开浏览器，输入 http://localhost:3000/， 我们可以看到我们新建的页面。

修改

我们打开 src 下的 App.js 文件，将 p 标签的内容改成“Hello，world”。

你可以从浏览器中看到，内容已经被我们修改了。

到这里，我们已经完成了 React.js 的基本环境安装。