React從零開始,小白式建立商城 一

2021-09-25 04:38:48 字數 1696 閱讀 4798

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...