react系列（零）安裝

時間 2019-12-14

標籤 react 系列安裝欄目 React 简体版

原文原文鏈接

安裝

在最初的階段，可使用在線編輯的網站來學習React基本的語法。
從 Hello World 開始，能夠在Codepen，或者codesandbox上進行編寫。
固然，也可使用npm或者yarn來安裝依賴，本地進行開發。
這裏先講解經過create-react-app來建立一個React項目，後面會詳細講解如何用webpack建立一個react項目。javascript

create-react-app

詳細文檔能夠去github查看https://github.com/facebook/create-react-app。css

Node和Npm

首先安裝Node.js，這個直接在Node官網下載安裝包便可。建議下載長期支持版，bug會較少。
安裝完畢後，在終端或者cmd裏輸入html

npm -v

若是要使用npx，確保npm的版本大於5.2。若是npm版本較低，使用前端

npm i -g npm

更新npm到最新版，就可使用npx了。有關npx的詳細信息，能夠查看這篇文章。
若是使用yarn，也能夠自行去yarn官網下載安裝。java

create-react-app

官方介紹了3種建立一個react-app的方法。
1.npxnode

npx create-react-app my-app

2.npm init xxx your-appreact

npm init react-app my-app

npm init至關於一次npx的命令封裝，具體解釋能夠看一下這篇npm文檔-init|npm。
須要注意的是，這個方法須要更高版本的npm，6+。
3.yarnwebpack

yarn create react-app my-app

我我的比較建議使用yarn來管理npm依賴，速度更快，上手也很簡單。此處yarn的版本要求0.25+。git

cd my-app

等到依賴安裝完畢，進入到新建立的my-app目錄裏。github

├── node_modules
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

create-react-app只安裝了最少能運行一個react-app的依賴，例子也很簡單，如今咱們運行一下。

yarn start

運行成功後，就能夠在http://localhost:3000看到這個例子了。

webpack

如今前端開發經常使用的構建工具是webpack。接下來介紹用webpack構建一個簡單的react-app。

新建目錄

首先新建一個目錄。

mkdir webpack-react-app
cd webpack-react-app
npm init -y

這時，目錄裏會有一個package.json。接下來，咱們新建一個HTML文件，存放到dist目錄，做爲一個載體。

mkdir dist
cd dist
touch index.html

它的代碼以下

<!DOCTYPE html>
<html>
  <head>
    <title>webpack react app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/main.js"></script>
  </body>
</html>

這裏的id，默認爲app，在具體編寫時，能夠修改。main.js也是webpack本身生成的，能夠修改。

安裝webpack

接下來安裝webpack的一些依賴。

yarn add -D webpack webpack-dev-server webpack-cli

安裝完畢之後，在package.json配置一下啓動命令。

...
"scripts": {
  "start": "webpack-dev-server --config ./webpack.config.js --mode development",
  ...
},
...

--mode 用來配置模式，能夠區別是構建仍是開發模式，若是是構建發佈，就把一些開發時的提示等插件去掉。
--config 指向webpack的配置文件，默認爲同目錄下的 webpack.config.js。

配置webpack

接下來咱們來建立 webpack.config.js。

touch webpack.config.js

它的基本代碼以下：

module.exports = {
  entry: './src/index.js', //webpack的入口文件
  output: { //輸出目錄配置
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'main.js'
  },
  devServer: { //開發時服務器的配置
    contentBase: './dist'
  }
};

根據習慣， src/index.js 是咱們默認的入口。打包結束之後，生成一個 main.js 到dist目錄下。配置了DevSever以後，咱們能夠在瀏覽器裏訪問到dist下的文件。
接下來須要編寫 src/index.js。

console.log('webpack test');

終端運行

yarn start

打開http://localhost:8080查看控制檯輸出。
正常輸出了webpack test。
接下來要引入react。

安裝babel

react用到了jsx語法，須要使用babel來轉義一遍，才能被瀏覽器正常讀取。
安裝babel和依賴

yarn add -D babel-core babel-loader babel-preset-env babel-preset-react

新建babel配置文件

touch .babelrc

配置以下：

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

具體的 babel-preset-env 配置能夠查看babel文檔-babel-preset-env配置。
安裝完畢之後，新的 webpack.config.js 配置爲

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  ...
};

接着就能夠安裝react依賴了。

yarn add -D react react-dom

把 index.js 重寫一下。

import React from 'react';
import ReactDOM from 'react-dom';

const title = 'Hello World!';

ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);

運行一下