React的核心思想:封裝組件,再由組件構成複雜頁面,同時各個組件維護自己的狀態和UI,當狀態發生變化,自動重新渲染整個組件。
React 是一個用於構建用戶界面的JavaScript庫,它起源於 Facebook 的內部項目,用來架設 Instagram 的網站,並於 2013 年 5 月開源。
React主要用於構建UI,而且性能出衆,代碼邏輯簡單,所以我打算好好研究一下,既滿足了自己的好奇心,也提高一下自己的技術水平。
在學習的過程中我參考了阮大大的React教程和React 官方文檔
React特點
- 聲明式設計 : 以聲明式編寫UI,可以讓你的代碼更加可靠,且方便調試
- 高效 : React通過對DOM的模擬,最大限度的減少與DOM的交互
- 靈活 : 提供了可以調用其他第三方框架或庫的接口
- JSX : JSX是JavaScript語法的擴展,建議開發過程中使用它
- 組件 : 通過React構建擁有各自狀態的組件,再由組件構成更加複雜的界面,代碼更加容易得到複用
- 單向響應的數據流 : React實現了單向響應的數據流,減少了重複代碼
創建新應用
1.React可以直接下載使用,下載包中提供了很多學習的實例,可以去官網下載最新版
2.使用create-react-app構建React開發環境(需要安裝node.js,另一系列文章中會提到node的安裝,大家也可自行搜索安裝方法)
create-react-app 是來自於 Facebook,通過該命令我們無需配置就能快速構建 React 開發環境
create-react-app 自動創建的項目是基於 Webpack + ES6
執行以下命令創建新項目:
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/ (一般會自動刷新), 會發現輸出結果已經改變:
當你準備好將其部署到生產環境中時,運行 npm run build 將會在 build 文件夾中創建一個優化好的應用
該文章同步在 :
簡書 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io