利用React-router+Webpack快速构建react程序


Posted in Javascript onOctober 27, 2016

本文主要介绍的是使用React-router和Webpack如何快速构建一个react程序,下面话不多说,感兴趣的可以一起学习学习。

初始化项目

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

<!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);
});

文章头部是我们将要用的react和react-router的插件包引进来。同事我们还引入login.js作为我们的Login React 组件。接着,我们使用React 创建一个类。这个例子中,其实就是一个简单的导航条会出现所有的子组件中。我们简单的Link到我们的路由:App和Login.然后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这个时候可以显示我们刚刚创建的内容。

如果上面一切顺利,那么现在你可以自己创建更多内容来充实自己App.如果你项目中使用Flux,你可以在你的js 文件夹下使用任何结构。

发布

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 #Javascript
浅析如何利用JavaScript进行语音识别
Oct 27 #Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 #Javascript
简单理解vue中track-by属性
Oct 26 #Javascript
javascript iframe跨域详解
Oct 26 #Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 #Javascript
jQuery的ready方法实现原理分析
Oct 26 #Javascript
You might like
php array_map()数组函数使用说明
2011/07/12 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php模拟post提交数据的方法
2015/02/12 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
再谈javascript原型继承
2014/11/10 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
js实现随机数小游戏
2019/06/28 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
bat和python批量重命名文件的实现代码
2016/05/19 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python配置文件处理的方法教程
2019/08/29 Python
keras 多gpu并行运行案例
2020/06/10 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
大学四年的个人自我评价
2014/01/14 职场文书
列车长先进事迹材料
2014/01/25 职场文书
交通事故委托书范本精选
2014/10/04 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
初中政治教师教学反思
2016/02/23 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers
Fluentd搭建日志收集服务
2022/09/23 Servers