React- 初學安裝

React - 初學安裝

起因,只為了跟一個人做技能交換,想跟他學英文,教他做前端,

誰知道這個前端技術是React - Redux,

嚇到我了,一個非本科系,應外系的人,竟然想學前端技術,什麼技術背景都沒有,真的有辦法架網站嗎?

還真的能做出一個demo site。

⊙__⊙

我真的太老了嗎?我怎麼會覺得很難,不可思議

他給我一篇文章

https://redux.js.org/basics/example/

好,硬著頭皮看一下,自認為因為有十年功能加持,應該可以很快上手才對,

後來我還是得問,你用什麼架網,他說React、Redux,

我再問,是用node.js嗎?對,用npm裝react、redux,我說你用的是windows嗎?對。

那我只好先google 「windows install node.js react redux」

找到一篇文章

https://www.liquidweb.com/kb/install-react-js-windows/

照著上面打幾個指令,以前有裝過node.js,不過是舊版v.4.4.5

要能做react.js必須是8以上版本,

所以就到官網

https://nodejs.org/en/#download

把現在版本裝起來

我就變成了

v13.9.0

在cmd,命令提示視窗下打node -v就會知道了。

開始進入React的世界

先裝React及Redux,在命令提示視窗(cmd)下

建立自己的專案資料夾(React相關的專案,有點像workspace),到該資料夾下,開始打

npm install --save react

npm install --save react-dom

npm install -g create-react-app

-g 是裝域的意思,所以將create-react-app這模組或套件,裝到全域去,便可以在之後建立react app(把一個web site當作一個app來看)

開始要建立自己的react app (建立website的概念)

下指令,建立一個reactproject2的app

create-react-app reactproject2

建立完會有如下訊息

可以使用npm start,就可以像啟動一個網站一樣,像是開啟了apache,可以執行網址,瀏覽結果一樣

如果要打包,則可以npm run build ,就可以將所有js檔,打包成一個靜態檔(之前遇過要打包vue.js,沒想到是這個指令的意思,搞死我了,原來是這個原理,看來我真的沒學過前端)

為了測試,

請執行

cd reactproject2

npm start

會進行compiled 

結束後,會跟你說,可以使用什麼網址啟動測試

在網址使用

http://localhost:3000/

可以觀看結果為

怎麼跟我之前學過的React Native不太一樣呢?(五年時間的技術落差)

突然我不太推薦前後端分離,除非公司的工程師超多或想要專業分工,或就是要來阻檔偷看程式碼的人,讓他完全看不懂程式。

雖然組件可以重複利用,但學習的方式與概念跟過去工程師有點不太一樣,逐漸有知識落差。

曾經就是維護某公司的frontend與backend,搞到我前端技術不熟,花好長時間去build,

因為沒有說明這東西怎麼來的,導致瞎做,這真的要有「真.前端工程師」,才懂的知識。

亂接案子的結果,搞的我後端工程師,真搞不懂,這是什麼奇怪的技術,搞不懂他的原理是什麼?

這種知識沒人提點,還真搞不懂,現在稍懂。

但我覺得接案,不要玩到這麼大這麼累就是了。雖然他的好處就是,前端就專注於javascript與html、css。

後端就專注於PHP、Java、.NET技術,只開出API層。如同Android對API一般。

但如果要讓後端也做前端,就真的會搞死人。

而且如果沒專門的前端,套版將會比以往還要困難好幾倍,個人覺得,真的有必要嗎?為玩技術而技術,是否符合公司的人力資源及接案速度所需?

我只知道我會離開公司,就是專案已經夠多,還接了這種前後分離的維護案,工作量已夠大,又加大了困難度,

原外包給我們的公司,也是找不到相關人才,人力成本真的大增也負苛不了,除非有在培養以及相關經驗的技術指導。

不然就真的是瞎子摸象,搞不清楚,這是什麼法術一樣。