十分钟搭建React开发环境

React是facebook开源的js库，主要用于构建UI，它采用声明式的设计，通过虚拟dom，提高程序执行效率，并且实现了UI的响应式更新，目前react在前端项目中有着广泛的应用，本文主要讲解如何搭建React开发环境。

开发环境

1.Nodejs和npm

Nodejs和npm是前端开发必备的工具，如果你不确定电脑里面是否已经安装了Nodejs，可以打开命令行，然后输入node -v，如果显示出了Nodejs版本，说明已经成功安装了Nodejs。安装Nodejs以后，npm是附带安装的，无需再单独安装npm。如果还没有安装Nodejs，可以去这个网站下载，https://nodejs.org/zh-cn/download/。在macOS上，直接下载安装即可，不需要另外做配置。如果在windows上安装Nodejs，需要额外配置环境变量，以便命令行可以直接调用到node。

2.VSCode

VSCode是微软开发的一款代码编辑软件，支持多种语言和开发环境，VSCode拥有丰富的插件市场，借助于各种插件，可以为开发带来很多便利。如果你的电脑还没有安装VSCode，可以去这个地址下载，https://code.visualstudio.com/download ，根据操作系统不同，选择合适的版本安装就可以了

3.切换npm镜像源

打开命令行执行 输入

npm config set registry https://registry.npm.taobao.org

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

在下载各种js依赖库的时候，经常遇到下载失败或者下载慢的问题，安装cnpm并且切换镜像就可以解决这个问题了。

4.create-react-app

打开命令行执行安装create-react-app，它是react项目的脚手架，使用它可以快速地创建一个react项目。

cnpm install -g create-react-app

安装成功后，执行

create-react-app my-react-project

my-react-project是项目的名称，这条命令会新建my-react-project目录，并且生成package.json，安装相关的react,react-dom等依赖。

命令执行成功后，执行

 cd my-react-project
 npm start

执行成功后，在浏览中输入http://localhost:3000/，会看到欢迎页面，此时react开发环境已经搭建成功了。

5.VSCode插件

在搭建好开发环境后，或许你还想增加debug功能，这个时候需要使用VSCode插件了。在插件市场中搜索Debugger for Chrome，下载安装。

先在项目命令行中运行npm start，让工程运行起来。然后按F5启动调试，这时VSCode会自动生成配置文件。配置文件位于.vscode文件夹，名称为launch.json。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

注意这里的url配置中有端口号3000，是修改之后的。npm start后运行的端口号要和这里的一致，这样才可以正常启动调试。