React的核心思想是:封裝組件勋功,再由組件構成復雜頁面怜庸,同時各個組件維護自己的狀態(tài)和UI馏鹤,當狀態(tài)發(fā)生變化砖织,自動重新渲染整個組件款侵。
React 是一個用于構建用戶界面的JavaScript庫,它起源于 Facebook 的內部項目侧纯,用來架設 Instagram 的網站新锈,并于 2013 年 5 月開源。
React主要用于構建UI眶熬,而且性能出眾妹笆,代碼邏輯簡單,所以我打算好好研究一下娜氏,既滿足了自己的好奇心拳缠,也提高一下自己的技術水平。
在學習的過程中我參考了阮大大的React教程和React 官方文檔
React特點
- 聲明式設計 : 以聲明式編寫UI贸弥,可以讓你的代碼更加可靠窟坐,且方便調試
- 高效 : React通過對DOM的模擬,最大限度的減少與DOM的交互
- 靈活 : 提供了可以調用其他第三方框架或庫的接口
- JSX : JSX是JavaScript語法的擴展绵疲,建議開發(fā)過程中使用它
- 組件 : 通過React構建擁有各自狀態(tài)的組件哲鸳,再由組件構成更加復雜的界面,代碼更加容易得到復用
- 單向響應的數(shù)據流 : React實現(xiàn)了單向響應的數(shù)據流盔憨,減少了重復代碼
創(chuàng)建新應用
1.React可以直接下載使用徙菠,下載包中提供了很多學習的實例,可以去官網下載最新版
2.使用create-react-app構建React開發(fā)環(huán)境(需要安裝node.js郁岩,另一系列文章中會提到node的安裝婿奔,大家也可自行搜索安裝方法)
create-react-app 是來自于 Facebook芙盘,通過該命令我們無需配置就能快速構建 React 開發(fā)環(huán)境
create-react-app 自動創(chuàng)建的項目是基于 Webpack + ES6
執(zhí)行以下命令創(chuàng)建新項目:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
在瀏覽器中打開 http://localhost:3000/ ,結果如下圖所示:
項目的目錄結構如下所示 :
嘗試修改src/App.js文件里的代碼 :
修改之后再打開 http://localhost:3000/ (一般會自動刷新), 會發(fā)現(xiàn)輸出結果已經改變:
當你準備好將其部署到生產環(huán)境中時脸秽,運行 npm run build 將會在 build 文件夾中創(chuàng)建一個優(yōu)化好的應用
該文章同步在:
CSDN Blog: http://blog.csdn.net/levinhax/article/details/76651535
Github Page: https://github.com/levinhax