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

前言

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

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

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

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

正文從這裏開始~

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 如下圖所示,以你自己啓動的端口號爲準

接下來用你喜歡的代碼編輯器打開項目:這將是本節最重要的內容

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 // 整個程序運行的入口文件,這個應用所做的事情是,只是渲染一個名叫App的組件，App組件在同目錄下的App.js文件中定義
├── logo.svg // 圖標,資源
└── serviceWorker.js // 引入這個是爲了幫助我們藉助網頁去寫手機app應用這樣的一個功能,如果

React中的組件

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

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

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

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

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

react非常適合構建用戶交互組件

一個React應用其實就是一顆由組件構成的樹,其實另外兩個框架（vue,Angular）也是如此

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

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

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編程方式