react出于FackBook,是一个将js与css共写的里程碑,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图),后来出现redux更多的是处理数据,所以也适合做逻辑复杂的管理系统,下面我们从项目创建,路由管理,和redux数据操作来简述

项目创建

npm install -g generator-react-webpack
yo react-webpak 项目名称
或者是
npm install create-react-app
create-react-app myapp

路由

版本一直从2.0升级到4.0,改动特别大,学习成本较高,遇到的坑比较多
1、npm install bower -g
2、bower install react-router --save 生成bower_components
3、<Router></Router> 所有路由的存放容器,所有的子路由都放在该标签内部
4、<Link/> 路由的跳转,也就是来去页面,相当于a标签
5、<Route path="/" component={Home}/> 子路由,写在<Router></Router>里面,相当于路由导航器
6、<indexRoute/> 路由里默认显示的子路由,此路由没有path属性
7、<Redirect from="/user/page" to="/login"/> 路由重定向,重新指定跳转路由
路由三种跳转方式,通过H5新特性history API实现
1、hashHistory 哈希跳转/#/home/page
2、browserHistory 完全根据浏览器记录跳转 xxx.com/home/page
3、createMeoryHistory 主要用于服务器渲染(基本不使用)

 

react之入门的更多相关文章

  1. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  3. 【转载】React初学者入门须知

    http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know react.js入门学习 看了一遍,没什么特 ...

  4. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  5. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  6. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  7. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  8. React.js 入门与实战课程思维导图

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...

  9. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

  10. React Native入门-刘望舒

    React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...

随机推荐

  1. 洛谷—— P1051 谁拿了最多奖学金

    https://www.luogu.org/problem/show?pid=1051 题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖 ...

  2. 使用css绘制六边形

    用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: 接下来,就是代码了: CSS: ;;border-top: 30px solid #6c6;border-left:  ...

  3. 初学Java经典例子

    我自己看的书的理解学习Java就是学习对象,就像谈恋爱,你对她多付出,收货就多(跑题了对象是啥??对象就是实体,通过类可以生成具有特定状态(或者叫属性)和行为或动作的实例,问题来了怎么创建? new一 ...

  4. mysql 隔离级别与间隙锁等

    数据库隔离级 SQL标准中DB隔离级别有: read uncommitted:可以读到其它transaction 未提交数据 read committed:可以读到其它transaction 已提交数 ...

  5. logistics regression

    logistics regression用于解决一些二分类问题.比如(纯假设)网上购物时,网站会判断一个人退货的可能性有多大,如果该用户退货的可能性很大,那么网站就不会推荐改用户购买退费险.反之,如果 ...

  6. android 播放MP3

    <?xml version="1.0" encoding="utf-8"?> <!-- 定义当前布局的基本LinearLayout --> ...

  7. Android的activity的生命周期

    activity的生命周期有四个重要的状态:活动,暂停,停止,销毁 基本的方法有:onCreate.onStart.onResume.onPause.onStop.onDestory 最经常使用的方法 ...

  8. C/C++知识要点2——STL中Vector、Map、Set容器的实现原理

    1.Vector是顺序容器.是一个动态数组.支持随机存取.插入.删除.查找等操作,在内存中是一块连续的空间.在原有空间不够情况下自己主动分配空间.添加为原来的两倍.vector随机存取效率高,可是在v ...

  9. 使用squid架设自己的代理server

    主要參考了 http://blog.chinaunix.net/uid-20778906-id-540115.html Ubuntu下Squid代理server的安装与配置 1 安装 $ sudo a ...

  10. WPF窗口最大化

    做C/S应用程序的过程中,要实现的一个功能是可以编辑系统某一类表,这些表又含有不同的properties,properties数量也不相同,有二十来个的,也有一两个的,所以,popUp出来之后大小各异 ...