React教程：克隆yelp点评网站
React应用最痛苦的是构建文件范例，起步是非常痛苦的，这里介绍在Fullstack.io帮助构建生产环节的产品的工具。
可从github.com/fullstackreact/react-yelp-clonecheck out package.json 和 the webpack.config.js
该教程包括：
1.如何从头开始建立一个新React项目
2.如何创建React项目基本组成部分
3.如何利用编写CSS模块化postcss
4.如何设置测试
5.如何使用react-router在不同的网页之间路由
6.如何与谷歌地图整合
7.如何写一个谷歌地图react组件
8.如何写一个五星评级组件
首先创建项目目录：
$ mkdir yelp && cd $_ $ mkdir -p src/ { components,containers,styles,utils,views } \ && touch webpack.config.js
<p>
|
然后在此目录下运行：
npm init <p> |
回答一些问题后，将在这个目录下有package.json。
Babel是一个javasctip编译器，能够编译下一代Javascript语法。安装：
$ npm install --save-dev babel-core babel-preset-es2015 babel-preset-react babel-preset-react-hmre babel-preset-stage-0 <p> |
配置项目下.babelrc文件：
{
"presets": ["es2015", "stage-0", "react"]
}
<p>
|
可以为生产和开发不同阶段配置：
{
"presets": ["es2015", "stage-0", "react"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}
<p>
|
hjs-webpack是进行webpack设置的，也有开发和生产环境两种选项。包括热加重 压缩 ES6模板等。安装：
$ npm install --save-dev hjs-webpack webpack <p> |
现在安装babel-loader, css/styles等加载器：
$ npm install --save-dev babel-loader css-loader style-loader postcss-loader url-loader file-loader <p> |
在根目录webpack.config.js 中，配置webpack模块：
const webpack = require('webpack');
const fs = require('fs');
const path = require('path'),
join = path.join,
resolve = path.resolve;
const getConfig = require('hjs-webpack');
<p>
|
hjs-webpack会export一个单一函数，只有一个参数，这个参数对象是定义了一些简单需要webpack配置的配置，有两个必须关键点：
1.in -单个文件
2.out -产生文件的路径目录
var config = getConfig({
in: join(__dirname, 'src/app.js'),
out: join(__dirname, 'dist')
})
<p>
|
clearBeforeBuild 包括一个选项clearBeforeBuild 用来清除之前构建的旧文件，以便重新构建：
var config = getConfig({
in: join(__dirname, 'src/app.js'),
out: join(__dirname, 'dist'),
clearBeforeBuild: true
})
<p>
|
同时，会创建一些路径变量帮助我们从默认配置中进行优化修改，比如源码目录设为变量方便修改：
const root = resolve(__dirname);
const src = join(root, 'src');
const modules = join(root, 'node_modules');
const dest = join(root, 'dist');
var config = getConfig({
in: join(src, 'app.js'),
out: dest,
clearBeforeBuild: true
})
<p>
|
现在设置 hjs-webpack环境规格开发环境dev和生产环境prod，开发环境是没有任何压缩就接受热加载，而生产环境则不是，我们使用isDev代表process.argv[1]，我们来检查一下是否在开发环境：
const NODE_ENV = process.env.NODE_ENV;
const isDev = NODE_ENV === 'development';
// alternatively, we can use process.argv[1]
// const isDev = (process.argv[1] || '')
// .indexOf('hjs-dev-server') !== -1;
// ...
var config = getConfig({
isDev: isDev,
in: join(src, 'app.js'),
out: dest,
clearBeforeBuild: true
})
<p>
|
webpack最后还需要我们export这些配置对象，在webpack.config.js最后一行加入：
module.exports = config;
以上是准备环节，下面来到React安装环节：
安装：
$ npm install --save react react-dom
安装react-router：
$ npm install --save react-router
安装所有依赖的简化命令是：
$ npm i -S [dependencies]
因此前面的命令可以重新写为：
$ npm i -S react react-dom
安装开发依赖则是：
$ npm i -D [dependencies]
安装完成后，配置app.js
创建src/app.js
在这个配置文件中，创建简单react容器，带有一个组件和随机文本：
import React from 'react'
import ReactDOM from 'react-dom'
const App = React.createClass({
render: function() {
return (<div>Text text text</div>);
}
});
<p>
|
这是一个可运行的简单应用，为了能在页面上看到这些字符，需要为页面安装<App />组件：
import React from 'react'
import ReactDOM from 'react-dom'
const App = React.createClass({
render: function() {
return (<div>Text text text</div>)
}
});
const mountNode = document.querySelector('#root');
ReactDOM.render(<App />, mountNode);
<p>
|
让我们启动服务器，hjs-webpack会安装在./node_modules目录下。
$ NODE_ENV=development ./node_modules/.bin/hjs-dev-server
会显示监听在http://localhost:3000，用浏览器打开http://localhost:3000即可看到输出文本。
更进一步细节见原文：Fullstack React 🐬: React Tutorial: Cloning Yelp
[该贴被admin于2016-05-29 08:53修改过]
猜你喜欢
