React 快速上手 - 02 開發環境搭建

目錄

• 01 前言
• 02 開發環境搭建
• 03 腳手架建立項目 一切都是組件
• 04 基礎特性 JSX、Props、State、Lifecycle、Event、Style
• 05 組件渲染控制
• 06 容器組件、展現組件
• 07 前端路由 react-router
• 08 狀態管理 react-redux
• 09 數據請求 fetch
• 10 屬性類型檢查 prop-types

React 快速上手 - 02 開發環境搭建

目標

• 安裝 git 軟件
• 安裝 node npm 環境
• 配置 node npm 經常使用工具
• 安裝 vscode 做爲 IDE 開發工具
• 安裝 vscode 經常使用開發插件 爲 react 開發作準備

安裝 git

這個必要性，就很少說了，進入開源的世界，沒有 git 步履維艱

進入 官網

下載後是一個安裝包，一路 下一步 安裝直到完成

安裝 node npm

打開網站 https://nodejs.org/en/ 選擇下載 LTS 版本。

下載後是一個安裝包，一路 下一步 安裝直到完成

測試安裝結果

node -v
npm -v

使用淘寶鏡像

爲了加速 npm 的安裝速度，咱們用淘寶提供的源，這個問題在其它包管理軟件也會遇到

npm config set registry https://registry.npm.taobao.org

驗證配置

npm config get registry

這樣就完成了加速

安裝 cnpm

其實如今的 cnpm 版本已經很穩定了，早先會有下載包錯誤問題，畢竟產品成熟須要時間，cnpm官網

全局安裝

npm install -g cnpm
若是你沒有配置淘寶鏡像能夠參數傳入加速
npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝 yarn

yarn 是個很優秀的包管理程序， react 官方示例都是推薦 yarn 安裝，特色就是快，相信不久 npm 也會遇上的，好比已經下載過的包本地作緩存，下次就秒安裝了

yarn官網

mac 安裝

homebrew 方式

brew install yarn

若是沒有安裝 homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

windows 安裝

直接下載安裝包 Yarn Setup

一路 下一步 安裝直到完成

安裝 nrm 包源管理工具

• 安裝

cnpm install -g nrm

• 顯示可用源

> nrm ls

npm ---- https://registry.npmjs.org/
cnpm --- http://r.cnpmjs.org/
taobao - https://registry.npm.taobao.org/
nj ----- https://registry.nodejitsu.com/
rednpm - http://registry.mirror.cqupt.edu.cn/
npmMirror  https://skimdb.npmjs.com/registry/
edunpm - http://registry.enpmjs.org/

• 切換源

> nrm use npm

  verb config Skipping project config: /Users/hans/.npmrc. (matches userconfig)

  Registry has been set to: https://registry.npmjs.org/

我的喜歡 npm 用官方源，cnpm 用來安裝淘寶鏡像，這樣遇到包問題，能夠手動調整，比較靈活。

安裝 n node 版本切換工具

• 安裝

cnpm install -g n

• 本地版本列表

> n

  node/8.8.1
  node/8.9.4
  node/8.10.0
  node/8.11.1
  node/9.4.0
  node/9.9.0

• 安裝、切換 版本

> n 8.11.2

• 切換 最新版本

> n latest

• 切換 最新穩定版本

> n stable

• 切換 長期支持版本

> n lts

• 刪除本地版本

> n rm 8.8.1

安裝 vscode

推薦理由 微軟出品、免費、開源、速度快、輕量級、程序穩定、不卡、不卡、大文件秒開、語法高亮、升級頻繁、配置方便

下載後是一個安裝包，一路 下一步 安裝直到完成

配置 vscode 格式文件 .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
tab_width = 1

沒有請建立文件

安裝 vscode 插件 eslint

• 全局安裝

cnpm install -g eslint

• 咱們後面用 腳手架 建立項目，默認生成有 .eslintrc.js 配置文件
• 安裝 vscode 插件, 側欄 > 擴展 > 搜索 eslint

• 配置 vscode , 打開菜單 文件 > 首選項 > 設置

"eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": "off",
  "eslint.validate": [
    "javascript",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    "javascriptreact",
    "html",
    "vue"
  ],
  "eslint.options": { "plugins": ["html"] },

安裝 vscode 插件 prettier - Code formatter

代碼格式化插件

• 安裝 vscode 插件, 側欄 > 擴展 > 搜索 prettier

• 配置 vscode , 打開菜單 文件 > 首選項 > 設置

"prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.bracketSpacing": false,
  "prettier.useTabs": false,
  "prettier.tabWidth": 2,

• 使用，鼠標右鍵點擊 格式化文件

安裝 vscode 插件 reactjs code snippets

代碼片斷工具

• 安裝 vscode 插件, 側欄 > 擴展 > 搜索 reactjs code snippets

• 使用，新建文件 MyApp.js

安裝 vscode 插件 Auto Close Tag

html 標籤自動補完插件

• 安裝 vscode 插件, 側欄 > 擴展 > 搜索 Auto Close Tag

安裝 vscode 插件 Auto Rename Tag

html 標籤更名自動同步插件

• 安裝 vscode 插件, 側欄 > 擴展 > 搜索 Auto Rename Tag

安裝 vscode 插件 Debugger for Chrome

vscode chrome 調試工具

• 安裝 vscode 插件, 側欄 > 擴展 > 搜索 Debugger for Chrome

• 調試配置文件 launch.json

{
  // 使用 IntelliSense 瞭解相關屬性。
  // 懸停以查看現有屬性的描述。
  // 欲瞭解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "userDataDir": "${workspaceRoot}/.vscode/chrome",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

• 使用錄像

http://localhost:3000 服務須要已開啓

安裝完插件都須要重啓 vscode 才能生效