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. UVA 111

    又被题意坑了... 输入的一串数字的含义是第i个数字是第a[i]个发生的.而不是编号为i的历史事件的实际发生顺序.所以第一步要做的是转换,将原始数据转换成编号为i的历史事件的实际发生顺序.然后按照实际 ...

  2. linux 文件属性、权限、所有人、所属组

    Linux命令行模式下,文件还是需要通过ls -l来查看 可以通过ll查看长文件,会有如下类型显示drwxr-xr-x  2 root root 4096 Nov 10  2010 conf 总共有7 ...

  3. Javascript:如何调用全局变量?

    怎样使用全局变量呢? window.globalVariableName 参考: https://blog.csdn.net/zyz511919766/article/details/7276089

  4. XP操作系统设置:[82]关机快捷键

    磨镰刀不少割麦,掌握了快速关机的多种方法,在尴尬的时候说不定还真能派上用场呢.   工具/原料   手提电脑.台式电脑.Windows 操作系统. 方法一:   1 Windows XP 操作系统中有 ...

  5. 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 ...

  6. BUPT复试专题—C翻转(2010)

    https://www.nowcoder.com/practice/74bdb725421c4f80b4aca7266818baf0?tpId=67&tqId=29639&rp=0&a ...

  7. shell 检查文件夹所属用户组

    shell 检查文件夹所属用户组 #!/bin/bash # 检查文件夹 权限是否777 检查文件夹所属组是否www # authro ranmufei # 2017 08 21 云板容器版 /dat ...

  8. openERP邮件(发信、收信)

    openERP里的邮件处理主要有个2个模块处理 mail -核心 fetchmail -接收邮件     Alias domain和alias name     配置domain alias. Set ...

  9. hdu 2795(单点改动)

    题意:有h×w大的公告板.有n条公告要写入,每条公告高度都是1,宽度是wi,每次从最上最左的空位写,假设有空位输出第几行.假设没有足够空位输出-1. 题解:注意h最大1e9.但事实上是看n的大小.由于 ...

  10. SAE云平台的使用

    参考文章:http://www.cnblogs.com/luyangsblog/p/3956135.html                 Web开发从零单排之一:在新浪云平台SAE上开发一个htm ...