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

前言

現在,對於現今前端熱門的三大框架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 以下圖所示：

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

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