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
然后在此目录下运行:
回答一些问题后,将在这个目录下有package.json。
配置项目下.babelrc文件:
可以为生产和开发不同阶段配置:
现在安装babel-loader, css/styles等加载器:
在根目录webpack.config.js 中,配置webpack模块:
hjs-webpack会export一个单一函数,只有一个参数,这个参数对象是定义了一些简单需要webpack配置的配置,有两个必须关键点:
1.in -单个文件
2.out -产生文件的路径目录
clearBeforeBuild 包括一个选项clearBeforeBuild 用来清除之前构建的旧文件,以便重新构建:
同时,会创建一些路径变量帮助我们从默认配置中进行优化修改,比如源码目录设为变量方便修改:
现在设置 hjs-webpack环境规格开发环境dev和生产环境prod,开发环境是没有任何压缩就接受热加载,而生产环境则不是,我们使用isDev代表process.argv[1],我们来检查一下是否在开发环境:
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容器,带有一个组件和随机文本:
这是一个可运行的简单应用,为了能在页面上看到这些字符,需要为页面安装<App />组件:
让我们启动服务器,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
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修改过]
猜你喜欢