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(属性 ...
随机推荐
- UVA 111
又被题意坑了... 输入的一串数字的含义是第i个数字是第a[i]个发生的.而不是编号为i的历史事件的实际发生顺序.所以第一步要做的是转换,将原始数据转换成编号为i的历史事件的实际发生顺序.然后按照实际 ...
- linux 文件属性、权限、所有人、所属组
Linux命令行模式下,文件还是需要通过ls -l来查看 可以通过ll查看长文件,会有如下类型显示drwxr-xr-x 2 root root 4096 Nov 10 2010 conf 总共有7 ...
- Javascript:如何调用全局变量?
怎样使用全局变量呢? window.globalVariableName 参考: https://blog.csdn.net/zyz511919766/article/details/7276089
- XP操作系统设置:[82]关机快捷键
磨镰刀不少割麦,掌握了快速关机的多种方法,在尴尬的时候说不定还真能派上用场呢. 工具/原料 手提电脑.台式电脑.Windows 操作系统. 方法一: 1 Windows XP 操作系统中有 ...
- Codeforces Round #266 (Div. 2) C. Number of Ways
You've got array a[1], a[2], ..., a[n], consisting of n integers. Count the number of ways to split ...
- BUPT复试专题—C翻转(2010)
https://www.nowcoder.com/practice/74bdb725421c4f80b4aca7266818baf0?tpId=67&tqId=29639&rp=0&a ...
- shell 检查文件夹所属用户组
shell 检查文件夹所属用户组 #!/bin/bash # 检查文件夹 权限是否777 检查文件夹所属组是否www # authro ranmufei # 2017 08 21 云板容器版 /dat ...
- openERP邮件(发信、收信)
openERP里的邮件处理主要有个2个模块处理 mail -核心 fetchmail -接收邮件 Alias domain和alias name 配置domain alias. Set ...
- hdu 2795(单点改动)
题意:有h×w大的公告板.有n条公告要写入,每条公告高度都是1,宽度是wi,每次从最上最左的空位写,假设有空位输出第几行.假设没有足够空位输出-1. 题解:注意h最大1e9.但事实上是看n的大小.由于 ...
- SAE云平台的使用
参考文章:http://www.cnblogs.com/luyangsblog/p/3956135.html Web开发从零单排之一:在新浪云平台SAE上开发一个htm ...