現在,對於現今前端熱門的三大框架Vue,Angular,React,對於web開發者來講,早已不是什麼陌生的詞javascript
儘管三者實現業務最終的目的都能達成一致,可是各有特點,其中任何一框架,我的以爲,都博大精深,可圈可點,要學習的內容有不少,我也僅僅是淺嘗輒止而已.php
有時候,由於工做項目的須要,本身在切換各個技術棧的時候,只要一段時間沒有用,就有些陌生,說到底不得不認可本身功力不夠css
本文並非什麼教程,只是做爲本身學習過程當中的一些總結和思考,一塊兒學習,共同成長~html
正文從這裏開始~前端
React是什麼?
用於構建用戶界面的javascript庫,MVC架構中的V層vue
面向數據編程,只要把數據構建好了就能夠了的,react會自動的幫你去構建網站,把數據能夠理解爲圖紙,圖紙作好了以後,React會自動的結合這張圖紙幫助你去構建這個大廈,去構建整個頁面的DOMjava
數據是什麼,頁面就顯示什麼,這種聲明式的開發幫助咱們節約掉大量的DOM操做,這是React編程帶來的一個優點)node
/** * * 需求:編寫一個函數,處理傳入包含大寫字符串的數組,返回包含相同小寫字符串的數組 * 聲明式編程實現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"]
/* * 命令式編程:按照順序一步一步的實現 * 首先,建立一個空數組用於保存結果,而後遍歷輸入數組的全部元素, 將每項元素的小寫值存入空數組中,而後返回結果數組 */ 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"]
在小型項目中,能夠藉助React中的父子組件傳值就能夠,可是在大型項目裏,單單來使用React是不夠的,好比說:flux,redux,mobox這樣的數據層框架),React並非一個完整的框架,因此它學習的成本也就相對高些的.react
React能作什麼?
只有你想不到的應用,沒有實現不了的技術...android
初始化一個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 diff算法,只會更新有差別化的部分,不用渲染整個頁面提升效率
把頁面分紅若干個組件,組件中包含邏輯結構和樣式 組件只包含自身邏輯,更新組件的時候能夠預測,利於維護整個頁面拆分多個組件,能夠作到重用
數據是從頂層組件傳遞到子組件中 數據可控
寫一個react應用的基本流程
其實不光是react仍是vue,甚至是Angular,遵循的流程都是同樣的
基於產品經理給的原型圖或者UI設計師提供的設計稿,首先要作的不是開始寫代碼,而是基於頁面,按照不一樣大小細粒度,把頁面拆分紅若干個組件
對頁面的內容進行分組,並抽象成一個個的組件,從上至下,組合咱們的應用,從而構成一個完整的軟件系統應用
從creact-react-app腳手架中學到的
總結
本文主要講到了react是什麼,以及經過creact-react-app腳手架工具搭建一個react初始化的項目,其中初始化一個react應用,有多種方式
其中最重要的是,初始化項目目錄文件的含義,以及構建一個react組件的方式,以及react中的組件,react的特色,寫一個react應用的基本流程,從一個初始化項目裏,學到了react編程方式