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(属性 ...
随机推荐
- raspi串口、python串口模块pyserial
一.安装 1.下载软件包pyserial-2.7.tar.gz 网址:https://pypi.python.org/pypi/pyserial 2.8uftp上传至/usr/local/src/ ...
- MongoDB学习day10--Mongoose的populate实现关联查询
一.Mongoose populate官方文档 https://mongoosejs.com/docs/populate.html 二.Mongoose populate关联查询 1.定义ref va ...
- 将文件从已Root Android手机中copy出来的几个cmd窗口命令
将文件从已Root Android手机中copy出来的几个cmd窗口命令: 以shell身份登录adbadb shell进入adb后切换至root用户su更改文件的所属chown shell *更改文 ...
- mysql 5.7版本目录无data文件夹的解决办法
安装mysql 5.7+版本时,若发现因根目录下,缺少data文件夹的情况, ***请不要去拷贝其他版本的data文件夹!*** 因为此操作会出现很多潜在问题:比如我遇到的执行show variabl ...
- 【mac】mac上安装JDK
安装步骤就是在Oracle官网下载你想要的JDK版本下载,下载的时候同意协议即可 这里就给出jdk安装的位置 还有一点要注意的是,在指定JVM的位置的时候,需要指定到home目录下
- CAS 跨域原理
http://www.blogjava.net/rain1102/articles/227739.html CAS(Central Authentication Service) 是 Yale 大学发 ...
- BroadcastReceiver详解(一)
今天我们来讲一下Android中BroadcastReceiver的相关知识. BroadcastReceiver也就是“广播接收者”的意思,顾名思义,它就是用来接收来自系统和应用中的广播. 在And ...
- BUPT复试专题—图像识别(2014-2)
题目描述 在图像识别中,我们经常需要分析特定图像中的一些特征,而其中很重要的一点就是识别出图像的多个区域.在这个问题中,我们将给定一幅N xM的图像,其中毎个1 x 1的点都用一个[0, 255]的值 ...
- Invocation of destroy method failed on bean with name ‘XXXX’
项目启动报错问题:Invocation of destroy method failed on bean with name 'scopedTarget.eurekaClient': org.spri ...
- Spring -- Bean自己主动装配&Bean之间关系&Bean的作用域
对于学习spring有帮助的站点:http://jinnianshilongnian.iteye.com/blog/1482071 Bean的自己主动装配 Spring IOC 容器能够自己主动装配 ...