1-3-React 开发环境配置

如果我们使用 JSX 语法或 ES6 的新特性,我们编写的 React 代码是无法直接在浏览器中运行的,所以我们需要为 React 专门配置开发环境,用来将 React 代码编译为可以直接在浏览器中运行的代码,或者通过一些工具和库在浏览器中处理我们编写的 React 代码,以使其正确地运行。

体验 React

假如你只是想体验一下 React 的话,最快且最简单的方式是使用 React 官方提供的 Codepen 模板,只需要打开一个网址即可在浏览器中体验编写 React 代码。同样是由于国内的网络原因,部分同学使用 Codepen 的体验可能不会特别好,没有关系,再介绍给大家一个替代品,Codepan,也只需要打开一个网址:

Codepan React Template

就可以开始愉快地编码啦,并且这个网站还是可以离线运行的单页应用。

使用 React CDN

我们也可以不使用包管理工具,直接在网页中引入 React ,官方同样为我们提供了一个体验 React 的网页模板

使用 create-react-app 命令行工具

通过 npm,我们可以安装许多命令行工具。 React 官方专门为我们准备了专用的 React 项目生成工具 create-react-app,只需要简单几行代码即可生成 React 项目,并且在开发时还支持实时更新,自动重载等功能。

如果是我们完全地手工配置,则需要配置安装 webpack/babel 等工具库。所以对于初学者或想要快速开发应用的同学,create-react-app 就是你最好的选择。

并且在之后的课程当中,我们同样会使用 create-react-app 来创建我们的教学示例应用。

 

欢迎关注 余博伦 微信公众号