react-router 路由 入门必看
如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者,初学reactjs的时候,如果你不会webpack,相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp,突然换了webpack,我也非常不习惯。在这块也卡住了,对于想学reactjs的朋友,我的学习建议是这样的:
nodejs => webpack => ES6 => reactjs
官方的很多例子都是ES6语法+webpack打包的,所以在学习reactjs之前,最好是会ES6和webpack,这样能事半功倍!
1、首先来说说nodejs
先安装最新版本的nodejs,npm一般都是自带的。安装成全局的比较方便构建项目。
npm install -g grunt-cli # 全局安装
npm可安装的插件可以在这里去找找 www.npmjs.com/ 如果不能安装,可以使用淘宝的镜象资源
2、webpack
webpack是一款打包工具,可以做一些js压缩,sass,less转换,图片处理,js代码合成,ES6转ES5语法等很多功能,如果用过grunt,或者gulp的朋友,webpack也就不陌生了。都是需要写配置文件。
3、ES6
github上很多案例都是用到了ES6的语法,所以,这里我们可以通过webpack的工具 babel ,把ES6的语法转化为ES5的语法,这样我们就可以使用github上面的demo了。
比如:
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link, IndexRoute } from 'react-router'
import { browserHistory } from 'react-router'
这里的import 就是ES6的语法,在webpack里面使用babel工具将其转化为 ES5的语法。我这里用了JSX(reactjs 提供的一种简洁的语法)如果对JSX不了解的,可以去百度下。
4、快速开发
每次我们在修改JSX文件,或者SASS文件后,都要执行webpack命令进行打包,这样的开发效率很慢,官方提供了一个很牛X的工具,react-hot-loader + webpack-dev-server 可以帮助你快速开发,自动刷新页面。
5、DEMO小试牛刀
这里我把自己做的一个DEMO分享给大家,如果你已经安装了nodejs,并且npm也是全局的。下载后解压,打开 start.bat,输入 npm install 安装所需的插件,安装成功后执行 npm start ,等项目跑起来后,在浏览器输入 http://127.0.0.1:3000 就可以访问项目了。
这里是一个 react-router 的一个例子。
QQ:739977464
最新文章
- 关于MariaDB5.5不是有效的Win32 应用程序
- URAL1132_Square Root
- VTK初学一,a_Vertex图形点的绘制
- guava--Joiner、Splitter、MapJoinner、MapSplitter
- 利用百度地图API,在浏览器中找到自己的位置
- Jquery 遍历数组之grep()方法介绍
- Hadoop Error:Name node is in safe mode的解决方法
- maven 构建web项目index.jsp报错
- oralce set
- MYSQL更改root password时遇到Access Denied的解决办法
- 2017-2018-1 20155205 实现mypwd
- Testlink1.7.5安装部署
- Cookie Session 与Token
- 迷宫-BFS
- [CSS] Useful CSS tool for Web designer and developer
- Leetcode 98
- python 无序表查找
- CPU中MMU的作用
- java按照字节切割字符串,解决汉字的问题
- MathType出现乱码公式怎么恢复