reactnpm、git工作環境

實習已經一個月了,從一個對於前端的瞭解限於html、css、js,jquery,而且只是瞭解,就看過一本html+css+js基礎教程書的程度,有幸獲得實習的機會,到現在實習已經一個月,總結一下質的變化、收穫吧。
實習的話,除了第一天來打,搭git、npm、項目環境,之後就開始接觸一些簡單的需求。
首先我們組的項目是基於react、go提供接口。
開始搭git環境,我對git的瞭解僅限於:github很受認可,搜一些報錯或者問題會有git上有答案。簡單來說就是,不知道是啥,沒用過。然後一無所知也不能怯場啊,大家都有自己手頭的工作,帶我的,暫且稱爲老師吧,給了部門的新人指導wiki,然後開始照着文檔操作,當然後來發現這是一個標準流程,不僅僅是我們公司,大家都是這樣用git的,所以教程網上也一搜一地,就不贅述了,主要就是有個配置密鑰的步驟。
然後就是react,我對於react,真的只知道有這個前端框架。然後就是學唄,老師一面面過我,對於我什麼水平清清楚楚,所以就給了我一天時間,在網上找找文檔(好奇我怎麼拿到實習offer嗎,對,就是這麼菜,一點基礎沒有,但是拿到實習機會了。我覺得是因爲我大三吧,而且表態大三下學期整個學期都實習,學校本來也比較好,所以可能比較寬容,面試問很多網絡基礎,是我的專業基礎,所以我答得也很好,所以可能覺得我還是有很好空間的)。回到正題,一天過了react,其實,這也是我很慶幸能實習的一點,如果我是在學校上課,靠着實驗、上機、作業、上課之後,擠出來的一點點時間來學前端,我看一遍react文檔可能要一個學期,然後毫無實戰經驗,看的東西怎麼用也還是不會。實習的話,只有兩個要求:1、別來到北京就覺得不到處逛可惜了,好好學習,好好努力;2、不要怕丟人,我確實比不上其他所有人,甚至差得有點離譜,一點基礎都沒有,估計大家會經常質疑我是怎麼被招進來的,不怕!我才大三,我只是大三的實習生,我什麼都不怕,我總是還有很多的可能!
然後就是redux,也是一個下午,或者一天看下官方文檔。接下來就是最棒的部分,我看react、redux有項目可以參考!這是自學非常需要,但是沒有的killing part。我對着項目,看着項目的目錄結構,一點點去套,去理解,第一遍過文檔的時候,很暈的state,setState,組件,action,container,開始遍得有一點點影子。老師給了我一個很簡單的需求,並且告訴我不急着上線,我可以慢慢做,遇到不懂的隨時問,可以把需求停下,花時間去弄,完全不給我壓力,而且給的需求是跟一個完成開發的需求很類似,告訴我可以參考。我就這樣一點點套,一點點copy,修改。
到現在,我對整個項目的結構,已經有了很基本的、也相對清晰的認識,對於react、redux也不再一頭霧水,ES6,對!還有ES6,我ES6也什麼都不會的,買了一本《深入淺出ES6》,一個寒假纔看了幾頁,上班之後,項目根本不寫html,css文檔,全是js,而且一點原生js影子都沒有,都是很高端的結構,我於是每天早上,公司沒有硬性規定的上班時間,同事們一般是10點半左右來,我就8點到,然後一天一章的過《深入淺出ES6》,雖然看的時候確實,一知半解,但是,我有項目啊,項目中ES6語法的活用遍地是,到現在,一個月了,我對很多原來覺得高深的語法,簡直信手拈來,什麼解構,arrow function,async await,const let,深拷貝淺拷貝……state,props,import這些繞來繞去,傳來傳去的東西也拿來就是敲,什麼constants,什麼component,什麼containers……雖然現在還是fe菜雞,但是跟之前已經是很大的不同了,每天都很大收穫,看到了fe寬廣的天地,對前端開發有了很現實的理解。我說我之前以爲前端就是寫html、css有人信嗎?我之前還問面試官你們沒頁面要寫的時候,上班做什麼啊?現在想想,真是有點好笑的問題。Anyway,真的覺得學到很多。
還有就是工具的應用吧。首先是程序員標配的mac,vim編輯器(我之前一直頑固的使用gedit、甚至給sublime配了subl命令),vim顯然還是很有用的,基本所有系統命令行都可以直接vi,這太方便了。iterm2,homebrew,zsh插件、autojump插件,對了,我之前甚至不知道tab自動補全文件名,vs code 代替了sublime,認識了better align,ESlint插件,知道了代碼規範
接下來就是一些比較細的東西
首先是在項目中使用一個工具的時候,比如解析csv文件的papaparse ,直接npm install --save papaparse,就可以相當於<script …papaparse.min.js…>,將這個工具依賴,自動配到項目的package.json中,代碼中就可以直接用了。
然後是開發的時候,在瀏覽器測試效果的時候,需要啓動服務器,在命令行git clone url,將go工程的代碼拉下來,./build.sh進行編譯,make dev開啓服務,然後就可以通過localhost:端口號,進行訪問,調試。如果代碼有更新,就git pull,再build。
前端react則是將代碼拉下來,這裏需要一個環境的配置,就是編輯**~/.bash_profile**文件,將拉下來的go代碼的路徑配置問GOPATH常量,

export $GOPARTH = 文件路徑
source /etc/profile

然後source ~/.bash_profile時配置生效,否則在執行npm run dev,通過webpack監聽工程文件編輯時,會報錯。所以,也很清晰了,切入到react工程文件夾路徑下,npm run dev,即可進行開發,並且實時調試。
所以也說到了調試,調試的話,console.log是一個不錯的辦法,但是由於會有很多action信息,所以看起來也有時候會很不舒服,這時就應該想起來network,直接觀察數據包,檢查請求響應,查找問題,一個細節就是,要注意勾選disable cache,實時調試,可不能用緩存:
在這裏插入圖片描述
然後就是git,git的命令

git pull
git push -f
git commit -m ’...‘
gco branchname
gcm  切換到master分支
git rebase -i ...id...
......

加油加油~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章