React教程:克隆yelp点评网站

banq 16-05-27
    

这是一篇使用React.js开发复杂大型应用案例的教程,克隆一个yelp,yelp是类似大众点评或美团网的著名应用。

React应用最痛苦的是构建文件范例,起步是非常痛苦的,这里介绍在Fullstack.io帮助构建生产环节的产品的工具。

可从github.com/fullstackreact/react-yelp-clonecheck out package.json 和 the webpack.config.js

在线demo演示

该教程包括:
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

然后在此目录下运行:

npm init

回答一些问题后,将在这个目录下有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


配置项目下.babelrc文件:

{
"presets": ["es2015", "stage-0", "react"]
}

可以为生产和开发不同阶段配置:

{
"presets": ["es2015", "stage-0", "react"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}


hjs-webpack是进行webpack设置的,也有开发和生产环境两种选项。包括热加重 压缩 ES6模板等。安装:


$ npm install --save-dev hjs-webpack webpack


现在安装babel-loader, css/styles等加载器:

$ npm install --save-dev babel-loader css-loader style-loader postcss-loader url-loader file-loader


在根目录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');


hjs-webpack会export一个单一函数,只有一个参数,这个参数对象是定义了一些简单需要webpack配置的配置,有两个必须关键点:
1.in -单个文件
2.out -产生文件的路径目录


var config = getConfig({
in: join(__dirname, 'src/app.js'),
out: join(__dirname, 'dist')
})

clearBeforeBuild 包括一个选项clearBeforeBuild 用来清除之前构建的旧文件,以便重新构建:


var config = getConfig({
in: join(__dirname, 'src/app.js'),
out: join(__dirname, 'dist'),
clearBeforeBuild: true
})


同时,会创建一些路径变量帮助我们从默认配置中进行优化修改,比如源码目录设为变量方便修改:


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
})


现在设置 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
})


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>);
}
});


这是一个可运行的简单应用,为了能在页面上看到这些字符,需要为页面安装<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);


让我们启动服务器,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修改过]