这里有新鲜出炉的 ReactJS 入门教程,程序狗速度看过来!
React.js 是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。
目前 React、webpack 等技术如火如荼,你是不是还在愁苦如何把这些杂乱的知识怎么学习一下,开启一段新的前端开发之路呢?那么这篇将给大家运用示例代码详细的介绍使用 React-router 和 Webpack 如何快速构建一个 react 程序,感兴趣的朋友们下面来一起看看吧。
本文主要介绍的是使用 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
项目创建好后,我们接下来创建一些必要的文件和目录;
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
:配置打包结果,path 定义了输出的文件夹,filename 则定义了打包结果文件的名称,filename 里面的 [name] 会由 entry 中的键替换, 例子中的 / build/bundle.js 便是生成的文件。
- output
resolve:定义了解析模块路径时的配置,常用的就是 extensions,可以用来指定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全.
:定义了对模块的处理逻辑,这里可以用 loaders 定义了一系列的加载器,以及一些正则。当需要加载的文件匹配 test 的正则时,就会进行处理。这里我们使用了 react-hot 和 babel。babel-loader 是我们使用 ES-6 进行开发时用于生成 JS 文件。 最后我们生成了一个 style.css 仅仅做个例子,告诉我们如何引入样式文件,实际上我们可以加载诸如 sass-loader 这样的加载器。
- module
对文件进行处理,这正是 webpack 强大的原因。比如这里定义了凡是. js 结尾的文件都是用 babel-loader 做处理,而. jsx 结尾的文件会先经过 jsx-loader 处理,然后经过 babel-loader 处理。当然这些 loader 也需要通过 npm install 安装。
- loader
: 这里定义了需要使用的插件,比如 commonsPlugin 在打包多个入口文件时会提取出公用的部分,生成 common.js。
- plugins
: 定义代码出现错误时的时受否自动重新加载。
- NoErrorsPlugin
这个时候我们再 package.json 中加入 script 字段,
- "scripts": {
- "start": "webpack-dev-server --hot --progress --colors",
- "build": "webpack --progress --colors"
- }
这个时候我们输入一个
命令时候我们会启动一个 webpack server 这个时候你可以访问
- npm start
如果你使用
- localhost:8080/webpack-dev-server/#/;
时候可以将文件自动生成到 bulid / 下。
- npm run build
接下来我们新建 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 会将我们定义的一切加载到
中来。这就是 index.html 转变成我们 React App.
- document.body
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 放到主机上,更新我们的脚本路径就可以了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对 phperz 的支持。
来源: http://www.phperz.com/article/17/0531/330873.html