作reacat小項目的過程（我感受適合那種剛剛接觸react感受很深奧的親們，經過這個能夠創建一個很垃圾的項目，入門吧，往深處就須要本身再看了），這個是組件寫的繼承component，若是用hook那

時間 2020-06-21

標籤 reacat 小項目的過程感受適合那種剛剛接觸 react 深奧親們經過這個能夠創建一個垃圾項目入門深處須要本身再看組件寫的繼承 component 若是 hook 欄目 React 简体版

原文原文鏈接

需求：作一個react框架的前端框架（包括路由，請求後端等），大概就是作一個左邊導航右邊顯示組件頁面的東西，ui爲material-uiphp

環境:css

軟件：vscodehtml

包含的知識點:使用路由來導航，使用axios來進行先後臺的交互。前端

前端環境: node（懶用msi安裝包,不懶就用zip安裝包，性能上什麼區別我也不知道）java

步驟1：搭建項目框架startnode

一、使用create-react-app來搭建小框架(這時候遇到第一個問題，可能在公司中會遇到這種問題，即上篇文章https://www.cnblogs.com/heibo/p/12012357.html)react

在你的npm可以使用以後ios

在vscode中操做，打開控制檯，選定一個文件夾打開es6

a、輸入命令npm install -g create-react-app下載腳手架的依賴npm

b、利用腳手架命令生成一個基本的react框架 npx create-react-app my-app（項目名稱）

　搭建項目框架end

步驟2：寫頁面start

二、寫頁面，也就是寫組件

a、能夠在src（寫代碼的主要的地方）下面新建文件夾page(我的習慣，能夠新建其餘名稱的文件夾，或者根據本身喜愛建立其餘文件目錄)

　　注意：能夠適當分頁面，大的頁面能夠分紅多個小的頁面（即小組件），也能夠不分，這個看我的習慣

　　大概寫react組件的格式很簡單（目前看來）步驟以下

　　一、搭建一個react組件的template

　　　　由於本身沒有用快捷鍵，因此我就把其餘人的頁面直接搬過來了，我通常直接複製粘貼第一個頁面的模板，而後修改內容，或者是直接敲。因此就不扯這個快捷鍵的事情了。隨便找了個設置快捷鍵和使用的連接https://blog.csdn.net/hbiao68/article/details/101113155, 感受這種都差很少，沒啥區別。而後直接生成的模板大約就是這樣的（感受跟java的哪些東西很像了），類比java的類

　　　　import React from 'react'; //引入react的包,跟java同樣，由於須要用到這裏面的api嘛

　　　　export default class 類的名稱 extends React.Component{ //繼承component類，由於繼承他你這個纔是個組件，纔能有組件應有的功能

　　　　　　//接下來是構造方法，這個跟java中的構造方法差很少，就是父組件調用子組件的時候能夠傳遞參數,而後根據參數來生成相對應的頁面

　　　　　　//若是說不須要父組件傳遞參數，那麼這個能夠省略。

　　　　　　constructor(props){

　　　　　　super(props);

　　　　　　this.state={

　　　　　　　　　a:"我是黑子"

　　　　　　}//這個構造方法和java不一樣的是，他既要拿到外界給的參數還須要初始化本身的屬性（對比java的屬性，官方好像叫作狀態），若是都沒有那就不用寫了

　　　　　　}

　　　　　　//接下來就該建立頁面了，其實感受也挺簡單的，其實當你會寫普通的html，css,那麼這個就會寫了　

　　　　　　render(){

　　　　　　　　return({

　　　　　　　　　　//這個裏面就是你的html文件中body裏面的部分，直接把你平時寫的html中的東西扔進去就好了

　　　　　　　　　　須要注意的點：

　　　　　　　　　　　　　　一、咱們的class不能寫class,要寫成className,爲了規範化，不要再標籤中寫style,另外寫一個文件引入就好了，在開頭寫上　　　　　　　　　　　　　　　　　　　　require("css文件的路徑");如require("./nav.css")(由於我習慣於把組件和css文件放到一個文件夾下面，因此直接./css名稱就好了)

　　　　　　　　　　　　　　　css就把咱們平時寫的css扔進去就行，和平時同樣。

　　　　　　　　　　　　　　二、引入圖片不要直接src="路徑"，應該寫成src={require("圖片路徑")}，不然咱們的react是不認的，好像這種靜態文件都要這麼引入　　　　　　　　　　　　　　　　吧，css不也是這麼引入的嘛。我也不知道爲啥，多是什麼es6仍是什麼其餘的什麼東西的標準吧。

　　　　　　　　　　　　　　　以上是靜態頁面的書寫組件的方式

　　　　　　　　　　　　　　　若是說加入了數據的話，須要在須要數據的地方加{裏面是變量}，這種看起來有點像java中的jsp了，靜態頁面直接寫，數據的地方用　　　　　　　　　　　　　　　表達式，只不過這種是前端拿到數據本身渲染，jsp是後端去渲染，而後傳到前端。若是說須要用循環遍歷數據渲染頁面的話，用數　　　　　　　　　　　　　　　組的map,將這種代碼放到{}中，好像就是說當涉及到邏輯不是那種靜態頁面的話，都要用{}包裹住，去寫邏輯，好比你須要循環渲染　　　　　　　　　　　　　　　一個ul列表，你能夠這樣寫，

　　　　　　　　　　　　　　　render(){

　　　　　　　　　　　　　　　　return(

　　　　　　　　　　　　　　　　　　　　<ul>

　　　　　　　　　　　　　　　　　　　　{

　　　　　　　　　　　　　　　　　　　　foodList.map(function(item,index)){//知道es6的都應該會寫這個

　　　　　　　　　　　　·　　　　　　　　return(<li><a href={item.url}></a>{item.name}</li>)　　　//嗯，這個須要渲染的變量是表達式，要寫在{}裏面

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　}//注意這裏，是須要重複渲染的控件才須要寫在這裏面歐，其餘的放外邊就行

　　　　　　　　　　　　　　　　　　　　</ul>

　　　　　　　　　　　　　　　　　　　　//總之，你外邊的+{}裏面拼出來的是你想要的頁面就行，若是多層循環，直接在須要重複渲染的位置寫一個就行，這個是　　　　　　　　　　　　　　　　　　　　//能夠嵌套的。map裏面return的就是重複渲染的控件，加上{包裹的數據}

　　　　　　　　　　　　　　　　　　　　還有就是，若是你的數據須要處理能夠在render函數裏面，return以前處理就能夠。這個沒有問題。

　　　　　　　　　　　　　　　　　　)

　　　　　　　　　　　　　　　　}

　　　　　　　　)

　　　　　　　　}

　　　　這時候若是咱們的大頁面須要融合小頁面的話，，總共要兩步。一、把頁面導入進來，import 子組件 from '子組件的路徑'。二、在父頁面的須要添加子頁面的　　　　地方進行添加。如

　　　　import Head from '../Head'

　　　　<Head /> 好像是在哪裏看到的，咱們的子組件第一個字母要大寫，好像是爲了區分html標籤什麼的，反正大寫就沒問題了。

　　　　而後咱們的render部分就寫到這裏，由於是初次接觸懂得的可能頗有限。

　　　　這個東西給個人感受就是他把那個小組件的render直接給塞到你寫的位置了，爲了顯示正常，最好在外面套上一個div，這樣的話就能防止小組件亂跑了。

　　寫頁面end

步驟三、獲取數據start

三、獲取數據

　　2步驟只能作一堆靜態的頁面，由於你尚未可以獲取到外界的數據，這時候咱們經過axios去獲取接口中的數據

　　　　一、導入axios的依賴，使用npm工具，npm install axios

　　　　二、引入axios import 'axios' from axios(就跟java同樣，你須要人家裏面的方法/api，你就須要引入進來)

　　　　你能夠在適當的時候使用axios調用接口得到數據，如點擊事件中等等，若是說第一次render須要axios獲取的數據，咱們能夠在適當的生命週期中調用，以保證　　　　在執行render時能夠拿到新鮮的數據，我寫在了componentWillMount中，可是這個生命週期好像不建議使用了，也能夠寫在咱們的構造方法中。寫法以下

　　　　axios.get('./data.json')
　　　　 .then(function (response) {
　　　　　　let data = response.data
　　　　　　 // console.info("個人數據是");
　　　　　　 that.setState({ navList: eval(data) });
　　　　 })
　　　　.catch(function (error) {
　　　　　　 console.log(error);
　　　　 });//簡單的一批，直接把你的請求地址替換，把請求到的數據放在state裏面就能夠了。若是是post請求那你就去找api（用api這個東西仍是很簡單的，網上應該　　　　隨手可以查到
）//查到咱們的數據以後直接按照render中如何把數據放到頁面中的方式弄進去，這個動態頁面就有了

可是當你運行完以後，會發現你的請求數據會被瀏覽器攔截，這是瀏覽器的同源策略，就是說（不是同一ip，同一端口的信息之間是不可以通訊的），這時候咱們就須要解決跨域問題解決跨域問題的方法：

　　　　安裝依賴：http-proxy-middleware

　　　　建立一個Js文件來配置跨域：如src/setupProxy.js

　　　　引入這個依賴：const proxy = require("http-proxy-middleware");

　　　　而後寫上這個：

　　module.exports = function(app) { 　　 app.use( 　　 proxy("/base/**", {//配置axios訪問路徑 　　 target: "http://45.32.15.21:8090/",//真正訪問host,當訪問的時候會拼接上這個組成真正的請求地址 　　 changeOrigin: true 　　 }) 　　 ); 　　};
　　詳細請見某位大神的博客：（http://www.javashuo.com/article/p-rvvkyxuf-kq.html）,跨域問題，我就是大概複製過來的

　　獲取數據end

步驟四、添加路由start

四、添加路由。

　直到第三步，咱們只是寫出了一大堆動態頁面，可是他們並無什麼聯繫，因此咱們須要添加路由來把這些頁面關聯起來。

　這個有兩種，一種是頁面內路由，一種是頁面間跳轉路由。解釋一下：

　假若有兩個大的頁面，即登陸頁面和主頁面，可是主頁面是那種左邊導航欄，右邊是內容的那種。

　那麼登陸頁面跳轉到主頁面就稱爲頁面間跳轉路由（感受就是一級路由），主頁面內容切換就是頁面內路由（就是二級路由或者多級路由）

　以上應該是react-router 4以前的作法，就是將這種路由放在一個路由文件中，經過嵌套的方式來肯定咱們的一級路由或者n級路由，這樣造成一個目錄的形式

　可是在react-router 4開始咱們就不分這種一級路由和多級路由了，react-router 4建議咱們將路由寫入頁面中，他的大概思想是，你的頁面應該顯示在哪裏，那麼你的

　路由就應該寫在哪裏（這裏包括一級路由和多級路由），當你剛剛接觸這個思想的時候，可能有點彆扭，可是當你理解這個東西的時候，這個路由會很好寫。這時候　首先去掉你的router.js文件。

　其實主要的思想差很少就是：在可能須要渲染不一樣頁面的地方，寫router,來讓react根據地址欄判斷應該渲染那個組件，你能夠想成if判斷，在不須要改變的地方，就直接寫頁面。哇，這麼解釋是真滴抽象，舉個例子：

　登陸頁和主頁面

　在你剛剛輸入什麼http://localhost:3000的時候，react把<root></root>根組件渲染出來了（能夠把<root>當作根路徑），可是你但願根據地址來讓react選擇在root div中渲染什麼組件（感受react路由的工做方式就是在適當的地方更換組件），若是這時候你在root中加上一個一堆route，這時候react就會去進行if判斷，先看瀏覽器地址欄，react一看："奧，是http://localhost:3000/main ,那我就去看看哪一個是匹配的把"，而後他發現root的route中正好有一個/main匹配了一個組件（"http://localhost:3000"+"/main"=http://localhost:3000/main），react說："我擦，怎麼能這麼匹配，那麼就在root裏面渲染這個組件吧"，這時候就把這個組件渲染到了<root>div裏面(須要知道的是，route在哪裏定義，渲染到哪裏,而後再根據你的路由地址，去匹配渲染哪個組件)，貼個代碼：

這段代碼是被掛載到root div下的，從腳手架這句話能夠看出

當react渲染完root後，看到這下面有須要渲染的組件（div（不必定是div）下有route定義，那就有須要渲染的組件），那就先看瀏覽器導航欄地址，而後根據route定義來決定root下面應該渲染哪一個組件，你能夠將那兩個route當作 java中的if 轉換成java代碼就是

String NavLink=瀏覽器地址欄地址字符串

String parentLink=訪問把router包裹起來的那一層的地址字符串 //這一個是錯的，不要看這個，看下面的那個，我覺得react-router4的路由 path，只須要寫本層的，沒想到是要寫除了localhost:3000以外全部的

String parentLink=http://localhost:3000 //這個是對的，原來沒有測試，後來發現跳轉不正常

List<Route> Routes =那一堆Route定義

for(int i=0;i<Routes.size();i++){

String routeLink=Routes.get(i).path;

if(NavLink.equals(parentLink+routeLink)){

在包裹層的下面渲染Routes.get(i)

break;

}else{

continue;

}

就是這樣的，反正就這麼個意思吧，看不懂也沒治了。

還有就是，只定義這個不行，須要有一個觸發這個跳轉的東西。目前發現有兩種

一、react-router自帶的LInk標籤，在to屬性中加入，對應路由的地址，也就是Route中的path屬性

二、經過點擊事件。調用這個方法：this.props.history.push('Route中的path'),也許link標籤的點擊事件就是這東西吧

 
  this 
  . 
  props 
  . 
  history 
  . 
  push 
  ( 
  '/app' 
  ) 
 

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。