当前位置:首页>React教程>React环境配置

React环境配置

作者:微学网发布时间:2019-08-17 16:13:53

在搭建开发环境之前,我们可以先体验一下React第一个实例。另外,在每篇文章中,您都可以在本站在线编辑实例,然后点击按钮查看,所见即所得,让您的学习变成更加高效

React第一个实例

ReactDOM.render(
    <h1>Hello, 微学网</h1>,
    document.getElementById('root')
);

试一试

本地环境配置

相信您已经体验过了React的第一个实例,有没有跃跃欲试,想要亲自试一试呢?那么我们就需要着手来配置 React 的本地开发环境。其实主要就是安装一些命令行工具。

node/npm 的安装

首先打开Node.js的官网,地址为: https://nodejs.org/zh-cn/ 的官网。
其次网站会根据你的操作系统自动匹配相应的安装包,选择下载 长期支持版本。安装包下载完成之后,双击打开,一路点击下一步,全部默认设置,如果中途不出现任何意外,node 以及 npm 就都顺利地安装在您的电脑上了。
nodejs安装

Windows系统可以按 win键+r 打开运行,输入 cmd 敲击回车。打开命令行,输入:
Mac系统可以按 command + 空格,会弹出搜索框spotlight输入terminal,回车。打开命令行,输入:

node -v
npm -v

来检验一下 node/npm 是否安装正确

配置 npm 淘宝源

由于 npm 官方的服务器在国外,在国内使用会遇到翻墙等网络问题,速度相对来说比较慢,为了方便我们的开发,我们需要手动切换 npm到国内的镜像源。
国内最稳定的镜像源是淘宝提供的。

打开淘宝 npm 镜像的官网 https://npm.taobao.org/,可以看到简要的使用说明。

修改 npm 默认的安装源

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

检验一下刚才的配置是否成功。

npm config get registry

如果安装失败,如下图,那可能您用的是Mac系统,需要每次在命令前加上sudo,如果不想每次都输入sudo,则需要登录root账户

npm安装失败

安装 cnpm

另外,我们还可以使用淘宝镜像提供的 cnpm 工具,安装速度会变得很快,可以直接复制文档中的命令:

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

粘贴在命令行中,回车进行安装,初次安装需要等待的时间可能会比较久,一定要有耐心。

等待安装完成之后,我们可以在命令行输入 cnpm -v 来测试是否安装成功。

安装 nrm

https://www.npmjs.com/package/nrm 是一个管理切换 npm registries的命令行工具,由于各个地区不同的网络环境,以及镜像同步不全量的问题,而且它还带有测速功能,这能让我们很方便地挑选出最适合自己使用的安装源。当在使用淘宝源时,仍有可能遇到一次错误,使用 nrm就可以迅速在各个安装源之间进行切换

安装 nrm 工具:

npm install -g nrm

查看当前以及所有可用的安装源:

nrm ls

切换至相应的安装源:

nrm use cnpm

对各个安装源进行测速:

nrm test

安装 nvm

nvmnode 的版本管理工具。如果您使用的是 Linux/Mac
一类的操作系统的话,系统本身会自带 node ,但是系统自带的 node版本往往会比较旧,在使用过程中可能会出现各种各样的问题,这种情况下就需要使用到 nvm

我们可以通过来安装:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash
// 或者
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.4/install.sh | bash

安装默认最新版本的 node

nvm install node

查看系统中已经安装的 node 版本:

nvm ls

切换至你想要使用的 node 版本:

nvm use <node版本名称>

安装代码编辑器

在本次教程中,我们使用的是 VS Code 代码编辑器。VS Code 是目前对 React支持比较好的一款编辑器。

VS Code官网

VS Code 官网地址是https://code.visualstudio.com/,它是开源免费的,可以从官网直接下载安装包。

编辑器安装完成后,我们可以根据自己的需要安装一些扩展,只需要在左侧的工具栏中点击打开最后一项扩展界面,就可以搜索和配置 VS Code 的扩展了。

VS Code编辑器

推荐大家安装一个 react 技术栈的代码自动补全扩展:

除此之外你还可以安装 ESLint 来检查我们的编码风格,保证我们写出格式更规范可读性更好的代码。

其他的扩展在此就不做推荐,您可以根据自己的喜好去安装其他的美化或者辅助类的扩展。

初始化项目

根据React 官方提供的命令行脚手架工具 create-react-app 生成初始项目,可以通过 npm 来安装create-react-app

npm install create-react-app -g

安装完成之后就可以在命令行使用 create-react-app 了,选择一个合适的目录,然后只需要简单地输入:

 create-react-app todo

可以生成一个名为 todo 的 React 项目。create-react-app 默认会为我们把绝大多数的依赖全部都安装好。

项目生成成功之后,我们在命令行中输入:

code todo

就可以在 VS Code 中开始愉快地编码了。

编译 npm start

VS Code 打开当前项目目录命令行的快捷键是 ctrl + ~ ,之后我们可以先跑一下 npm start 看看项目能否正常地编译。

如果编译失败,需要检查是否在todo内打开终端,如下图。在以往的经验来看,编译失败的原因会有多种情况,需要大家根据实际情况分析报错原因,从而找到正确的解决方案。

当运行成功后,浏览器会直接被打开,这时我们就可以在修改代码保存后,网页进行实时更新。

配置 Chrome 调试

create-react-app 的使用说明里专门为 VS Code 提供了一个开启 Debug 功能的配置文件。
在VS code 中安装 Debugger for Chrome插件,然后点击右边栏的像小虫子的按钮,进入调试界面,如下图所示

Debugger for Chrome

点击设置按钮,打开launch.json文件,复制下面的json

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "webRoot": "${workspaceRoot}/src",
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
    }]
}

保存之后就可以在 VS Code 里连接 Chrome进行调试了,非常的方便,可以直接在代码文件当中设置断点,就能在浏览器中实时生效并进行调试了。

配置 eslint

在项目的根目录下,我们创建一个名为 .eslintrc 的文件,输入:

{
"extends": "react-app"
}

这时,如果我们编写的代码有错误或者格式不符合标准时,就能够在编辑器当中看到相应的提示了:

eslint

开发前的准备到这里就差不多了,下一节课我们就正式开始学习如何用 React 编写组件。