react之入门
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之入门的更多相关文章
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- 【转载】React初学者入门须知
http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know react.js入门学习 看了一遍,没什么特 ...
- React Native入门教程 3 -- Flex布局
上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...
- React Native入门教程2 -- 基本组件使用及样式
在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- React Native 入门基础知识总结
中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...
- React.js 入门与实战课程思维导图
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- React Native入门-刘望舒
React Native入门(一)环境搭建与Hello World React Native入门(二)Atom+Nuclide安装.配置与调试 React Native入门(三)组件的Props(属性 ...
随机推荐
- java基础之IO流(二)之字符流
java基础之IO流(二)之字符流 字符流,顾名思义,它是以字符为数据处理单元的流对象,那么字符流和字节流之间的关系又是如何呢? 字符流可以理解为是字节流+字符编码集额一种封装与抽象,专门设计用来读写 ...
- Unix操作系统LD_PRELOAD简介
http://blog.csdn.net/ieearth/article/details/49952047 Unix操作系统的动态链接库的知识中,这个功能主要就是用来有选择性的载入Unix操作系统不同 ...
- 【RESTful】1.理解REST和RESTful
简记:一套设计良好的RESTful可以帮助互联网产品支持[单个服务端+多个客户端]的场景!!!
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
Do you get lost when working with functions and the new keyword? Prototypal inheritance can be compl ...
- CSS3中transition-duration參数对hover前后两种过渡时间的影响
transition-duration这个參数是设置过渡时间的,将transition-duration放在哪个类中.那么在这个类被启用时就会依照transition-duration设定的时间来过渡 ...
- C#语言循环语句for嵌套
- ORA-07445 第一參数为:kkqljpmpr
在版本号11.2.0.1.0上,在pl/sql developer中运行一条SQL会导致连接中断,这样的错误要到trace文件夹下找到错误日志文件,再定位.查了一下资料,是这个版本号的bug. D ...
- Firefox OS开发指南
在海外社区Leanpub上线了<Firefox OS App开发>高速指南,指引开发人员尝试新技术. 这款<Firefox OS App开发>高速指南现已开放下载.HTML5开 ...
- Android 上的 制表符(tab) —— 一个奇妙的字符 (cocos2dx crash)
今天測试发现了游戏的一个问题,系统邮件,假设发了tab,在android上一打开邮件内容就会crash.并且他们非常确定是tab的问题. 凭我多个月的经验(确实没多年. . .)来看.从来没听说在an ...
- Phoenix(SQL On HBase)安装和使用报告
一.为什么使用Phoenix二.安装Phoenix2.1 兼容问题?2.2 编译CDH版本的Phoenix2.3 安装Phoenix到CDH环境中三.Phoenix的使用3.1 phoenix的4种调 ...