追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


react-router快速入门上手

2019-6-12 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

附Java/C/C++/机器学习/算法与数据结构/前端/安卓/Python/程序员必读书籍书单大全:

书单导航页(点击右侧 极客侠栈 即可打开个人博客):极客侠栈
①【Java】学习之路吐血整理技术书从入门到进阶最全50+本(珍藏版)
②【算法数据结构+acm】从入门到进阶吐血整理书单50+本(珍藏版)
③【数据库】从入门到进阶必读18本技术书籍网盘吐血整理网盘(珍藏版)
④【Web前端】从HTML到JS到AJAX到HTTP从框架到全栈帮你走更少弯路(珍藏版)   
⑤【python】书最全已整理好(从入门到进阶)(珍藏版)
⑥【机器学习】+python整理技术书(从入门到进阶已经整理好)(珍藏版)
⑦【C语言】推荐书籍从入门到进阶带你走上大牛之路(珍藏版)
⑧【安卓】入门到进阶推荐书籍整理pdf书单整理(珍藏版)
⑨【架构师】之路史诗级必读书单吐血整理四个维度系列80+本书(珍藏版)
⑩【C++】吐血整理推荐书单从入门到进阶成神之路100+本(珍藏)
⑪【ios】IOS书单从入门到进阶吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------

如果您已经入门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 '../css/common.scss';
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 的一个例子。

github 地址:https://github.com/mtsee/react-router-demo

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: react-router快速入门上手 « 通过动效助力业务拿结果 | 设计趋势:多图融合风格研究»


订阅Rss