博客> react项目之初体验
react项目之初体验
2019-12-09 00:32 评论:0 阅读:600 zhonglaoban
React webpack gulp

学习 React 时,很苦恼。前前后后看了十几二十篇教程,历经一个月,终于算是有了一些理解。其中不乏有许多困惑的地方,借本文在此梳理,项目地址。 引用 菜鸟教程的话

React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。 React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。 React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

正由于react主要用于构建UI,所以要完成一个完整的项目我们不得不配合使用其他的工具,如webpack(打包工具)、gulp(自动化构建工具)、express(应用程序框架)等。

express

express可以在本地启动一个服务,当你访问对应端口时,你可以在服务里面进行处理,返回文字,图片,页面等,是一个web应用的基础。新建一个server.js,里面如下:

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.send('Hello World!');
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

然后执行

npm init  //初始化packag.json
npm install express --save //安装express
node server.js //把服务器跑起来

打开浏览器输入http://localhost:3000/ 现在你能看到 Hello World! 我们也可以返回一个标签:

res.send('<h1>Hello World!</h1>')

看到就是这样了

Hello World!

我们项目需要做的就是把一些写好的组件、页面呈现给访问者,然后处理一些逻辑和展示数据。 我们再新建一个index.html,内容如下:

<!DOCTYPE html>
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
hello world!
&lt;/body&gt;
&lt;/html&gt;

我们再改一下server.js文件,把html传出去:

res.sendfile&#40;'./index.html'&#41;;

webpack

我们一般用webpack来打包文件和资源,并通过它来实时更新和打包。详细可以看文档。包括webpack的安装,配置文件的解释和使用,打包,实时更新等内容。

由于react需要用到react.js、react-dom.js等库,项目中也会用到其他许许多多的库我们先学习用webpack打包成一个很小的bundle.js文件,然后在html文件中引用。 安装webpack命令:

npm install webpack --save

一个最简单的Webpack配置文件webpack.config.js如下所示:

module.exports = {
entry:[
'./src/app.js'
],
output: {
path: __dirname + '/assets/',
publicPath: "/assets/",
filename: 'bundle.js'
}
};

我们创建两个文件夹src、assets,并在src下新建app.js文件。执行如下命令安装react和react-dom:

npm install react --save
npm install react-dom --save

app.js文件内容如下:

import { render } from 'react-dom'
render((
<div>hello world!</div>
), document.getElementById('root'));

为了让webpack识别ES6和jsx语法我们需要安装加载器loader了:

npm install --save-dev babel-core babel-preset-es2015
npm install --save-dev babel-loader
npm install babel-preset-react --save

在webpack.config.js中添加:

module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}]
}

在命令行执行:

webpack

完成后就能在assets目录下看到一个bundle.js文件了。 为了让我们的app.js允许访问本地资源,我们加入以下代码:

app.use(express.static('assets'));

我们为之前的index.html添加一个script引用bundle.js:

//Express 相对于静态目录查找文件,因此静态目录的名称不是此 URL 的一部分
[removed][removed]

再次执行:

node server.js

我们便可以看到两个hello world!了,这样我们就把react这个“V”和服务器联系了起来,接下来可以专心写界面了。

react

react的官方文档对我们的理解和使用有很大的帮助。文档介绍了react的基本使用(组件的创建和渲染),组件的生命周期(componentDidMount),属性的更新和值的传递(state、setState、props)。

jsx语法

HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。

var names = ['a', 'b', 'c'];
render((
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>
), document.getElementById('root'));

重新打包,执行

webpack
node server.js

可以看到 Hello, a! Hello, b! Hello, c! hello world!

组件(component)

新建一个Home.js文件,如下:

import React from 'react';
class Home extends React.Component {
render() {
return <div>
home
</div>
}
}
export default Home

在app.js中引用

import { render } from 'react-dom';
import React from 'react';
import Home from './Home';
var names = ['a', 'b', 'c'];
render((
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
<Home>
</div>
), document.getElementById('root'));

重新打包,执行

webpack
node server.js

可以看到 Hello, a! Hello, b! Hello, c! home hello world!

gulp

gulp就是一个自动化工具,可以开启多个任务,然后将它们按序执行,也可以结合其他插件使用。

每次都要打包,运行是不是很麻烦,我们就需要用工具来帮我们完成这些工作。在根目录新建一个gulpfile.babel.js文件。 gulp原生并不支持es6语法,但是我们可以告诉gulp使用babel将gulpfile转换为es5,方法就是将gulpfile命名为gulpfile.babel.js。如果你的babel是6.0以上的版本,你需要添加一个.babelrc文件:

{
"presets": ["es2015"]
}

安装gulp相关工具:

npm install --save gulp-cli
npm install --save-dev gulp gulp-babel
npm install --save gulp-util
npm install --save-dev del
npm install --save exec

gulpfile.babel.js文件如下:

import gulp from 'gulp';
import gulpUtil from 'gulp-util';
import webpack from 'webpack';
import webpackConfig from './webpack.config.js';
import del from 'del';
import exec from 'exec';
gulp.task('clean-all', function () {
return del([webpackConfig.output])
});
gulp.task('watch', () => {
return gulp.watch('src/**/*.*', ['webpack:build'])
});
gulp.task('webpack:build', (callback) => {
// run webpack
webpack(webpackConfig, (err) => {
if (err)
throw new gulpUtil.PluginError('webpack:build', err);
callback();
});
});
gulp.task('server', (callback) => {
exec&#40;'node server.js', (err&#41; => {
if (err)
throw new gulpUtil.PluginError('webpack:build', err);
callback()
})
});
gulp.task('default', ['watch', 'webpack:build', 'server']);

执行

gulp

路由

路由可以对不同页面进行跳转,也可以划分项目的层次结构。现在我们安装路由

npm install react-router --save

然后在app.js中做如下改动

import { render } from 'react-dom';
import React from 'react';
import Home from './Home';
import {browserHistory, Router, Route} from 'react-router'
render((
    <Router history={browserHistory}>
        <Route path="/" component={Home}>
    </Router>
), document.getElementById('root'));

我们任然可以看到hello home! 子路由也可以不写在Router组件里面,单独传入Router组件的routes属性,我们也可以将routes抽取出一个单独的文件。

import React from 'react';
import {browserHistory, Router} from 'react-router'
import routes from './routes'

React.render((
    <Router history={browserHistory} routes={routes}>
), document.getElementById('root'));

新建routes文件夹,新建index.js文件

import Home from '../Home';
export default {
    path: '/',
    component: Home,
}

目录截图 安装自动刷新浏览器的插件

npm install webpack-dev-middleware --save-dev
npm install webpack-hot-middleware --save-dev
npm install html-webpack-plugin --save-dev

在webpack.config.js中修改entry,添加plugins

entry:[
        'webpack-hot-middleware/client?reload=true',
        './src/app.js'
    ],
plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: './index.html'
        }),
    ]

在server.js中引用这些中间件,修改后如下

import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackDevConfig from './webpack.config';
export default function (callback) {
    const compiler = webpack(webpackDevConfig);
    const app = express();
    app.use(express.static( webpackDevConfig.output.path));
    app.use(webpackDevMiddleware(compiler,{
        publicPath: webpackDevConfig.output.publicPath,
        noInfo: true,
        stats: {
            colors: true
        }
    }));
    app.use(webpackHotMiddleware(compiler));
    app.listen(3000, function () {
        console.log('Example app listening on port 3000!');
    });
    callback();
};

代理

除了静态资源外,我们也会访问到其他资源。这时候我们就需要用到代理。

npm install http-proxy-middleware --save

在sever.js中导入中间件,把需要代理的请求都拦截下来,去目标服务器访问。

import proxy from 'http-proxy-middleware';

app.use('/a', proxy({
        target: 'http://xxx.xxx.xxx.xxx:80/',
        ws: true,
    }));
收藏
1
sina weixin mail 回到顶部