react-router快速入門上手

2019-6-11    seo達人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

附Java/C/C++/機器學(xué)習(xí)/算法與數(shù)據(jù)結(jié)構(gòu)/前端/安卓/Python/程序員必讀書籍書單大全:

書單導(dǎo)航頁(點擊右側(cè) 極客俠棧 即可打開個人博客):極客俠棧
①【Java】學(xué)習(xí)之路吐血整理技術(shù)書從入門到進階最全50+本(珍藏版)
②【算法數(shù)據(jù)結(jié)構(gòu)+acm】從入門到進階吐血整理書單50+本(珍藏版)
③【數(shù)據(jù)庫】從入門到進階必讀18本技術(shù)書籍網(wǎng)盤吐血整理網(wǎng)盤(珍藏版)
④【W(wǎng)eb前端】從HTML到JS到AJAX到HTTP從框架到全棧幫你走更少彎路(珍藏版)   
⑤【python】書最全已整理好(從入門到進階)(珍藏版)
⑥【機器學(xué)習(xí)】+python整理技術(shù)書(從入門到進階已經(jīng)整理好)(珍藏版)
⑦【C語言】推薦書籍從入門到進階帶你走上大牛之路(珍藏版)
⑧【安卓】入門到進階推薦書籍整理pdf書單整理(珍藏版)
⑨【架構(gòu)師】之路史詩級必讀書單吐血整理四個維度系列80+本書(珍藏版)
⑩【C++】吐血整理推薦書單從入門到進階成神之路100+本(珍藏)
?【ios】IOS書單從入門到進階吐血整理(珍藏版)
--------------------------------------------------------------------------------------------------------------------

如果您已經(jīng)入門reactjs,請繞道~ 這篇博客只適合初學(xué)者,初學(xué)reactjs的時候,如果你不會webpack,相信很多人都會被官方的例子繞的暈頭轉(zhuǎn)向。 ES6的例子也會搞死一批入門者。之前一直用的gulp,突然換了webpack,我也非常不習(xí)慣。在這塊也卡住了,對于想學(xué)reactjs的朋友,我的學(xué)習(xí)建議是這樣的:

nodejs => webpack => ES6 => reactjs 

官方的很多例子都是ES6語法+webpack打包的,所以在學(xué)習(xí)reactjs之前,最好是會ES6和webpack,這樣能事半功倍!

1、首先來說說nodejs

先安裝版本的nodejs,npm一般都是自帶的。安裝成全局的比較方便構(gòu)建項目。

npm install -g grunt-cli # 全局安裝
npm可安裝的插件可以在這里去找找 www.npmjs.com/ 如果不能安裝,可以使用淘寶的鏡象資源

2、webpack 

webpack是一款打包工具,可以做一些js壓縮,sass,less轉(zhuǎn)換,圖片處理,js代碼合成,ES6轉(zhuǎn)ES5語法等很多功能,如果用過grunt,或者gulp的朋友,webpack也就不陌生了。都是需要寫配置文件。

3、ES6

github上很多案例都是用到了ES6的語法,所以,這里我們可以通過webpack的工具 babel ,把ES6的語法轉(zhuǎn)化為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工具將其轉(zhuǎn)化為 ES5的語法。我這里用了JSX(reactjs 提供的一種簡潔的語法)如果對JSX不了解的,可以去百度下。

4、快速開發(fā)

每次我們在修改JSX文件,或者SASS文件后,都要執(zhí)行webpack命令進行打包,這樣的開發(fā)效率很慢,官方提供了一個很牛X的工具,react-hot-loader + webpack-dev-server 可以幫助你快速開發(fā),自動刷新頁面。

5、DEMO小試牛刀

這里我把自己做的一個DEMO分享給大家,如果你已經(jīng)安裝了nodejs,并且npm也是全局的。下載后解壓,打開 start.bat,輸入 npm install 安裝所需的插件,安裝成功后執(zhí)行 npm start ,等項目跑起來后,在瀏覽器輸入 http://127.0.0.1:3000 就可以訪問項目了。

這里是一個 react-router 的一個例子。

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

藍藍設(shè)計m.820esy.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.820esy.cn

存檔