使用React-route和Webpack快速构建一个react程序

转载 2016年06月01日 14:44:28

初始化项目

我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息。

$ npm init

接下来我们开始安装依赖项,我的 package.json 的依赖项如下

 "devDependencies": {
    "babel": "^5.5.6",
    "babel-core": "^5.5.6",
    "babel-loader": "^5.1.4",
    "history": "^1.13.1",
    "react": "^0.13.3",
    "react-hot-loader": "^1.2.7",
    "react-router": "^0.13.3",
    "webpack": "^1.12.6",
    "webpack-dev-server": "^1.12.1"
  } 

如果没有填写keywords,可以手动添加:

"keywords": [
    "webpack",
    "es6",
    "react"
  ],
运行命令:

$ npm install 

项目创建好后,我们接下来创建一些必要的文件和目录;

$ mkdir js css && touch index.html webpack.config.js

webpack

webpack (更多)是一款模块处理器,他会将你所有的代码打包成静态文件,放到你的开发的App中。

打开webpack.config.js,然后添加下面的代码:

var webpack = require('webpack');  
module.exports = {  
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: __dirname + '/build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};

这份文件大概有四个配置项entry, output, module,plugins.

entry:指定打包的入口文件,每有一个键值对,就是一个入口文件。

output:配置打包结果,path定义了输出的文件夹,filename则定义了打包结果文件的名称,filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成的文件。

resolve:定义了解析模块路径时的配置,常用的就是extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全.

module:定义了对模块的处理逻辑,这里可以用loaders定义了一系列的加载器,以及一些正则。当需要加载的文件匹配test的正则时,就会进行处理。这里我们使用了react-hotbabelbabel-loader是我们使用ES-6进行开发时用于生成JS文件。最后我们生成了一个style.css仅仅做个例子,告诉我们如何引入样式文件,实际上我们可以加载诸如sass-loader这样的加载器。

loader对文件进行处理,这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理,而.jsx结尾的文件会先经过jsx-loader处理,然后经过babel-loader处理。当然这些loader也需要通过npm install安装。

plugins: 这里定义了需要使用的插件,比如commonsPlugin在打包多个入口文件时会提取出公用的部分,生成common.js。

NoErrorsPlugin: 定义代码出现错误时的时受否自动重新加载。

这个时候我们再package.json中加入script 字段,

"scripts": {
     "start": "webpack-dev-server --hot --progress --colors",
    "build": "set BABEL_ENV=production && webpack --config webpack.config.js --progress"
  },

这个时候我们输入一个npm start命令时候我们会启动一个webpack server这个时候你可以访问localhost:8080/webpack-dev-server/#/;如果你使用npm run build时候可以将文件自动生成到bulid/下。

接下来我们新建index.html文件

<!doctype html>  
<html lang="en">  
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
  </head>
  <body>
    <section id="react"></section>
    <script src="bundle.js"></script>
  </body>
</html>  

现在我们访问浏览器可以便会引进新创建的bundle.js,实际上你可以引进任何你想要的资源。

React-router

完成项目的基本创建,接下来我们创建app.js项目的入口文件。代码如下:

import React from 'react';  
import Router from 'react-router';  
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import LoginHandler from './components/Login.js';

let App = React.createClass({  
  render() {
    return (
      <div className="nav">
        <Link to="app">Home</Link>
        <Link to="login">Login</Link>

        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

let routes = (  
  <Route name="app" path="/" handler={App}>
    <Route name="login" path="/login" handler={LoginHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

文章头部是我们将要用的reactreact-router的插件包引进来。同事我们还引入login.js作为我们的Login React 组件。接着,我们使用React 创建一个类。这个例子中,其实就是一个简单的导航条会出现所有的子组件中。我们简单的Link到我们的路由:AppLogin.然后React route将会被RouteHandler组件初始化。

在这个App中,我们定义路由并且指定了相应的处理程序(React 组件)。我们定义了我们的根路径为app,并且其他的地址将会是App的子组件。这个例子中,我们添加了一个登录页面,用于用户登录到App中。

最后,React-router会将我们定义的一切加载到document.body中来。这就是index.html转变成我们React App.

Components

弄到这了,我们需要添加组件(Components).在我们的 /js 目录下,我们需要开始创建组件。我们创建Login.js:

import React from 'react';

let Login = React.createClass({ 

  render() {
    return(<div>Welcome to login</div>);
  }
});

export default Login;  

其实那只是一个非常简单的组件,内容为显示"Welcaome to Login"。这个时候我们可以运行下我们的app。npm start 然后访问http://localhost:8080/webpack-dev-server/#

这个时候,你可以见到一个导航条上有两个链接Home 和 Login.如果点击Login这个时候可以显示我们刚刚创建的内容。

参考:http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/ package.json中的sripts不同)

demo下载

相关文章推荐

React Router的一个完整示例

本博文提供一个单网页结构网页(SPA)使用React Router路由控制跳转的完整例子。 关于配置可以查看我之前的一篇博客:[一步一步进入React的世界(React+Webpack+ES6组合配置...

React+react-router4+webpack2基础环境搭建

package.json文件"devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "b...

react路由配置

包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构,主要的代码都在src目录下,src下面新建一个containers文件夹放我们的一些组件,router文件夹是配置路由用的。 按照顺序来...

Webpack + react-router 按需加载

webpack + react-router 按需加载关键函数require.ensure(dependencies, callback, chunkName) 详情请见官方文档webpack 配置...

一步一步进入React的世界(React+Webpack+ES6组合配置)

看了很多博客,大都是把配置文件一笔带过,或者干脆不给出配置文件,然而环境搭建对于新手来说是既困难又重要,显然网络上的博客不利于新手开始学习。 BZ打算从从头开始,一步一步配置webpack,能够使用...

react-router学习笔记之入门

react-router学习笔记之入门 react-router是react的一个强大的路由库 react-route可以是UI和路由同步。简单的API却有非常强大的功能:延迟加载、动态路由...

CSS预编译与PostCSS以及Webpack构建CSS综合方案

CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言。CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W...

React-route和Webpack快速构建一个react程序

我们先创建个空文件夹,然后初始化 package.json ,填写一些基本信息。 $ npm init 接下来我们开始安装依赖项,我的 package.json 的依赖项如下 "devDepe...

React实战-如何快速构建一个ReactNative的Demo

React实战-如何快速构建一个ReactNative的Demo ReactJs宣称的是一次学习就够了,意思是学习了ReactJs后,在Web端和移动端就都一样处理了。事实是否真的是这样呢?在实际的应...

react-route+webpack项目工程

  • 2016年06月01日 14:50
  • 156KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用React-route和Webpack快速构建一个react程序
举报原因:
原因补充:

(最多只允许输入30个字)