推薦學習：
- React 官方檔案：
https://react.docschina.org/ - React 菜鳥教程：
https://www.runoob.com/react/react-tutorial.html
關于React
| 特點 | 描述 |
|---|---|
| 庫 | React 是一個用于構建用戶界面的 JavaScript 庫 |
| 宣告式設計 | 采用宣告范式，可以輕松描述應用 |
| 高效 | 通過對 DOM 的模擬，最大限度地減少與 DOM 的互動 |
| 靈活 | 可以與已知的庫或框架很好地配合 |
| JSX | JSX 是 JavaScript 語法的擴展，建議使用 |
| 組件 | 通過 React 構建組件，使得代碼更加容易得到復用 |
| 單向回應的資料流 | 減少了重復代碼，比傳統資料系結更簡單 |
安裝
npm install -g create-react-app
Create React App 是來自于 Facebook的一個用于學習 React 的舒適環境，也是用 React 創建新的單頁應用的最佳方式，通過該命令我們無需配置就能快速構建 React 開發環境，
它會配置你的開發環境，以便使你能夠使用最新的 JavaScript 特性，提供良好的開發體驗，并為生產環境優化你的應用程式，你需要在你的機器上安裝 Node >= 8.10 和 npm >= 5.6，
create-react-app 自動創建的專案是基于 Webpack + ES6，
執行以下命令創建專案：
npx create-react-app my-app
cd my-app
npm start
創建完成是這樣的：
我們的大部分操作都將會在 src 檔案夾中進行；
了解各個檔案的作用
| 檔案 | 作用描述 |
|---|---|
| README.md | 專案的說明檔案，會在 github 上顯示 |
| package.json | 第三方包管理工具和組態檔 |
| package-lock.json | 鎖定安裝時的版本號，版本控制檔案 |
| .gitignore | git 的選擇性上傳的組態檔 |
node_modules 檔案夾
我們專案依賴的第三方包，一般不用動
public 檔案夾
公共檔案，里面有一些公用模版和圖示等，
| 檔案 | 作用描述 |
|---|---|
| favicon.ico | 標簽的圖示 |
| index.html | 模版檔案，有 title 以及 noscript 設定 |
| manifest.json | 移動端的配置 |
src 檔案夾
主要作業，是一個專案工程目錄，很重要
| 檔案 | 作用描述 |
|---|---|
| index.js | 入口檔案 |
| index.css | 是 index.js 的 CSS 檔案 |
| APP.js | 相當于一個方法模塊，簡單的模塊化編程 |
| serviceWorker.js | 用于寫移動端開發的，PWA 相關技術，實作離線瀏覽功能 |
| logo.svg | 圖片技術 |
關于上面提到的 PWA
PWA全稱Progressive Web App，即漸進式WEB應用，
一個 PWA 應用首先是一個網頁, 可以通過 Web 技術撰寫出一個網頁應用，隨后添加上 App Manifest 和 Service Worker 來實作 PWA 的安裝和離線等功能
解決的問題：
- 可以添加至主螢屏，點擊主螢屏圖示可以實作啟動影片以及隱藏地址欄；
- 實作離線快取功能，即使用戶手機沒有網路，依然可以使用一些離線功能
- 實作了訊息推送
它解決了上述提到的問題，這些特性將使得 Web 應用漸進式接近原生 App，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/40109.html
標籤：其他
上一篇：2020年北京國際人工智能展覽會