React學習(1)-create-react-app

itclanCoder發表於2019-06-23
ReactAPP

前言

如今,對於現今前端熱門的三大框架Vue,Angular,React,對於web開發者來說,早已不是什麼陌生的詞

儘管三者實現業務最終的目的都能達成一致,但是各有特色,其中任何一框架,個人覺得,都博大精深,可圈可點,要學習的內容有很多,我也僅僅是淺嘗輒止而已.

有時候,因為工作專案的需要,自己在切換各個技術棧的時候,只要一段時間沒有用,就有些陌生,說到底不得不承認自己功力不夠

本文並不是什麼教程,只是作為自己學習過程中的一些總結和思考,一起學習,共同成長~

React學習-create-react-app內有視訊

React是什麼?

用於構建使用者介面的javascript庫,MVC架構中的V層

  • 宣告式開發(想要實現什麼目的,應該做什麼,但是不指定具體怎麼做,如下程式碼所示)

面向資料程式設計,只要把資料構建好了就可以了的,react會自動的幫你去構建網站,把資料可以理解為圖紙,圖紙做好了之後,react會自動的結合這張圖紙幫助你去構建這個大廈,去構建整個頁面的DOM,資料是什麼,頁面就顯示什麼,這種宣告式的開發幫助我們節約掉大量的DOM操作程式碼,這是react程式設計帶來的一個優勢)

/**
*
* 需求:編寫一個函式，處理傳入包含大寫字串的陣列，返回包含相同小寫字串的陣列
* 宣告式程式設計實現toLowerCase
* 輸入陣列的元素傳遞給map函式，然後返回包含小寫值的新陣列
*/

let toLowerCase = arr => arr.map(function(item) {
return item.toLowerCase();
})

let aToCasesA = ['SUIBICHUANJI','ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
let aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]
複製程式碼
  • 指令式程式設計(類似jQuery操作DOM,建立一個頁面,一點點的告訴DOM怎麼去掛載,你要怎麼去做,JQ,原生也好都是指令式程式設計，都是在做DOM操作)
/*
* 指令式程式設計:按照順序一步一步的實現
* 首先，建立一個空陣列用於儲存結果，然後遍歷輸入陣列的所有元素，
將每項元素的小寫值存入空陣列中，然後返回結果陣列
*/


var aToCasesA = ['SUIBICHUANJI', 'ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
function toLowerCase(arr) {
var res = [];
for(var i = 0; i < arr.length; i++) {
res.push(arr[i].toLowerCase());
} 
return res;
}
var aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]
複製程式碼

  • 函數語言程式設計:寫的都是一些函式，帶來了幾個好處,維護起來比較容易,當一個函式比較大的時候,可以進行拆分，每一個函式各司其職,便於前端自動化測試((陣列中的一些map,reduce,find等方法的應用就是函數語言程式設計))

  • 檢視層框架(在大型專案中,光用react是不行的,還得配合一些資料層的框架幫助我們解決一些元件之間的父子元件傳值的問題,react把自己定義成一個檢視層的框架,並不是什麼問題都能解決,只幫助你解決資料和頁面渲染的問題，至於元件之間怎麼傳值，交給其他元件來做.

在小型專案中,可以藉助react中的父子元件傳值就可以,但是在大型專案裡,單單來使用react是不夠的,比如說:flux，redux,mobox這樣的資料層框架),react並不是一個完整的框架,所以它學習的成本相對高些的.

React能做什麼?

  • 寫web應用(網站,pc端,移動端等,例如:知乎,簡書等)
  • 桌面客戶端應用軟體(類似vscode或者一些報表軟體攜帶視窗的應用)
  • webApp--react native,混合開發應用
  • 伺服器端應用(java,php等後端語言能幹的事情,react也能幹)

只有你想不到的應用,沒有實現不了的技術...

初始化一個React專案

前置條件

  • 命令列壞境(windows中DOS CMD壞境或者git工具),蘋果Mac電腦可用自帶的Terminal,對於Linux使用者,命令列工作壞境不必贅述,這裡以Windows開發壞境為例
  • 下載安裝NodeJS(React本身並不依賴Node.js但是專案中所需要的依賴包/工具,需要Node.js的支援),本地安完Node,預設也就安裝了npm包管理工具

cmd或者git命令列下，檢測Node與npm是否安裝成功,如果npm下載包很慢,也可以使用國內淘寶的cnpm

D:\公開課\2019>node -v
v10.13.0
D:\公開課\2019>npm -v
6.4.1
複製程式碼

當然,你也可以安裝cnpm,使用國內的地止,下載依賴包會快一些的

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
複製程式碼

安裝完cnpm後與npm使用並沒有什麼區別

  • chrome瀏覽器(應用商店裡下載React Developer Tools除錯工具)

create-react-app腳手架工具

create-react-app(建立react應用),它是一個通過npm釋出的安裝包,也是一個命令,在安裝好nodejs後,在命令終端下執行npm或者cnpm命令,全域性安裝create-react-app這個腳手架工具

D:\公開課\2019 npm install --global create-react-app
或者
D:\公開課\2019 cnpm install -g create-react-app
其中-g是--global的縮寫
複製程式碼

在安裝好create-react-app腳手架工具後執行create-react-app命令,這個命令會在當前目錄下建立指定的引數名的應用目錄,建立react專案應用有三種方式 方式一:create-react-app 應用名稱(推薦使用這種方式)

D:\公開課\2019  create-react-app myfirstreactapp
D:\公開課\2019  cd myfirstreactapp
D:\公開課\2019  npm start
複製程式碼

方式二:npm init react-app my-first-react-app

D:\公開課\2019 npm init react-app myfirstreactapp
D:\公開課\2019 cd myfirstreactapp
D:\公開課\2019 npm start
複製程式碼

方式三:使用yarn,yarn create react-app my-react-app

D:\公開課\2019 yarn create react-app myfirstreactapp
D:\公開課\2019 cd myfirstreactapp
D:\公開課\2019 npm start
複製程式碼

方式四:npx create-react-app 應用名稱,與方式一是等價的,當你執行npx create-react-app my-app時，它會自動安裝最新版本的Create React App,如果你之前全域性安裝過create-react-app,請全域性解除安裝

npx create-react-app myfirstreactapp
複製程式碼

注意事項

  • 應用名稱不能包含大寫字母(不能駝峰式,只能是小寫字母
D:\公開課\2019  create-react-app myFirstReactApp  X
D:\公開課\2019  a project called "myFirstReactApp" because of npm naming restrictions
* name can no longer contain capital letters
複製程式碼
  • 當使用npx create-react-app命令建立react應用失敗,更改淘寶映象,替換成國內下載，更改完後,在使用npm或者cnpm以及一些其他命令時,下載依賴包會快很多 檢視npm的映象源
 D:\公開課\2019  npm config get registry 
 // 預設是：https://registry.npmjs.org/
複製程式碼

修改成淘寶的映象源

 D:\公開課\2019 npm config set registry https://registry.npm.taobao.org
複製程式碼

create-react-app建立專案

D:\公開課\2019  npx create-react-app 應用名稱
複製程式碼

以上的命令可以建立react專案應用,在這個目錄下回自動的建立一個應用框架的程式碼結構

你可以在src中建立子目錄。為了加快重建速度

注意:Webpack只處理src中的檔案。你需要將任何JS和CSS檔案放在src中，否則Webpack將不會看到它們的

藉助這個create-react-app工具建立的應用程式可以避免那些麻煩的手工配置工作,react技術依賴webpack工具,這也是個技術

當一切就緒好後,執行npm start命令會啟動一個本地開發模式的服務,同時會自動的開啟一個網頁,指向本地地止http://localhost:3000 如下圖所示：

React學習(1)-create-react-app

接下來用你喜歡的程式碼編輯器開啟專案:這將是本節最重要的內容

myfirstreactapp
├── package-lock.json // 鎖定安裝時的包的版本號，並且需要上傳到git，以保證其他人在npm install時大家的依賴能保證一致,對整個檔案的描述,為的是讓開發者知道只要你儲存了原始檔，到一個新的機器上、或者新的下載源，只要按照這個package-lock.json所標示的具體版本下載依賴庫包，就能確保所有庫包與你上次安裝的完全一樣，它是npm install自動生成的一檔案
├── package.json // 對整個應用程式的描述,應用名稱,版本號,一些依賴包,以及專案的啟動,打包，測試配置，鎖定大版本
├── public
│   ├── favicon.ico  // icon圖示
│   ├── index.html   // 主頁面,首頁模板
│   └── manifest.json // 定義成app應用的方式來使用,快捷方式的圖示,可以配置icons，定義快捷方式的圖示,定義快捷方式跳轉的網址到哪裡,主題顏色,用於指定應用的顯示名稱、圖示、應用入口檔案地址及需要使用的裝置許可權等資訊，類似於android裡面的manifest.xlm配置檔案
├── README.md // 說明文件
└── src       // 原始碼目錄
    ├── App.css // App應用元件的樣式
    ├── App.js  // App應用元件的邏輯程式碼,構成一個react元件的基本組成部分
    ├── App.test.js // App自動化測試檔案
    ├── index.css   // 首頁入口index的樣式
    ├── index.js    // 整個程式執行的入口檔案
    ├── logo.svg    // 圖示,資源
    └── serviceWorker.js // 引入這個是為了幫助我們藉助網頁去寫手機app應用這樣的一個功能,如果上傳到https協議的伺服器上,在斷網的情況下,依然可以看到之前的頁面
複製程式碼

React中的元件

在react中一個重要的思想就是通過元件(Component)來開發應用,所謂元件,就是指能夠完成某個特定功能的獨立的,可重用的程式碼(頁面中的某一部分)

基於元件的應用開發是廣泛使用的軟體開發模式,用分而治之的方法,把一個大的應用分解成若干個小的元件,每個元件只關注於某個小範圍的特定的功能,但是把元件組合起來，就能夠構成一個功能龐大的應用

應用只是一個會渲染其他元件的元件而已

也可以說,react應用是由元件構成的,你可以將元件理解為一種教瀏覽器認識新的HTML標籤的方式,實現元件的好處就是它擴充了原生HTML標籤的功能,例如:元件之間的資料流等。

如果你有用過AngularJS的話,可以把元件理解為類似指令的概念,在現今的開發模式裡,基於元件化開發是非常流行的

react非常適合構建使用者互動元件

一個react應用其實就是一顆由元件構成的樹

在這顆樹的根結點,最頂層的元件就是該應用的本身,它會在瀏覽器啟動,也叫引導應用的時候被渲染

由於元件都是以樹結構組織起來的,當每個元件被渲染時,它都會遞迴地渲染下級元件

React特點

  • 虛擬DOM

通過DOM diff演算法,只會更新有差異化的部分,不用渲染整個頁面提高效率

  • 元件化

把頁面分成若干個元件,元件中包含邏輯結構和樣式 元件只包含自身邏輯,更新元件的時候可以預測,利於維護整個頁面拆分多個元件,可以做到重用

  • 單向資料流(父元件允許向子元件傳值,但是子元件你只能去使用父元件),子元件並不能直接的去改寫這個值,只能單向的傳遞,但是你不能反過來的給我修改,想要達成這一目的,子元件呼叫父元件的方法,通過在父元件中改變自己來操作,維護程式碼起來比較方便)
  • 可以與其他框架並存(Jq,Angular等) 資料是從頂層元件傳遞到子元件中 資料可控

寫一個react應用的基本流程

其實不光是react還是vue,甚至是Angular,遵循的流程都是一樣的

基於產品經理給的原型圖或者UI設計師提供的設計稿,首先要做的不是開始寫程式碼,而是基於頁面,按照不同大小細粒度,把頁面拆分成若干個元件

對頁面的內容進行分組,並抽象成一個個的元件,從上至下,組合我們的應用,從而構成一個完整的軟體系統應用

從creact-react-app腳手架中學到的

  • 一切皆是js,以前講究是內容(html),層疊樣式(css),行為(js)進行分離,這種分離僅僅是物理層檔案的分離,如果視為一個整體,那麼css是可以和js一樣,通過模組的形式嵌入到js裡面去的
  • ,構成元件的方式

總結

本文主要講到了react是什麼,以及通過creact-react-app腳手架工具搭建一個react初始化的專案,其中初始化一個react應用,有多種方式

其中最重要的是,初始化專案目錄檔案的含義,以及構建一個react元件的方式,以及react中的元件,react的特點,寫一個react應用的基本流程,從一個初始化專案裡,學到了react程式設計方式

itclancoder二維碼.jpg

相關文章