> For the complete documentation index, see [llms.txt](https://discountry.gitbook.io/learn-react-from-scratch/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://discountry.gitbook.io/learn-react-from-scratch/preparation/13react-kai-fa-huan-jing-pei-zhi.md).

# 1-3-React 开发环境配置

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

## 体验 React

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

<https://codepan.net/boilerplate/react>

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

## 使用 React CDN

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

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

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

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

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