react 基礎篇 #2 create-react-app

1. 介紹

在開發react應用時，應該沒有人用傳統的方法引入react的源文件(js)，而後在html編輯吧。

你們都是用webpack + es6來結合react開發前端應用。

這個時候，咱們能夠手動使用npm來安裝各類插件，來從頭至尾本身搭建環境。

好比：

npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g

複製代碼

雖然本身搭建的過程也是一個很好的學習過程，可是有時候不免遇到各類問題，特別是初學者，並且每次開發一個新應用，都要本身從頭搭建，未免太繁瑣。

因而，有人根據本身的經驗和最佳實踐，開發了腳手架，避免開發過程當中的重複造輪子和作無用功，從而節省開發時間。

相似這樣的腳手架，我掃了網絡上比較多人用和關注的，一共發現了三個，它們分別是：

• react-boilerplate
• react-redux-starter-kit
• create-react-app

它們的關注量都很是大，截至寫這篇文章爲止，在github上的star量是這樣的：

因而可知，使用這三個腳手架的人都至關多，最突出的是create-react-app。

它是後來居上，他的開發時間都晚於前兩個，但關注量卻比他們還大，並且他仍是facebook官方開發的。

確定是一個優秀的產品。

下面來介紹一下它的特色。

2. 特色

它有好多好多的優勢，先從安裝使用提及。

2.1 簡單的安裝使用

create-react-app安裝起來實在是太簡單，只須要一條命令，不像別的腳手架，還須要去clone整個腳手架的源碼，再在那基礎上改。

npm install -g create-react-app

複製代碼

裝完以後，生成一個新的項目，可使用下面的命令：

create-react-app my-app
cd my-app/ 

複製代碼

建立了my-app目錄，這個時候，使用下面的命令就能夠開始開發應用了。

npm start

複製代碼

默認狀況下，會在開發環境下啓動一個服務器，監聽在3000端口，它會主動給你打開瀏覽器的，能夠馬上就看到這個app的效果。

是否是很簡單？

2.2 源碼結構簡單清晰

在項目my-app目錄中，你會發現源碼很是清晰，沒有多餘的文件。

真的很清爽，全部的源碼你將放到src目錄下，什麼配置文件，各類亂七八糟都不用管，你只須要專一開發就行了，create-react-app都給你處理好了。

整個源碼簡單，又小又清爽！管理起來也方便！

若是你使用過webpack-dev-server或webpack搭建過開發環境，你就會發現，create-react-app的開發環境也有相似webpack-dev-server的--inline --hot自動刷新的功能。

什麼意思呢？

就是一旦源碼文件，一更新，再保存以後，瀏覽器會自動刷新，讓你能實時查看效果。

你總要探究一下是怎麼回事，難道create-react-app也用上了webpack-dev-server?

翻看了一下源碼，沒有找到webpack.config.js文件，若是有使用webpack就應該有這個文件，好奇怪。

看了一下node_modules目錄，也沒找到webpack相關的東西。

先源頭入手，我是用npm start命令來運行項目的。

就從package.json文件入手，它的內容是這樣的：

看到了這行：

"start": "react-scripts start"

複製代碼

react-scripts又是什麼？

在node_modules目錄中能找到它，它果真依賴了好多工具，其中就包括'webpack'。

裏面果真也有webpack的配置文件，也有好多腳本文件。

原來它是facebook開發的一個管理create-react-app服務的工具。

原來也是它讓整個源碼變得很整潔的。

由於它隱藏了不必的文件，大多數人的配置都是差很少的。

除此以外，它還加入了eslint的功能。讓你在開發過程當中，更關注於代碼，很不錯。

2.3 線上編譯命令

這個是create-react-app的一個大亮點，它能讓你的應用騙譯出在線上生產環境運行的代碼，編譯出來的文件很小，且文件名還帶hash值，方便咱們作cache，並且它還提供一個服務器，讓咱們在本地也能看到線上生產環境相似的效果，真的超級方便。

只需一行命令：

npm run build

複製代碼

運行下面兩條命令，能夠查看線上生產環境的運行效果。

npm install -g pushstate-server
pushstate-server build

複製代碼

編譯好的文件都會放到build目錄中。

2.4 api開發

在開發react應用時，不免與服務器進行數據交互，就是要跟api打交道。

這個時候，有一個問題。

api存在的服務器多是跟react應用徹底分開的，並且，開發環境跟線上環境又不太同樣。

好比，開發環境中，你的react應用是跑在3000端口的，但是api服務可能跑在3001端口，這個時候，你跟api服務器交互的時候，可能會使用fetch或各類請求庫，好比jquery的ajax。

這個時候可能會遇到CORS問題，畢竟端口不一樣，而線上環境卻沒有這個問題，由於你都控制線上環境的react應用和api應用，跑在同一個端口上。

按照以往思路，解決的方法多是用環境變量，好比：

const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/' 

複製代碼

可是這樣搞起來，仍是有些複雜，然而，create-react-app提供了一個超級簡單的方法，只須要在package.json文件中，加一個配置項就能夠了。

好比：

"proxy": "http://localhost:3001/", 

複製代碼

至於你用的是http的何種請求庫，都是同樣的，不用改任何代碼。這個選項，只對開發環境有效，線上環境仍是保持react應用和api應用同一個端口。

yarn run eject 運行後能夠進行自定義配置。

webpack 3 零基礎入門視頻教程 #8 - 用 webpack 和 babel 配置 react 開發環境

1. 安裝 react

要使用 react，就必須裝下面兩個包的。

$ npm install --save react react-dom 

複製代碼

2. 創建 babel

可能你不懂 babel 是什麼，你能夠把它理解爲編譯器，它能把 react 代碼轉成通常瀏覽器可讀可執行的代碼，一般能夠用它來轉化 react 或 vue 這樣的前端代碼，或者把 es6 代碼轉成普通的 javascript 代碼等等。

若是還不理解的話，能夠看我這篇文章 babel 入門指南。

要讓 babel 很好的轉化 react 代碼，首先要安裝好 babel，再裝 babel 轉化 react 的包。

運行下面的命令。

$ npm install --save-dev babel-core babel-preset-react babel-preset-env 

複製代碼

建立 .babelrc 文件。

{ "presets": ["env", "react"] }

複製代碼

爲何我知道要這麼作呢？

由於我是分別結合 babel 和 react 的官網給的最新官方指南。

能夠參考下面兩個連接：

• React preset
• React Installation

3. 在 webpack 使用 babel-loader

最後咱們須要在 webpack 中使用一個 loader 來轉化 react 的代碼。

首先，安裝。

$ npm install --save-dev babel-loader 

複製代碼

webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  ...
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          //resolve-url-loader may be chained before sass-loader if necessary
          use: ['css-loader', 'sass-loader']
        })
      },
      // 這兩行是處理 react 相關的內容
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }
};