这是一篇使用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
|
然后在此目录下运行:
回答一些问题后,将在这个目录下有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即可看到输出文本。
更进一步细节见原文:[url=https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/]Fullstack React