慕課《React.js入門基礎與案例開發》總結

時間 2019-12-05

標籤 react.js react 入門基礎案例開發總結欄目 React 简体版

原文原文鏈接

最近在慕課網聽了React入門的項目，寫篇文章小結一下，爲這個課程畫上一個句號。javascript

這個課程的內容是用React寫一個新聞網頁，咱們用npm來管理項目，且使用webpack模塊打包機進行打包。html

1.1 關於npmjava

npm一般稱爲node包管理器。顧名思義，它的主要功能就是管理node包，包括：安裝、卸載、更新、查看、搜索、發佈等；node

在進行此項目以前，我有必定的npm基礎，因此在作項目的過程當中，沒有遇到太多問題。想了解npm的小夥伴能夠參考下面兩篇文章：react

主要回顧一下npm配置國內資源github

npm是一個很是大的JavaScript包，可是在國外，因此因爲網速的緣由，咱們使用npm進行安裝的時候，有時會失敗。web

還好，淘寶作了一個npm的國內鏡像。咱們安裝以後，使用cnpm install [xxx] 命令使用淘寶的鏡像進行安裝了。cnpm的安裝和使用淘寶 NPM 鏡像說的很清晰。express

另外一種方式是直接修改npm的配置項register，將npm所在的位置修改成淘寶的地址，Mac 的作法以下：在命令行中輸入以下命令

cd ~ //進入根目錄
atom .npmrc //用atom打開.npmrc文件

將.npmrc文件中的內容修改以下：

registry = https://registry.npm.taobao.org

這樣咱們使用 npm install [xxx] 就是從淘寶鏡像進行安裝了。

注：關於npm配置國內資源，慕課老師寫了一篇文章，講的非常明白使用 CNPM 進行 Ionic 環境的安裝與配置

1.2 關於webpack

webpack是一個強大的模塊打包機，本項目中使用了React和ES6的語法，因此使用webpack是很是合適的呢！

webpack的內容仍是不少的，好比說配置文件webpack.config.js、loader的配置等等；我在學習webpack的過程當中，仍是花了不少力氣的。想學習webpack的小夥伴，我推薦下面這篇文章（真心講的很好）：

咱們主要說說webpack的熱加載的配置，這個功能真的很好用。

常規狀況下，咱們配置好webpack.config.js文件以後，使用webpack命令進行打包，而後手動刷新頁面。就是說，咱們在編寫代碼的過程當中，要不斷的執行webpack命令，再手動刷新，才能看到效果。
還有一種厲害一點的方法，webpack --watch 命令來動態監聽文件的改變並實時打包，輸出新 bundle.js 文件，可是仍是要咱們手動進行刷新。
最厲害的就是熱加載， webpack-dev-server 主要是啓動了一個使用 express 的 Http服務器。它的做用主要是用來伺服資源文件。此外這個 Http服務器和 client 使用了 websocket 通信協議，原始文件做出改動後， webpack-dev-server 會實時的編譯，可是最後的編譯的文件並無輸出到目標文件夾，實時編譯後的文件都保存到了內存當中。所以使用webpack-dev-server進行開發的時候都看不到編譯後的文件。
- 首先安裝 npm install webpack-dev-server
- 終端輸入命令 webpack-dev-server --inline

這樣咱們在瀏覽器輸入 http://localhost:8080/ 就能看到咱們編寫的頁面了，並能時時刷新。

須要注意的是：

webpack-dev-server並不能讀取你的webpack.config.js的配置output ，你在webpack.config.js裏面的配置output屬性是你用webpack打包時候才起做用的，對webpack-dev-server並不起做用
webpack-dev-server打包生產的文件並不會添加在你的項目目錄中。你啓動webpack-dev-server後，你在目標文件夾中是看不到編譯後的文件的,實時編譯後的文件都保存到了內存當中，它默認打包的文件名是bundle.js。
所以在使用熱加載時，咱們引入的文件應該是webpack-dev-server打包生產的文件(引用bundle.js文件須要直接引用根目錄下面的！)
```
<script type="text/javascript" src="bundle.js"></script>
```
這樣就能享受時時刷新的待遇啦！