React 从入门到进阶之路（一）

在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释：React 是用于构建用户界面的JavaScript 库。我们只需要知道这点就够了，对于其他的解释当我们深入学习之后就会自然而然地懂了。

本文将按照官网的推荐在 node 开发环境下创建 React 的一个开发实例。所以在开发之前我们我们可以先在控制台运行：

node -v

来检查自己本地电脑是否安装 node ，如果没有安装的话可以进入 node 官网 https://nodejs.org/zh-cn/ 进行安装，安装过程为傻瓜式安装，一路确认就可以了。

React 官方推荐我们使用 create-react-app 模块来搭建我们的 react 项目。在安装上 node 之后我们打开终端，运行

npm install create-react-app -g

将 create-react-app 模块安装在我们本地电脑，然后在终端进入到自己平时做开发的一个目录，运行

npx create-react-app my-app
cd my-app
npm start

即可搭建并开始我们的项目，其中 npx 的使用必须在 Node 版本 >= 6 ，npm 版本 >= 5.2 的情况下才可以使用。 我们也可以使用另一种方法，在终端输入

npm install yarn -g
yarn -v

来安装 yarn 模块，然后就可以在自己常用的开发目录中运行

create-react-app my-app
cd my-app
yarn start

创建的项目默认端口为 3000，如果运行成功的话可以在浏览器中输入 http://localhost:3000 将项目跑起来。

我们接下来看一下我们创建的 react 项目的目录

node_modules 文件为我们所用到的一些node模块依赖文件，我们可以不用去管。

public 文件是一个公共文件，其中 index.html 为我们的入口文件，favicon.ico 为我们的网站的标识图标。mainfest.json 是允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中，详情可以参考：https://lavas.baidu.com/mip/doc/engage-retain-users/add-to-home-screen/introduction ，这里我们可以不用去管它。

.gitignore 文件为我们使用 git 上传时忽略的文件，

package.json 为我们项目的配置文件，

readme.md 为项目的一些阅读说明文件，

yarn.lock 是我们的一些临时存储文件，

上述这些我们目前都不用去管，我们做开发最重要的 src 目录，接下来我们的开发主要实在 src 目录下完成的。

src 目录中 App.css 和 App.js 是我们的根组件，App.test.js 是一个测试文件，index.js 和 index.css 是我们的 js 入口文件，logo.svg 为一张图片，serviceWorker.js 是一个加快浏览器响应速度的文件。

我们可以看出 src 目录比较乱，里面的 js css 图片等都放在了一起，所以我们在做正式开发之前先将该目录进行一下整理。

components 用来放置我们所有的 react 组件。

static 用来存放我们所有的静态资源。如 js css img 等。我们将 src 目录下的 css 和 图片分别对应放到 static 的 css 和 img 目录下。

当然，当我们在将文件进行归类后运行项目会报错，所以我们还需要对这些静态资源的引用文件做一下修改。我们需要将 App.js 和 index.js 中的引用到的地方进行一下修改项目就可以继续运行了。

修改如下：

App.js

import logo from './static/img/logo.svg';
import './static/css/App.css';

index.js

import './static/css/index.css';

我们最后再来看一下浏览器的运行项目情况：

没问题，关于 react 的开发环境搭建就介绍到这里，在后续中我们将一起学习 react 项目的开发流程。