React 开发环境搭建

先来一个 React 官方文档的链接 点击跳转

搭建 React 的前期准备：你的本地环境需要安装 cnpm、node。

 

注：代码块中的 $  代表： $后面是在命令行输入的命令，举例

$ npm start

解：实际上是应该打开命令行输入

npm start

 

下面开始安装部署 React 的运行环境：

node 安装：

如果你的系统还不支持 Node.js 及 NPM 可以参考 Node.js 安装教程。

npm 安装：

国内使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了， npm 可以使用 cnpm 代替， cnpm 比 npm 速度快。

 

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建react框架的项目：

使用命令行工具#

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

如果 构建报错可参考：create-react-app my-app 报错解决方法 

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

接下来引入 antd

 

首先安装 yarn

//在NPM 中安装
$ npm install -g yarn

现在从 yarn 或 npm 安装并引入 antd。

$ yarn add antd

修改 src/App.js，引入 antd 的按钮组件。

import React, { Component } from 'react';
import Button from 'antd/es/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的官方文档。