react基础（2）
react基础（1）：介绍了如何创建项目，总结了JSX、组件、样式、事件、state、props、refs、map循环，另外还讲了mock数据和ajax
还是用 react基础1 里创建的项目继续写案例。
react-router
在做单页面应用的时候就需要用到路由了。
首先来看一下我们的项目目录，如下所示：
package.json和webpack.config.js的内容和 react基础（1）一样的。
下面贴一下entries里的文件内容
react2/src/entries/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body> <div id="root"></div> <script src="common.js"></script>
<script src="index.js"></script> </body>
</html>
react2/src/entries/index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render(){
return(
<div>123</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
安装依赖 npm i
启动本地服务 npm start
浏览器打开浏览效果 http://localhost:8989/
效果如下
案例1
react2/src/entries/index.js（其他几个文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';
class App extends Component {
render(){
return(
<div>
<ul>
<li><Link to="/movie">电影</Link></li>
<li><Link to="/tv">电视剧</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<ul>
<li>还珠格格</li>
<li>来自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<ul>
<li>暮光之城</li>
<li>喜剧之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App}>
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Route>
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
Router、Route、Link这三个大家可以看一下教程了解一下定义，这里不详细讲解：教程戳这里
关于history的教程戳这里。常用的History有三种：browserHistory、hashHistory、createMemoryHistory（从react-router引出）。在声明路由的时候需要指定所选的方式，没有默认选项。
使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis
使用browserHistory,浏览器的url是这样的：/user/liuna （大家可以自己试试这种，这里就不写案例了）
这个案例写出来的效果类似tab切换
案例2：
react2/src/entries/index.js（其他几个文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link } from 'react-router';
class App extends Component {
render(){
return(
<div>
<ul>
<li><Link to="/movie">电影</Link></li>
<li><Link to="/tv">电视剧</Link></li>
</ul>
{this.props.children}
</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>还珠格格</li>
<li>来自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>暮光之城</li>
<li>喜剧之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App} />
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
这个效果就相当于是直接跳转了页面，和案例1的tab切换效果不一样的主要代码，如下所示
案例1里面component为Tv和Movie的Route标签是写在component为App的Route标签里的，而案例2里相当于是同级的。
案例3
react2/src/entries/index.js（其他几个文件不修改）
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';
class App extends Component {
render(){
return(
<div>
<p>
<span><Link to="/movie">电影</Link></span>
<span><Link to="/tv">电视剧</Link></span>
</p>
{this.props.children}
</div>
)
}
}
class Home extends Component {
render(){
return(
<div>欢迎你！</div>
)
}
}
class Tv extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>还珠格格</li>
<li>来自星星的你</li>
</ul>
</div>
)
}
}
class Movie extends Component {
render(){
return(
<div>
<Link to="/">返回</Link>
<ul>
<li>暮光之城</li>
<li>喜剧之王</li>
</ul>
</div>
)
}
}
const Routes = ({ history }) =>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/tv" component={Tv} />
<Route path="/movie" component={Movie} />
</Route>
</Router>;
Routes.propTypes = {
history: PropTypes.any,
};
ReactDOM.render(
<Routes history={hashHistory} />,
document.getElementById('root')
);
从上面的效果图中，可以看到，有“欢迎你！”这个类似首页的东西。
IndexRoute默认路由，当path=“/”时，默认显示Home组件。IndexRoute也是从react-router里引出的。
ps
这篇还是react基础（1）写完以后的存货，好久没有更新了，先把这篇存货发了
react基础（2）的更多相关文章
- react基础（1）
在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...
- react基础语法（五） state和props区别和使用
props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- react基础用法二(组件渲染)
react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 /> ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- AntDesign(React)学习-3 React基础
前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...
- React 基础入门，基础知识介绍
React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...
- React基础语法学习
React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...
- React 基础入门
React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...
- react基础
上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...
随机推荐
- SpringMVC详解（六）------与json交互
Json(JavaScript Object Notation),它是一种轻量级数据交换格式,格式简单,易于读写,目前使用特别广泛.那么这篇博客我们主要谈谈在 SpringMVC 中,如何对 json ...
- AC Analysis
1.从Options---sheet properties—circuit—show all调出来节点编号 :
- python+selenium自动化软件测试(第8章) ：多线程
前戏:线程的基础 运行多个线程同时运行几个不同的程序类似,但具有以下优点:进程内共享多线程与主线程相同的数据空间,如果他们是独立的进程,可以共享信息或互相沟通更容易.线程有时称为轻量级进程,他们并不需 ...
- WIN7+IE8环境QTP11不能录制和识别web对象的解决方法
在项目稍微空闲的时间,在办公电脑上面装上QTP11来学习.但是发现在录制脚本时无法录制web对象,在网上找解决方法说以管理员的身份运行QTP就可以解决无法录制的问题,用这方法证明是ok的.后来用Obj ...
- 初识SVN-版本控制工具
慕课网安装教程链接:http://www.imooc.com/video/1924
- Java基础---其他对象
第一讲 System类 一.概述 1.System是描述系统一些信息的类,类中的属性和方法都是静态的.不能被实例化,没有提供构造函数. 2.字段摘要 out:标准输出流.默认是控制台. in: ...
- jquery.tmplate使用心得
jquery.tmplate使用心得 jquery.tmpl.js,是与jquey共同使用的html模板插件.该插件可通过简单的语法将数据放入到html模板中,可以很好的将数据渲染到页面上.该插件在本 ...
- 面向对象五大原则（SRP、OCP、LSP、DIP、ISP）
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt173 OO的五大原则是指 1. SRP(Single Responsibil ...
- svn: Can't convert string from 'UTF-8' to native
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt227 svn 版本库中有文件是以中文字符命名的,在 Linux 下 chec ...
- JavaWeb程序连接SQLserver数据库
声明:一直以来都以为javaweb程序连接数据库是一个很高大上很难的问题,结果今天学习了一下,不到两个小时就解决了,所以总结一篇博客. JavaWeb程序连接SQLserver数据库分为一下步骤: 1 ...