利用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 相关文章推荐
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
javascript  删除select中的所有option的实例
Sep 17 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
如何利用vue实现波谱拟合详解
Nov 05 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/12/01 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
php验证码生成器
2017/05/24 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JS表的模拟方法
2015/02/05 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
利用python循环创建多个文件的方法
2018/10/25 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python IDLE添加行号显示教程
2020/04/25 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
新店开张宣传语
2015/07/13 职场文书
Python Numpy库的超详细教程
2022/04/06 Python