React 时尚的开发环境
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "start": "webpack-dev-server --devtool eval --progress --colors --hot", "deploy": "NODE_ENV=production webpack -p", "deploy-windows": "SET NODE_ENV=production & webpack -p ", "validate": "npm ls" }
- 添加 React Router (路由组件)
$ npm install -S react-router 使用 react-router 时你可以把它当成一个组件看待。
- 添加 React Redux (状态管理)
$ npm install react-redux --save 如果你的应用没那么复杂，就没必要用 Redux,另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案(Flux);当你用上 Redux 时，搭配 Immutable-js 会更爽。
- 添加 ESLint (代码质量)
在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 ESLint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。
$ npm install eslint --save - 添加 antd (蚂蚁金服一款简洁的 UI)
$ npm install antd --save 推荐使用更简便的按需加载用法
- 首先需要安装 babel-plugin-import 依赖
$ npm install babel-plugin-import --save-dev - 然后在我们的根目录下新建文件 .babelrc，并添加以下脚本
{ "plugins": [["import", {"libraryName": "antd", "style": "css"}]] //import js and css modularly } - 这时我们需要什么 UI 组件，即可如下写法，在 js 文件 (组件)顶部，以导入的方式这么写以达到按需加载 js 和 css
import { Button } from 'antd'验证依赖包？
安装了这么多依赖模块，我们怎么验证是否安装成功呢？
打开 package.json 文件，在 dependencies 地下就可以查看你安装了那些模块。
买完菜，我们开始做饭吧！
开始做饭
项目文件树形结构（除了 node_modoles、package.json 以外，其他的需手动创建）
- 在项目文件 /app/component/app.js 下添加以下代码
/** * Created by FSX on 6/12/2016. */ import React from 'react'; import ReactDOM from 'react-dom'; import { Button } from 'antd'; var App = React.createClass({ render: function() { return ( <div> <h1>Hey,this is a React and Antd IDE</h1> <div className="Antd"> <Button type="danger" size="large">成功加载Antd组件</Button> </div> </div> ) } }); ReactDOM.render( <App/>, document.getElementById('app') ); 在 index.html 中添加以下脚本。
<!DOCTYPE html> <html lang="en"> <head> <title>index</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> </div> <script type="text/javascript" src="build/bundle.js"></script> </body> </html> - 在项目文件 /app/entry.js 下添加以下代码(调整入口地址)
'use strict'; // component import './components/App' // css import './styles/main.css' 上菜，品尝
npm start // 启动本地服务器，并打包文件输出 执行 npm start 后，打开浏览器，输入地址：http://127.0.0.1:8080/ 就可以成功看到了我们的例子了。
这样我们就配置好了 React + Antd 的生产环境 。
当然，不能留图不留种，不然……
项目地址 React-antd-ide
