利用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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
js 中 document.createEvent的用法
Aug 29 Javascript
javascript string字符串优化问题
Jul 31 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JavaScript实现随机点名程序
Mar 25 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
jquery select动态加载选择(兼容各种浏览器)
2013/02/01 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
python深度优先搜索和广度优先搜索
2018/02/07 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python将字母转化为数字实例方法
2019/10/04 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
python try...finally...的实现方法
2020/11/25 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
村干部承诺书
2014/03/28 职场文书
岗位职责说明书模板
2014/07/30 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
教师个人学习总结
2015/02/11 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书