React教程：克隆yelp点评网站

16-05-27 banq

这是一篇使用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 
<p class="indent">

然后在此目录下运行：

npm init
<p class="indent">

回答一些问题后，将在这个目录下有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 class="indent">

配置项目下.babelrc文件：

 {
    "presets": ["es2015", "stage-0", "react"]
  }
<p class="indent">

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

{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}
<p class="indent">

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

$ npm install --save-dev hjs-webpack webpack
<p class="indent">

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

$ npm install --save-dev babel-loader css-loader style-loader postcss-loader url-loader file-loader
<p class="indent">

在根目录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 class="indent">

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

var config = getConfig({
  in: join(__dirname, 'src/app.js'),
  out: join(__dirname, 'dist')
})
<p class="indent">

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

var config = getConfig({
  in: join(__dirname, 'src/app.js'),
  out: join(__dirname, 'dist'),
  clearBeforeBuild: true
})
<p class="indent">

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

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 class="indent">

现在设置 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 class="indent">

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 class="indent">

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

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

猜你喜欢