React开发难在哪？

大家要认识到的是，React仅仅只是一个达到目标的工具，他并不难！

1

认知

对于整个前端行业而言，React的出现具有里程碑的意义。它重新定义了前端开发。

但React的掌握并没有大家认为的那样难。

它给我们提供了一个开发思路以及少量的API，这些API学习起来还算轻松。不过在阅读此系列文章之前，应该有不少读者已经通过官方文档或者其他途径开始尝试学习React，并且在学习过程中遇到了困难。这些困境会给大家带来一些React难以攻克的假象。

我想要说的是，大多数困难，可能并不是React本身带给你的。而是当前那个问题带来的。我们不知道如何用React来解决这个问题，所以我们认为React很难。又或者我们不知道能够用React来干点什么，所以我们无法感知到自己的进步。

因此我们首先需要认知到的是，整个React的学习过程，一定是先学会使用工具，并且利用工具去战胜实践过程中各种各样挑战的这样一个过程。

由于每个人不同的学习与实践经验，同样的问题对于不同的人来说可能意味着不同的难度。例如要求使用React编写一个拖拽组件，知道拖拽实现的原理的朋友，可能就会很容易搞定这个问题，但是对于拖拽原理理解还不够的同学，那么就必然需要付出更多的精力去学习拖拽相关的知识点才能应对自如。

因此，经验的不同，会直接导致学习的快慢。所以就必须要求底子稍微薄弱的同学保持良好的心态，你要认识到，这都是正常的。

2

心态

基于上述的认知，当我们在学习过程中遇到困难时，一定要避免产生怀疑自己能力等的负面情绪或者厌学情绪。学会调整自己，学会将问题细化，通过搜索，查阅资料，寻求帮助等方式，积极地去解决他们。

对没有毕业、或者没有太多工作经验的朋友来说，未来在工作中会遇到的问题，我们认知并不是那么深刻。因此在学习过程中，很多东西我们都不知道为什么要这样做。我们也感受不到不同解决方案之间的差异与提升，所以印象就不会那么深刻，思维也很难有进一步的深入。这种状况带来的问题就是会导致学习起来会比经验丰富的前辈们慢一些，甚至可能会遗忘一些之前学过的知识。不过大家不用担心，这种状况都是正常的。我们只要多多实践，练习，就能克服。

现在我们正面临新的更好的开发方式，和几年前的前辈相比，我们能少走一些弯路，但是我们不能少走所有的弯路直接到达终点。

我们并不需要在某个时刻搞懂所有的问题。正确的学习方法一定会时常感受到“柳暗花明又一村”的感觉。很多时候我们不需要急着在某一个时刻解决当前面临的问题，也许休息一下，出去散个步，聊会儿天，打会儿游戏，再回过头来思考，问题就迎刃而解。不要在某个问题上死磕，这样会很快耗尽你的学习热情与动力。

**尽量不要花心思去担忧暂时还触碰不到的知识。**每个人都加了各种不同的学习群。你总会听到，感受到各种各样不同的未知词汇，即使在我们的零基础学习群里，也会有很多这样的声音。

很多人因为这些声音感到焦虑。

完全没有必要，只要你还在持续学习，学习阶段到了，这些东西自然而然就能接触，并且掌握到。

3

方法

一定要动手实践。不要干读文章！

写《前端基础进阶》这系列文章，发现了一个很有意思的现象。

阅读量7W+

阅读量接近3W

阅读量1W+

从第一篇，到最后一篇，阅读量从7W+递减到2W+。只能说，半途而废的人还蛮多。

所以，不要半途而废，你就能脱颖而出。这也是一个非常重要的学习方法。

4

环境搭建

React的官方文档，为了新的学习者能够更加容易接受React，在最初的介绍中，告诉我们可以通过在js中引入React库，并且在js中直接如下使用。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

但是我个人并不认同这样的入门方式，因为在实践中，我们几乎不会这样使用。

与Vue一样，React同样具有非常优秀的构建工具，但是由于推广方式的原因，React刚入门的同学可能还不知道它。

create-react-app

作为最易上手的react脚手架，create-react-app并不需要花费太多时间就能够掌握，大家只需要按照我接下来的步骤安装需要的环境即可。

当然，要配置一个功能更强大，更适合实践的脚手架，则还需要在此基础上做更多的扩展。我们在开发中再慢慢完善。

1. 安装node

从nodejs官方网站下载你的操作系统对应的node版本。和普通应用一样安装即可。

建议选择左侧稳定版

该页面会自动推荐更合适你电脑的node版本。点击左侧大按钮，将会下载最新的稳定版本。右侧大按钮可能会有一些更新的，但还处于测试阶段的新特性。因此我们通常选择左侧的下载。

node安装的同时，npm也会一起被安装。npm是一个js包管理工具，我们可以利用该工具下载需要的js库。例如我们需要在项目中引入jQuery。那么可以直接这么干。

// 仅在当前项目安装
> npm install jquery

// 全局安装
> npm install jquery -g

安装完成之后，通过查看node版本的方式确保node已经正常安装。

由于网络原因，当我们想要通过npm下载项目依赖包时，可能会很慢甚至直接无法下载，因此在使用时我们通常会使用淘宝NPM镜像。

首先使用如下指令安装cnpm，用以替换默认的npm

> npm install -g cnpm --registry=https://registry.npm.taobao.org

然后就可以使用cnpm来安装想要的模块了。

> cnpm install jquery

当然，现在更多的人更偏向于使用另外一个包管理工具yarn。在后续的教程中，我们可能也会使用到yarn而不使用npm。大家可以访问yarn官方网站按照教程安装yarn。

通常能够使用npm安装的模块，都能够使用yarn来安装，他们的常用指令如下：

// 安装模块
> npm install lodash
> yarn add lodash

// 启动项目
> npm start
> yarn start

// 构建项目
> npm run build
> yarn build

入门时只需要记住几个简单的即可，在这里不建议深究更多的指令，在学习过程中慢慢掌握即可。

yarn 也可以配置国内镜像源。

# 国内源
> npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
> tyarn -v

# 阿里内网源
> tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
> ayarn -v

安装之后执行yarn指令，极少部分情况可能会出现如下提示

> yarn: command not found，

你需要将 yarn global bin 路径配置到环境变量中，方法如下

# mac 系统:
> sudo vi ~/.bash_profile
# 在 .bash_profile 中添加下面一行：
export PATH="$PATH:`yarn global bin`"

# windows系统:
# 获取 global bin 的路径
> yarn global bin
C:UsersAdministratorAppDataLocalYarnbin
# 复制上面的 global bin 的路径，添加到系统环境变量 PATH。

2. 安装一个好用的命令行工具

对于windows系统来说，我们可以直接使用系统自带的cmd。但是cmd比较难用。因此我个人比较推荐大家安装git，并通过git中的git.bash工具进行指令操作。

点击下载git

git下载页面

也是与安装其他应用一样，在电脑上安装好git，找到git的安装目录，我们会发现有一个bash工具。双击它即可使用。

对于mac系统来说，使用起来则相对简单，我们可以直接使用系统自带的terminal工具即可。当然，也可以安装更加好用的iTerm。

点击下载iTerm

iTerm2下载页面

通常我们在安装好iTerm之后，会下载一个非常好用的集成补丁oh my zsh。它为我们使用指令提供了非常多的快捷操作与舒适的补全提示。

// 安装oh my zsh
> curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

对美观有自己要求的同学可以选择对应的主题。

oh my zsh主题选择

3. 安装 create-react-app

如果刚才我们的包管理工具(npm/yarn)已经安装好，那么安装create-react-app就比较简单。

> yarn add create-react-app -g

添加-g表示全局安装

接下来我们就可以使用create-react-app来创建项目啦。

4. 创建第一个react项目

找到一个你专门用来存放项目的目录，例如我的目录名字叫做develop。在命令行工具中进入到这个目录，然后使用如下指令创建项目。

// 进入目录
> cd develop

// 创建一个名为kill的项目
> create-react-app kill

创建完成之后，我们可以看到类似如下图所示的界面。

具体的操作指令都已经告诉我们啦

// 进入项目
> cd kill

// 启动项目
> yarn start

// 打包项目
> yarn build

// 暴露出项目的具体配置，以便于在此基础上扩展/修改更多的配置
> yarn eject

进入并启动项目，在浏览器中输入http://localhost:3000，我们可以看到如下界面。

通常会自动打开

我的第一个React项目

在命令行工具中，注意关注这里的提示。

注意关注这里的两个地址

我们可以直接在电脑中输入http://localhost:3000访问项目。同时，我们也可以输入http://192.168.0.101:3000访问项目。如果你的手机与电脑处于同一局域网，我们也可以通过该地址在手机上访问项目，这对于移动端开发的调试非常有用。

手机上访问

5. 认识项目

打开项目，我们可以看到如下目录。

项目结构

node_modules

node_modules文件夹是项目所有依赖包的存放地址，除了项目初始化时安装的所必须的依赖包之外，我们后续通过yarn/npm安装的包都存放在该目录下。

package.json 与 yarn.lock

项目的配置文件与依赖包的描述文件。目前我们暂时还不需要对他们有过多的了解。在未来如果你要学习webpack等构建工具时才会深入的了解他们。

public

项目的入口文件。通常我们会将index.html存放在该目录里。

src

模块与组件的存放目录。在create-react-app创建的项目中，每一个单独的文件都可以被看成一个模块，例如单独的image，单独的css，单独js等，而所有的组件都存放于src目录中，其中index.js则是js的入口文件。

通常我们创建一个web页面，则需要分别通过link与script标签引入对应的css与js文件。但是在create-react-app的开发环境中，构建工具帮助我们自动完成了这些操作，我们只需要按照当前开发环境的简单规则来组织自己的代码即可。当我们通过yarn build打包项目之后，我们会看到html页面则变成了我们熟知的样子。

那么既然要支持ts，我们创建项目的指令就需要修改成

> create-react-app kill --template typescript