1. 程式人生 > >初探React框架的預備知識點筆記——隨時更新

初探React框架的預備知識點筆記——隨時更新

學了一階段的前端知識,現在準備學習框架。之前有接觸過一些框架,比如偏重DOM操作的jQuery、樣式框架Bootstrap,天真的我以為也不過如此……還真是天真如我啊,一點都不謙虛【翻白眼】

歸正題!前端框架一堆堆,不知如何下手?貼兩個傳送門!

知乎的問答——

https://www.zhihu.com/question/35069742

https://www.zhihu.com/question/39943474

問題淺顯易懂,各路大神眾說紛紜……自己選吧!最後我決定從React開始我的框架學習路程【認真】。

React入門知識點梳理:

1. ES6:ECMAScript是一個指令碼語言的標準,ES6是它的最新版本。相比之前版本所做的修改,可參考官方文件。我們常說的javascript是這個標準的基於瀏覽器的一個實現,簡稱js。

2. Babel:一個廣泛使用的ES6轉碼器,可以將ES6程式碼轉換為ES5程式碼,從而在現有環境執行。

3. node.js:執行在服務端的javascript,基於Google的V8引擎。換句話說,javascript的另一個宿主環境,伺服器的javascript平臺——Node。

4. CommonJS:ECMAScript標準由javascript 發展而來,由於其制定較早,比較薄弱還有很多缺陷,如沒有模組系統(在ECMAScript 6解決了)、標準庫較少。ECMAScript僅定義了部分核心庫,對於檔案系統、I/O流、資料庫訪問等常見需求卻沒有標準的API,導致它無法用在後端開發。CommonJS的誕生就是希望Javascript能應用在任何場景,像Python、Java、Ruby一樣具有開發大型應用的基礎能力,而不是停留在小指令碼程式階段。人

期望那些用CommonJS API寫出的應用可以具備跨宿主環境執行的能力,這樣不僅可以利用JavaScript開發豐富的客戶端應用,而且還可以編寫如伺服器端JavaScript應用程式、命令列工具、桌面圖形介面應用程式等。CommonJS標準有很多實現,其中不乏很多大名鼎鼎的專案,比如 說:Apache的。但這些專案大 部分只實現了CommonJS的部分規範。詳見:http://www.commonjs.org/impl/

5. npm:是隨NodeJS一起安裝的包管理工具,能解決NodeJS程式碼部署的很多問題。

6. Webpack:npm的包雖然都是由javascript寫成的,但不能直接在瀏覽器中執行,因為瀏覽器不支援CommonJS,即前端缺少模組化管理的能力。Webpack或Browserify作為構建工具解決了這個問題。瀏覽器不相容CommonJS的原因是缺少NodeJS的四個變數:module、exports、global、require.

7. React:React 是一個用於構建使用者介面的 JAVASCRIPT 庫。主要用於構建UI,很多人認為 React 是 MVC 中的 V(檢視)。React 起源於 Facebook 的內部專案,用來架設 Instagram 的網站,並於 2013 年 5 月開源。

react是基於js的二次解析引擎,它支援在js裡直接穿插html程式碼(有一定的規則要求),然後解析成正常的js程式碼並執行。

react native是基於js和react js的一個開發環境,可以直接用兩者的語法開發並編譯出原生APP。

8. create-react-app:開發react應用“最好用的=_=“手腳架。如果使用webpack+ES6來開發前端應用,需要我們手動使用npm來安裝各種外掛,手動搭建環境。雖然搭建環境是一個很好的學習過程,但每次開發一個新應用都需要搭建一次,非常繁瑣。避免開發過程中重複造輪子做無用功,就有了各種手腳架,像react-boilerplate、react-redux-starter-kit和create-react-app。

使用時發現create-react-app非圖形化構建工具,只是一個全域性命令列。下面是我執行該命令時的過程:

9. 手腳架: Scaffolding is a meta-programming method of building database-backed software applications. It is a technique supported by some model-view-controller frameworks, in which the programmer may write a specification that describes how the application database may be used. The compiler uses this specification to generate code that the application can use to create, read, update and delete database entries, effectively treating the template as a "scaffold" on which to build a more powerful application.(“腳手架”是一種超程式設計的方法,用於構建基於資料庫的應用。許多MVC框架都有運用這種思想。程式設計師編寫一份specification(規格說明書),來描述怎樣去使用資料庫;而由(腳手架的)編譯器來根據這份specification生成相應的程式碼,進行增、刪、改、查資料庫的操作。我們把這種模式稱為"腳手架",在腳手架上面去更高效的建造出強大的應用!)

參考了部分專案的搭建手段,可能有助於理解框架及其之間的關係:http://www.cnblogs.com/tianheila/p/5176556.html

技術上前端用的是react框架+webpack作為構建工具,後臺用的nodejs和mongodb。

相關推薦

初探React框架預備知識點筆記——隨時更新

學了一階段的前端知識,現在準備學習框架。之前有接觸過一些框架,比如偏重DOM操作的jQuery、樣式框架Bootstrap,天真的我以為也不過如此……還真是天真如我啊,一點都不謙虛【翻白眼】 歸正題

有關python的散碎的一些知識點_隨時更新

含義 如果 n) 開始 sta python end 只有一個 默認 1、range()函數 range函數原型:range(start, end, scan) 參數含義: start:計數的開始位置,默認是從0開始。 end:

搭建react框架(會持續更新,加入各個集成模塊)

bubuko pan 安裝 技術 img ont info sta AC 前提: 需要安裝Node.js (>6)版本 1.cmd進到本地某個目錄, 逐行輸入以下指令(以下括號為註釋) npm install -g create-react-app (全局

IC驗證常見知識點彙總_隨時更新

介面與虛介面 介面的強大功能:一是簡化模組之間的連線;二是實現類和模組之間的通訊。可以說介面的功能固然強大,但是問題又來了: 首先,因為事務交易處理器中的方法採用了層次化應用的方式去訪問對應埠的訊號,所以我們只能為兩個相同功能的介面分別編寫兩個幾乎一樣的事務交易處理器,為什麼呢

Android 開發小知識點收集(隨時更新

1、獲取手機執行時最大可佔用記憶體 int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024); Log.d("TAG", "Max memory is " + maxMemory + "KB"); 2、改變dial

react-navigation 使用筆記 持續更新

目錄 基本使用(此處基本使用僅針對導航頭部而言,不包含tabbar等) header怎麼和app中通訊呢? React-Navigation是目前React-Native官方推薦的導航元件,代替了原用的Navigator。最近開始接觸,做個筆記 基本使用(此處基本使用僅針對導航頭部而言

xLua筆記(熱更新框架設計之Xlua基礎)

熱 更新的 基本原理  C#指令碼不能直接熱更新的原因: 下載的圖片與模型都沒有問題,如果是Unity邏輯程式碼,無論是以前的 Mono AOT 還是後面的il2cpp , 都是編譯成native code, IOS下是執行不起 來的。  解決方法 就是不用native

Django學習筆記(2)隨時更新mysql資料庫

寫這是為了記錄自己曾經不知道的方法或經驗,勿噴。 在網上找了很多答案,發現很多都不是及時更新Django資料庫操作的,因為剛寫Django,隨時要修改程式碼,所以必須隨時更新資料庫。 你發現第二次用python manage.py syncdb時,根本不能隨

react專案框架環境搭建(持續更新中)

一、建立react專案 1.1 install node 1.2 命令列:npx create-react-app my-app (npx comes with npm 5.2+ and higher) 利用react官方提供的腳手架建立專案,建立完一

React筆記(騰訊課堂-最受歡迎的react框架【愛前端】)(react基礎)

1.Hello Worldindex.html<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id

react學習】關於react框架使用的一些細節要點的思考

through 私有變量 col 層級 -1 turn ech react 子函數 ( _(:3 」∠)_給園友們提個建議,無論是API文檔還是書籍,一定要多看幾遍!特別是隔一段時間後,會有意想不到的收獲的) 這篇文章主要是寫關於學習react中的一些自己的思考: 1.se

React框架搭建但頁面應用package.json基本包和依賴包

5.5 2.0 server 4.5 ack logs ostc style pac {  //依賴包 "devDependencies": {  //babel "babel-core": "6.24.1", "babel-loader": "7.0

工作軟技能&問題解決理念總結#隨時更新

流程 相關 競爭 如何 情況 設計優化 量化 團隊 總結 【周報&總結編寫】 總結編寫4步:出現問題(背景、為什麽)、解決思路方案、效果(盡量量化)、落地策略節奏 周報進展、風險問題、關鍵產品技術方案確認等 重構、優化:測試、前端 周報裏要有項目背景、總體進展、本周

初探boost之noncopyable學習筆記

私有繼承 tracking name oid 功能 div code sof _id noncopyable 功能 同意程序輕松實現一個不可復制的類。 需包括頭文件 #include<boost/noncopyable.hpp&

隨時更新———個人喜歡的關於模式識別、機器學習、推薦系統、圖像特征、深度學習、數值計算、目標跟蹤等方面個人主頁及博客

lam c++源代碼 for 閾值處理 mmc 閾值 align sources 回歸算法 目標檢測、識別、分類、特征點的提取David Lowe:Sift算法的發明者,天才。Rob Hess:sift的源代碼OpenSift的作者,個人主頁上有openSift的下載鏈接

React Native細節知識點總結<一>

idm tdi 刷新 循環 chan filelist sse inpu function 1.propTypes: static propTypes = { name:PropTypes.string, ID:PropTypes.num

laravel框架的個人筆記

laravel框架的個人筆記具體安裝環境可更具最新版本的文檔來,一下內容 只是我代碼的一些操作demo ,是對文檔進行的個人筆記;//路由命名Route::get(‘admin‘,[‘as‘=>‘profile‘,function(){ echo route(‘profile‘); re

《深入理解Java虛擬機:JVM高級屬性與最佳實踐》讀書筆記更新中)

pen 內存區域 深度 span 進化 ria 最短 描述 core 第一章:走進Java 概述 Java技術體系 Java發展史 Java虛擬機發展史 1996年 JDK1.0,出現Sun Classic VM HotSpot VM, 它是 Sun JDK 和 Open

oracle學習筆記 持續更新

.net 情況 style 空間 resource sdn detail reat net 1、創建表空間DATA_BASIC (1)Orale用戶登錄系統 (2)sqlplus / as sysdba; DBA用戶登錄數據庫; 執行:create tablespace T

React 開發實戰》筆記(一)空格與註釋

jsx 空格與註釋(一)如何添加空格