利用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 function对象那些迷惑分析
Oct 24 Javascript
动态改变div的z-index属性的简单实例
Aug 08 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
package.json配置文件构成详解
Aug 27 Javascript
在vue中实现echarts随窗体变化
Jul 27 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
ThinkPHP模板中数组循环实例
2014/10/30 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
php实现文件上传基本验证
2020/03/04 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
requireJS使用指南
2016/04/27 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
浅谈Python处理PDF的方法
2017/11/10 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python随机生成库faker库api实例详解
2019/11/28 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
若干个Java基础面试题
2015/05/19 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
土地租赁意向书
2014/07/30 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫