在最初的阶段，可以使用在线编辑的网站来学习React基本的语法。
从 Hello World 开始，可以在Codepen，或者codesandbox上进行编写。
当然，也可以使用npm或者yarn来安装依赖，本地进行开发。
这里主要讲解通过create-react-app来创建一个React项目，后面会提到webpack的一些使用。
详细文档可以去github查看https://github.com/facebook/create-react-app。
Node和Npm首先安装Node.js，这个直接在Node官网下载安装包即可。建议下载长期支持版，bug会较少。
安装完毕后，在终端或者cmd里输入
如果要使用npx，确保npm的版本大于5.2。如果npm版本较低，使用
npm i -g npm更新npm到最新版，就可以使用npx了。有关npx的详细信息，可以查看这篇文章。
如果使用yarn，也可以自行去yarn官网下载安装。
官方介绍了3种创建一个react-app的方法。
npx
npx create-react-app my-appnpm init xxx your-app
npm init react-app my-appnpm init相当于一次npx的命令封装，具体解释可以看一下这篇npm文档-init|npm。
需要注意的是，这个方法需要更高版本的npm，6+。
yarn
我个人比较建议使用yarn来管理npm依赖，速度更快，上手也很简单。此处yarn的版本要求0.25+。
cd my-app等到依赖安装完毕，进入到新创建的my-app目录里。
├── node_modules ├── README.md ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lockcreate-react-app只安装了最少能运行一个react-app的依赖，例子也很简单，现在我们运行一下。
yarn start运行成功后，就可以在:3000看到这个例子了。
webpack现在前端开发常用的构建工具是webpack。接下来介绍用webpack构建一个简单的react-app。
新建目录首先新建一个目录。
mkdir webpack-react-app cd webpack-react-app npm init -y这时，目录里会有一个package.json。接下来，我们新建一个HTML文件，存放到dist目录，作为一个载体。
mkdir dist cd dist touch index.html它的代码如下
<!DOCTYPE html> <html> <head> <title>webpack react app</title> </head> <body> <div></div> <script src="http://www.likecs.com/main.js"></script> </body> </html>这里的id，默认为app，在具体编写时，可以修改。main.js也是webpack自己生成的，可以修改。
安装webpack接下来安装webpack的一些依赖。
yarn add -D webpack webpack-dev-server webpack-cli安装完毕以后，在package.json配置一下启动命令。
... "scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development", ... }, ...--mode 用来配置模式，可以区别是构建还是开发模式，如果是构建发布，就把一些开发时的提示等插件去掉。
--config 指向webpack的配置文件，默认为同目录下的 webpack.config.js。
接下来我们来创建 webpack.config.js。
touch webpack.config.js它的基本代码如下：
module.exports = { entry: './src/index.js', //webpack的入口文件 output: { //输出目录配置 path: __dirname + '/dist', publicPath: 'http://www.likecs.com/', filename: 'main.js' }, devServer: { //开发时服务器的配置 contentBase: './dist' } };根据习惯， src/index.js 是我们默认的入口。打包结束以后，生成一个 main.js 到dist目录下。配置了DevSever之后，我们可以在浏览器里访问到dist下的文件。
接下来需要编写 src/index.js。
终端运行
yarn start打开:8080查看控制台输出。
正常输出了webpack test。
接下来要引入react。
react用到了jsx语法，需要使用babel来转义一遍，才能被浏览器正常读取。
安装babel和依赖
新建babel配置文件
touch .babelrc配置如下：
{ "presets": [ "react", ["env", { "targets": { "browsers": ["last 2 versions", "safari >= 7"] } }] ] }具体的 babel-preset-env 配置可以查看babel文档-babel-preset-env配置。
安装完毕以后，新的 webpack.config.js 配置为
接着就可以安装react依赖了。
yarn add -D react react-dom把 index.js 重写一下。
import React from 'react'; import ReactDOM from 'react-dom'; const title = 'Hello World!'; ReactDOM.render( <div>{title}</div>, document.getElementById('app') );运行一下