从零快速搭建react-极简入门1_初始安装

1. 写在前面的话

1.1 为什么写这篇文章

笔者从其他技术领域进入react，在网上找了很多文章，可能是文章编写日期比较久远，单一文章跟着指令都无法成功在本地创建可执行的react项目，作为程序员，有什么比首先创建一个可执行的hello world更加重要的事情呢？因此，在百度了很多文章之后，结合各种不同的前人指引，找到一个最简方式在本地搭建一个react项目。
本文撰写完成日期：2020-04-05，如果跟随步骤出现问题，可留言给笔者进行更新

1.2 适用读者

本文尽可能从新手的角度来描述（本文笔者就是从react小白开始），尽可能把每一步的命令及文件都完整的呈现在文章中，做到抄来即可使用的目的。

1.3 基础技能

虽然本文是以新手的角度来描述，但读者应该具有以下基础技能：

1. 可以根据指引从网上下载软件并安装
2. 知道如何打开命令行窗口，及输入指令
3. 有前端html，CSS，简单javascript的基础

2. 前期准备-软件安装

2.1 关于nodejs与npm的说明

网上有比较多的nodejs与npm的说明，有兴趣的读者可以自行查找扫盲贴，这里我们只需要知道这两个工具是能快速帮助我们搭建react项目即可。

2.2 nodeJS安装

nodejs的安装软件，可以访问官方网站：下载
安装步骤省略，可用默认选项直至安装完毕。
安装之后，打开命令行窗口，输入一下命令：
node --version
如果出现版本号，说明已经安装成功，如下图，笔者的node版本是v10.12.0

E:\com\code>node --version
v10.12.0

2.3 npm安装

如果你是从官网下载最新的几个版本，npm已经是包含在nodejs的安装包中，同2.2，在命令行窗口输入命令确认：
npm --version
出现以下结果说明npm已经安装

E:\com\code>npm --version
6.4.1

3. 开始

3.1 cnpm

3.1.1 关于npm与cnpm

因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
所以建议大家都讲npm替换成cnpm（就如同在国内使用baidu而不是google一样，提高开发速度）

3.1.2 安装cnpm

在命令行窗口输入以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
界面上出现以下文字，耐心等待到安装完成

E:\com\code>npm install -g cnpm --registry=https://registry.npm.taobao.org
[..................] / rollbackFailedOptional: verb npm-session e59fcece866c7ff2  

完成后在命令行输入
cnpm --version
可以看到有效信息（这个比较简单，这里不再提供截图）

3.1.3 修改镜像地址

先来看下npm拉取资源的源地址，在命令行窗口输入：
npm config get registry
可以看到结果：

E:\com\code>npm config get registry
https://registry.npmjs.org/

将源地址修改为淘宝源，使用以下命令：
npm config set registry https://registry.npm.taobao.org
该命令执行速度很快，所以执行命令之后可以马上再查看地址，已经指向国内的taobao了

E:\com\code>npm config set registry https://registry.npm.taobao.org

E:\com\code>npm config get registry
https://registry.npm.taobao.org/

3.2 create-react-app

3.2.1 关于create-react-app

如前面所说，网上查找的很多资料，介绍了很多的技术名词，比如，转译JavaScript代码需要使用Babel，模块打包工具又要使用Webpack，定制build过程需要grunt或者gulp……这些技术栈都需要各自的配置文件，还没有开始写一行React相关代码，开发人员就已经被各种技术名词淹没。

针对这种情况，React的创建者Facebook提供了一个快速开发React应用的工具，名叫create-react-app，这个工具的目的是将开发人员从配置工作中解脱出来，无需过早关注这些技术栈细节，通过创建一个已经完成基本配置的应用，让开发者快速开始React应用的开发。

本篇入门使用create-react-app创建，我们用这种最简单的方式创建可运行的应用，必要的时候才会介绍底层技术栈的细节，毕竟，没有什么比一个能运行的应用更加增强开发者的信心。

3.2.2 安装create-react-app

create-react-app是一个通过npm发布的安装包，在确认Node.js和npm安装好之后，命令行中执行下面的命令安装create-react-app：
cnpm install --global create-react-app
执行命令后，会看到有一行字在下面显示，这是npm正从网上下载并安装，耐心等待即可

E:\com\code>cnpm install --global create-react-app
Downloading create-react-app to C:\Users\86185\AppData\Roaming\npm\node_modules\create-react-app_tmp
Copying C:\Users\86185\AppData\Roaming\npm\node_modules\create-react-app_tmp\_create-react-app@3.4.1@create-react-app to C:\Users\86185\AppData\Roaming\npm\node_modules\create-react-app

如果安装出现错误，请看文章末尾的错误应对列表
如果安装成功，会出现类似以下的文字：(不同时期版本不同，如果没有错误都可以当做安装成功)

[create-react-app@3.4.1] link C:\Users\86185\AppData\Roaming\npm\create-react-app@ -> C:\Users\86185\AppData\Roaming\npm\node_modules\create-react-app\index.js

E:\com\code>

3.2.3 创建并初始化第一个react项目

安装过程结束之后，你的电脑中就会有create-react-app这样一个可以执行的命令，这个命令会在当前目录下创建指定参数名的应用目录。我给第一个项目起名叫【study1_react】（当然，你可以起其他你喜欢的名字）。
我们到命令行中，选定的父目录下，执行下面的命令：
create-react-app study1_react
出现以下文字，等待安装完成

E:\com\code>create-react-app study1_react

Creating a new React app in E:\com\code\study1_react.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

[..................] | rollbackFailedOptional: verb npm-session bb8c4e755625c127   

安装完成后，会看到已经带有一定代码的项目目录已经创建成功

3.2.4 验证第一个项目是否初始化成功

首先从命令行进入上一步初始化的目录study1_react，使用命令：
cd study1_react
然后使用命令开启服务器
npm start

E:\com\code>cd study1_react

E:\com\code\study1_react>npm start

> study1_react@0.1.0 start E:\com\code\study1_react
> react-scripts start

i ｢wds｣: Project is running at http://192.168.124.13/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from E:\com\code\study1_react\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view study1_react in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.124.13:3000

图中的http://192.168.124.13:3000是写者的外部地址，可以不用理会。当命令完成后，系统会自动打开浏览器并访问http://localhost:3000，如果浏览器没自动打开，你可以自行打开浏览器并输入http://localhost:3000，可以看到页面呈现如下：

那么，你已经有一个可以运行的react项目了。到这里，一个里程碑算是完成了，下一篇，笔者将介绍react的基本组件，及如何一步步的认识react的各个概念及用法

9. 错误应对列表

9.1. 安装create-react-app错误

9.1.1 Z_BUF_ERROR

如果安装出现以下错误：

E:\com\code>npm install --global create-react-app
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file

试一下清理缓存
npm cache clean --force
待运行完毕后，再一次运行安装命令