1. React开发环境

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

1.1 React 特点

• 声明式设计 −React采用声明范式，可以轻松描述应用。
• 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
• 灵活 −React可以与已知的库或框架很好地配合。
• JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
• 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
• 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

1.2. 安装Node.js

若要使用React先要安装Node.js，这一步比较简单，登录官方网站
https://nodejs.org/en/下载安装程序即可。

1.3. 原版react

在终端输入以下代码进行React脚手架安装（首次需要）

npm install --global create-react-app

创建应用

$ create-react-app hello

进入目录，启动程序

cd 
npm start

1.4. Eclipse中开发React

打开Eclipse开发环境Help目录下的Eclipse Marketplace，搜索React，安装React::CodeMix。

选择File->New Project选择CoeMix下的React Project。

新建好工程后，查看READFIRST.md文件，说明如何继续操作。

1. From the `Quick Open`  Command Palette (ctrl/cmd + shift + p) search for:
     `Terminal: Create New Integrated Terminal`
2. From the `Quick Open` options select this project.
3. Once you are inside the Terminal, execute:
4. Finally to run this example run 
5. Open your browser on http://localhost:3000

2. 其他前端框架的配置

2.1. 添加Ant Design

由于长城的问题，使用npm安装其他技术栈的时候总会很卡，我们可以安装阿里开发的cnpm，使用cnpm安装其他技术栈很快捷。使用国内影响安装cnpm。

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

在终端里为项目安装并引入antd

$ cnpm add antd

在src目录下新建App.js文件，代码如下：

import  React, { Component } from 'react';
import  Button  from 'antd/lib/button';
import './App.css';
class  App  extends  Component {
  constructor(props){
  super(props);
 }
  render() {
  return (
 <div  className="App">
 <h2>Hello World</h2>
 <Button  type="primary">Button</Button>
 </div>
 );
 }
}
export  default  App;

在src目录下新建App.css样式文件，代码如下：

@import '~antd/dist/antd.css';
.App {
  text-align: center;
}

启动服务。

$ npm run start

打开页面，看到蓝色小按钮，但这样有一个问题，程序会加载全部ant design的样式，比较浪费资源，下面通过react-app-rewired和 babel-plugin-import按需加载组件样式。

添加react-app-rewired

$ cnpm add react-app-rewired

添加babel-plugin-import

$ cnpm add babel-plugin-import

修改package.json

/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test", }

在项目根目录创建一个config-overrides.js用来修改默认配置。

 const { injectBabelPlugin } = require('react-app-rewired');
 module.exports = function  override(config, env) {
  config = injectBabelPlugin(
 ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
  config,
 );
  return  config;
 };

然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 样式代码，并且按下面的格式在App.js引入模块。

- import Button from 'antd/lib/button';
+ import { Button } from 'antd';

程序运转正常，可以按照此方式使用其他Ant Design。

$ npm run start

2.2. 添加D3

安装d3

$ npm install d3

在前端导入后即可使用d3.

import * as d3 from 'd3';