1. 建立目錄
2. 建立布局主框架並建立router.js
3. 新建login元件
4. 給登入頁面寫入路由
5. 執行吧 yarn start
第一次寫部落格,第一次寫教程,之前從來沒有搞過react,但是年紀越大危機感越大,三大框架都要學,學無止境啊,然而網上的教程超多不會的,自己寫一下自己的學習過程吧
我開始學習時看到這個博主,直接跟著學,對於什麼都不懂目錄也不知道該怎麼寫比較好的我,真是幫了大忙了,以下有些截圖我懶得自己去弄了直接搬了這個博主,另外對搭建過程中,我碰到的問題內容進行一些補充
這部分跟之前寫vue的時候結構差不多,我喜歡將資源檔案叫做assets,裡面包含img檔案,隨意吧,這個無所謂按照個人習慣來
安裝react-router-dom
yarn add react-router-dom
這裡我遇到了兩個學習點:
寫元件有兩種方式,函式元件與class元件,我這裡用的是class元件
函式元件看了點,還沒搞明白怎麼回事,有興趣的自己去了解,我先擱一下
資料夾routes下面建乙個router.js的檔案,在裡面新增
import react, from 'react';
import from 'react-router-dom';
import login from "../component/login/login";
class router extends component
}export default router;
然後修改index.js裡的內容
這個路由我是搞不懂怎麼回事,一開始去直接搜尋api發現怎麼都是大家自己整理出來的學習筆記,官方的都好難找,後來終於找到了發現…emmmmm反正我現在不想看 附上鏈結
我看了 這位大大的整理api
1.為什麼根節點是
學習原博
路由有history與hash兩種模式,那麼
與對應的就是這兩種
2.是什麼東西啊
有標籤,則其中的
在路徑相同的情況下,只匹配第乙個,這個可以避免重複匹配;
這個就相當於switch…case…這個函式,匹配到就不再進行匹配了
打個比方
直接這麼寫,那 『/guide』就匹配了兩個頁面了,顯示兩個頁面的內容…很顯然不是我們想要的
第一次寫,第一次學,如果有錯誤希望大家能夠指出謝謝~
react從零開始 五
1 在本地起服務的時候,官方腳手架預設的是埠是3000,這樣也就意味的如果3000埠被占用,就無法啟動另乙個專案,這時候只需要修改package.json檔案的中的 start set port 4000 react scripts start 增加了set port 埠號 像上面這樣就不會產生衝突...
從零開始學習react
react.createlement tag,content class shoppinglist extends react.component return 我們可以把兩者結合起來,使 react 的 state 成為 唯一資料來源 渲染表單的 react 元件還控制著使用者輸入過程中表單發生的...
從零開始學習React 屬性繫結(三)
前面兩節用的是hbuilder編輯器,很多童鞋說visual studio code很好用,確實如此,因為平時開發用習慣了前者,寫教程的時候,為了方便大家體驗,這一節換成vs了,開啟編輯器,首先匯入專案,然後在編輯器裡面選擇開啟終端選項,新建終端,輸入命令使用yarn start或者npm star...