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中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...
随机推荐
- 面试 | 商汤科技面试经历之Promise红绿灯的实现
说在前面 说实话,刚开始在听到这个面试题的实话,我是诧异的,红绿灯?这不是单片机.FPGA.F28335.PLC的实验吗?! 而且还要用Promise去写,当时我确实没思路,只好硬着头皮去写,下来再r ...
- [Caffe]史上最全的caffe安装过程
Linux下的GPU版Caffe安装方法 系统环境:Ubuntu 14.04LTS + NV TitanX 1.1 (可选)显卡驱动的安装(有风险) 如果需要重装,需要先卸载已有版本 sudo apt ...
- 用NETSH WINSOCK RESET命令修复网络
之前遇到一种情况,QQ可以正常使用,浏览器无法访问网页.在CMD下ping 主机也提示超时. 最后通过NETSH WINSOCK RESET命令重置WINSOCK目录,成功修复了网络连接. Netsh ...
- Stream-快速入门Stream编程
1.什么是流 Stream 不是集合元素,它不是数据结构并不保存数据,它是有关算法和计算的,它更像一个高级版本的 Iterator.原始版本的 Iterator,用户只能显式地一个一个遍历元素并对其执 ...
- Java面试准备之集合框架
集合框架 Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap Collection 是单列集合 List 元素是有序的(元素存取是有序).可重复 ...
- hashMap遍历方式
package Ch17; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java ...
- 有哪些关于 Python 的技术博客？
Python是一种动态解释型的编程语言,它可以在Windows.UNIX.MAC等多种操作系统以及Java..NET开发平台上使用.不过包含的内容很多,加上各种标准库.拓展库,乱花渐欲迷人眼.因此如何 ...
- Git学习总结（一）
.常用Git命令清单 一.新建代码库 #在当前目录创建一个Git代码库 $ git init #新建一个目录,将其初始化为Git代码库 $ git init [project name] #下载一个项 ...
- poj 1149经典网络流构图
题意:m个猪圈,n个客户,每个客户给出选则猪圈的钥匙和需要购买猪的个数,其中每次客户购买时客户选则的猪圈数量可以相互更换,问最大购买数量. 思路:以客户作为除源点汇点之外的点,然后对于每个猪圈从源点连 ...
- NHibernate学习教程(6)--事务Transactions
本节内容 事务概述 1.新建对象 [测试成功提交] [测试失败回滚] 2.删除对象 3.更新对象 4.保存更新对象 结语 上一篇我们介绍了NHibernate中的Insert, Update, De ...