React學習筆記1

2022-09-17 06:42:08 字數 2332 閱讀 4598

這個系列是我學習react過程的寫照,說白了就是自己對自己學習過程的總結,

不喜勿噴啊,當然了如果對你的學習有幫助,那是極好的!

語雀

以下的學習筆記就是針對這個教程講的,所以大家可以對照著看。

前端開發的演變,沒什麼好說的,就像是學歷史,搞不定就死記硬背咯;

遇到的問題及解決辦法如下:

1.安裝node.js就是執行乙個msi,安裝好了之後其實就包含了npm,也就是說你安裝好了node.js就代表安裝好了npm,

你可以通過下面的命令來檢驗是否安裝成功(開啟cmd輸入命令回車即可):

但是這時安裝好的npm不是最新版本的,如果想要最新版本可以用下面的命令進行更新:

npm install npm@latest -g          注:這裡順便說一下,如果不想安裝最新的,可以在@後面跟版本號,就能更新到你想要的任意版本,例如npm install [email protected] -g

2.在國內,你可以安裝cnpm獲得更快速、更安全的包管理體驗。使用如下命令安裝:

npm install -g cnpm --registry=
執行這一步的時候,我遇到問題了,顯示了一些err,表示沒安裝成功,解決辦法如下:a.可以關掉命令視窗,重新在c:\windows\system32目錄下找到cmd.exe,然後右鍵選擇管理員模式開啟,然後再重新執行上述命令。b.先執行npm config set registry ""再執行npm install -g cnpm

c.配置環境變數,在系統變數path下新增該路徑d:\program files\nodejs\node_global (這個路徑是你自己的nodejs下的node_global)

通過上面三種方法的任意一種,應該都可以解決cnpm安裝不成功的問題,安裝完成後在檢驗一下:

如果cnpm已經安裝成功了,那麼接下來安裝umi就是按部就班了,應該不會有什麼問題,安裝完成後的目錄如下:

當然,你可以把antd-course放在其他的盤裡,另外node_modules裡有很多檔案奧。

接下來教程進行到第乙個頁面:

執行完上述命令,helloworld.js已經建立好了,接下來我用notepad++來修改內容:

當然,你也可以直接用命令列(echo '檔案內容' >檔名稱

)的方式來修改helloworld.js的內容。

一頓操作之後,我來到了這一步,但無奈的是,我沒有出現hello world的字樣,開啟這個路徑,網頁什麼也沒顯示。

只能找問題,最後發現了兩個問題:

第一,怪我太傻,少建立了乙個資料夾config,也就是說config.js是要放在config資料夾中的;

第二,和瀏覽器有關係,我的ie怎麼弄也出不來,但是換了火狐瀏覽器,就能看見hello world了。

在這我還發現了乙個神奇的地方:

在page資料夾中,如果你存放多個js檔案,哪怕有乙個js檔案無法編譯,那麼所有的檔案都是無法執行的,

不信你可以在page下新建乙個test.js在裡面隨便敲幾行字,就會發現原來的hello world已經顯示不出來了;

但是如果你的hello world和test檔案都能編譯成功,那就能通過localhost:8000/後面跟檔名來執行任意的檔案。

React學習筆記 1

使用了webpack reactjs ant design 一開始嘗試使用了material ui,比較坑,沒有分頁,要自己拼裝。後來看react ui的日誌發現了正在開發中的ant design就決定先用這個吧。除了ui的css需要自己做調優,其他元件比較全。檔案package.json depe...

react 學習筆記(1)

基礎語法 1,jsx中巢狀表示式 2,命名使用駝峰法 3,有3種寫法 1.const element 2.const element react.createelement h1 hello world 3.const element reactdom.render element,document...

React學習筆記

專案需要使用react進行開發,故從vue與react的異同切入學習,記錄一下學習筆記 react整體的思路就是函式式,所以推崇純元件,資料不可變,單向資料流 單向繫結 當然需要雙向的地方也可以做到,比如結合redux form vue是響應式的思想,認為資料可變,通過watcher監聽每乙個屬性,...