[TOC] ## React概述 React 是一個用于構建用戶界面的 JAVASCRIPT 庫。 React 主要用于構建UI，很多人認為 React 是 MVC 中的 V（視圖）。 React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。 React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它。 ## React 特點 * **1.聲明式設計**?React采用聲明范式，可以輕松描述應用。 * **2.高效**?React通過對DOM的模擬，最大限度地減少與DOM的交互。 * **3.靈活**?React可以與已知的庫或框架很好地配合。 * **4.JSX**? JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。 * **5.組件**? 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。 * **6.單向響應的數據流**? React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單。 ## 使用 create-react-app 快速構建 React 開發環境 create-react-app 是來自于 Facebook，通過該命令我們無需配置就能快速構建 React 開發環境。 create-react-app 自動創建的項目是基于 Webpack + ES6 。 執行以下命令創建項目： ``` $ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start ``` ## 使用http-server啟動本地服務 參考鏈接：[https://www.jianshu.com/p/54b0901cb9cd](https://www.jianshu.com/p/54b0901cb9cd) 安裝http-server ``` npm i -g http-server ``` 啟動http服務 ``` http-server -p 3000 ``` ## Server-X 參考鏈接：[https://juejin.im/post/5dad208ef265da5b7d692340](https://juejin.im/post/5dad208ef265da5b7d692340) ### 創建項目及啟動 ``` npm init react-app svrx-example cd svrx-example ``` 不過由于新工程并沒有暴露出 `webpack` 配置項，所以我們需要先在根目錄創建一個 `webpack.config.js`： ``` // webpack.config.js module.exports = require('react-scripts/config/webpack.config')('development'); ``` 然后我們就可以順利啟動項目了： ``` svrx --webpack ``` ### 配置項 svrx 會在啟動時自動開啟一些內置的基礎插件， 如靜態伺服（serve）、轉發服務（proxy）、頁面自動刷新（livereload）： ``` svrx --port 3000 --https --no-livereload ``` 也可以在你的工程目錄下建立`.svrxrc.js`或`svrx.config.js`文件，將上面的命令行參數持久化下來： ``` // .svrxrc.js module.exports = { port: 3000, https: true, livereload: false }; ``` svrx 的全部配置項及描述可以在[官方文檔-內置項](https://docs.svrx.io/zh/guide/option.html)中查看。 ### localtunnel插件的使用 svrx 的[localtunnel](https://github.com/localtunnel/localtunnel)插件了！ 它可以將你的本地服務暴露到`localtunnel.me`，從而方便地進行本地代碼的測試和分享。 你再也無需為了測試你的一點代碼變動就專門部署一次測試服務了。 啟動`localtunnel`只需在之前的啟動命令后添加聲明即可： ``` svrx --webpack --localtunnel ``` 上面的命令將會自動安裝 localtunnel 插件并啟動 svrx， 其他人（是的，你們甚至不需要在同一個內網）此時訪問終端打印的 https://\*.localtunnel.me 也將看到你的本地服務