使用React-route和Webpack快速构建一个react程序
初始化项目我们先创建个空文件夹，然后初始化 package.json,填写一些基本信息。 $ npm init 接下来我们开始安装依赖项，我的 "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 webpackwebpack （更多）是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的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()
]
};
这份文件大概有四个配置项
这个时候我们再 "scripts": {
"start": "webpack-dev-server --hot --progress --colors","build": "webpack --progress --colors"
}
这个时候我们输入一个 接下来我们新建 <!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>
现在我们访问浏览器可以便会引进新创建的 React-router完成项目的基本创建，接下来我们创建 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);
});
文章头部是我们将要用的 在这个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。 这个时候，你可以见到一个导航条上有两个链接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 以及原作者 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |