资讯专栏INFORMATION COLUMN

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

ssshooter / 2968人阅读

摘要:对文件进行处理,这正是强大的原因。接着,我们使用创建一个类。在这个中,我们定义路由并且指定了相应的处理程序组件。我们创建其实那只是一个非常简单的组件,内容为显示。官方也有一个使用聊天可供学习。

初始化项目

我们先创建个空文件夹,然后初始化 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"
  } 

运行命令:

$ 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": "webpack --progress --colors"
  }

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

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

  
  
  
    
    New React App
  
  
    

现在我们访问浏览器可以便会引进新创建的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 (
      
Home Login {/* this is the importTant part */}
); } }); let routes = ( ); Router.run(routes, function (Handler) { React.render(, 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(
Welcome to login
); } }); export default Login;

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

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

如果上面一切顺利,那么现在你可以自己创建更多内容来充实自己App.如果你项目中使用Flux(强烈推荐,地址),你可以在你的js 文件夹下使用任何结构。Facebook 官方也有一个使用flux聊天Demo可供学习。

发布

实际上我们有很多方法可以上线你的服务,但是非常好的一件事情是webpack 可以轻松的使用生成的文件。其中你可以快速的将这些资源文件放到cdn上,然后将index.html放到主机上,更新我们的脚本路径就可以了。

博客地址:http://www.jackpu.com/shi-yong-react-routehe-webpackkuai-su-gou-jian-ge-reactcheng-xu/

如果有什么问题可以发送邮件给我 kakashjack@gmail.com 以及原作者

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78811.html

相关文章

  • React+ Redux + React-route + Axios 实战,很适合进阶

    摘要:前言前段时间学习完了的基础自己网上找了一些实战项目做了几个感觉项目不是很全面就想做一个完整的项目来提升自己的水平以前学习的时候就看过大神的项目所以自己打算用重写它后端数据还是用实在没有精力撸后端感谢大神该项目是饿了么目前开发了登录注册购 前言 前段时间学习完了React的基础,自己网上找了一些实战项目,做了几个感觉项目不是很全面,就想做一个完整的项目来提升自己的React水平.以前学习...

    phpmatt 评论0 收藏0
  • Router入门0x203: reactreact-routereact-route-dom

    摘要:概述上一章使用的是自己实现的,当然已经有现成的库给我们用了,那就是。总结看透它,然后掌握它资源源码 0x000 概述 上一章使用的是自己实现的route,当然已经有现成的库给我们用了,那就是react-route。 0x001 history Api说明 在说这个库之前,得先对history新的api做一个了解 window.history.pushState(data,title...

    luxixing 评论0 收藏0
  • react+webpack+webstorm开发环境搭建

    摘要:先是基础知识,首先是补了的基础,使用了的入门教程。另外关于,慕课的视频教程讲的也比较清晰,适合入门统统过了一遍之后,开始建立脚手架,正式上马编写。废话不多说了,下面一步一步开始了。安装完成之后,记得设置路径构建项目使用新建一个空白项目。 前言 春节期间,更新了一下自己关于前端的知识体系,要知道对于前端技术,我还是停留在JSP,JQUERY的时代,现在项目里面使用REACT作为前台,所以...

    Snailclimb 评论0 收藏0
  • Router入门0x201: 从 URL 到 SPA

    摘要:的全称是统一资源定位符英文,可以这么说,是一种标准,而网址则是符合标准的一种实现而已。渲染器,将组件渲染到页面上。 0x000 概述 从这一章开始就进入路由章节了,并不直接从如何使用react-route来讲,而是从路由的概念和实现来讲,达到知道路由的本质,而不是只知道如何使用react-route库的目的,毕竟react-route只是一个库,是路由的一个实现而已,而不是路由本身。 ...

    honmaple 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<