Learn React from Scratch
  • 从零学习 React 技术栈·理论篇教程简介
  • Preparation
    • 1-1-React 新版本及 ES6 简介
    • 1-2-npm 的安装配置说明
    • 1-3-React 开发环境配置
  • React
    • 2-1-JSX 入门
    • 2-2-组件类型
    • 2-3-组件数据
    • 2-4-组件生命周期
    • 2-5-表单及事件处理
  • Redux
    • 3-1-Redux 简介
    • 3-2-Action
    • 3-3-Reducer
    • 3-4-Store
    • 3-5-Middleware
    • 3-6-react-redux
  • react-router
    • 4-1-react-router-4.0 简介
    • 4-2-react-router-4.0 配置
Powered by GitBook
On this page
  • 体验 React
  • 使用 React CDN
  • 使用 create-react-app 命令行工具

Was this helpful?

  1. Preparation

1-3-React 开发环境配置

Previous1-2-npm 的安装配置说明Next2-1-JSX 入门

Last updated 4 years ago

Was this helpful?

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

体验 React

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

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

使用 React CDN

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

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

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

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

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

https://codepan.net/boilerplate/react