快速搭建React的環(huán)境步驟詳解

前端生態(tài)這幾年可謂迎來了大發(fā)展，在這個生態(tài)圈內(nèi)，不接受新事物學(xué)習(xí)新技能，等于墮入魔道。

通許網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

本文嘗試對前端開發(fā)利器React，以及構(gòu)建項目過程中涉及的技術(shù)棧進(jìn)行介紹，以期開啟整個構(gòu)建流程上的思考。

有必要指出的是，要弄明白一件事情的原理，首先要知道它的目的是什么。

1、Nodejs & NPM

為什么要提nodejs呢？

與其說nodejs提供了服務(wù)端開發(fā)的另一種可能，不如說它徹底改變了整個前端開發(fā)的生態(tài)。nodejs平臺上衍生出了強(qiáng)大的npm、grunt、express等，幾乎重新定義了前端的工作流程和開發(fā)方式。

這里有必要來講一講NPM（node package manager）這個包管理器。

npm是javascript包管理器，我們可以在npm上找到、分享和使用來自無數(shù)開發(fā)者貢獻(xiàn)的代碼包，而無需自己造輪子。

使用npm，需要安裝node。新的版本的nodejs已經(jīng)集成了npm，安裝好nodejs，通過以下命令查看所安裝的版本：

$ npm -v

在項目目錄內(nèi)，當(dāng)在命令行執(zhí)行

$ npm install

它會識別一個叫package.json的文件，并嘗試安裝該文件內(nèi)配置的依賴包。

2、React

React的組建化思想使得代碼重用性高，易于測試、更容易分離關(guān)注點(diǎn)（separation of concerns）。

React還宣稱Learn Once, Write Anywhere。既可運(yùn)行在客戶端瀏覽器，又能在服務(wù)端渲染，同時React Native還使得React開發(fā)原生app成為可能。

下面我們來寫一個簡單的React程序，讓其能夠運(yùn)行起來：

項目目錄：

快速搭建React的環(huán)境步驟詳解

第一步：新建一個package.json文件，指定項目所需的依賴包。

{
 "name": "react-tutorials",
 "version": "1.0.0",
 "description": "",
 "author": "yunmo",
 "scripts": {
   "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
   "build": "webpack --progress --colors --minimize"
  },
 "dependencies": {
   "react": "^15.4.0",
   "react-dom": "^15.4.0"
 },
 "devDependencies": {
   "webpack": "^2.2.1",
   "webpack-dev-server": "^2.4.2"
 },
 "license": ""
}

這是npm包管理器的必要文件，定義了該項目的名稱、版本、啟動命令、生產(chǎn)環(huán)境依賴包（dependencies）和開發(fā)環(huán)境依賴包（devDependencies）。

第二步：新建一個index.html文件。

<!doctype html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>yunmo</title>
   <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
 </head>
 <body>
 <div id="yunmo"></div>
 <script src="bundle.js"></script>
 </body>
</html>

第三步：寫一段簡單的React代碼。

var React = require('react');
var ReactDOM = require('react-dom');

var element = React.createElement(
 'h2',
 {className: 'yunmo'},
 '云陌，歡迎來到react的世界！'
 );

ReactDOM.render (
 element,
 document.getElementById('yunmo')
);

第四步：運(yùn)行。

那么如何在瀏覽器里運(yùn)行呢？這里我們需要借助強(qiáng)大的webpack-dev-server來開啟本地服務(wù)器。

我們可以看到上面的package.json里面有webpack和webpack-dev-server依賴包。下面會介紹webpack。

當(dāng)然我們還可以通過nodejs來建立一個本地服務(wù)器，但這里其實webpack-dev-server是一個小型的nodejs Express服務(wù)器，它使用webpack-dev-middleware中間件來服務(wù)于webpack包。

webpack.config.js文件配置如下：

var webpack = require('webpack');

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: __dirname + '/build',
  filename: 'bundle.js'
 },
 module: {
  loaders: []
 }
}

這樣我們在命令行通過npm install安裝好依賴包以后，敲打命令

$ npm start

運(yùn)行服務(wù)后，在瀏覽器中輸入http://localhost:8080/

快速搭建React的環(huán)境步驟詳解

React在瀏覽器運(yùn)行結(jié)果

一個簡單的React項目便運(yùn)行起來了。

3、Webpack

webpack是一款現(xiàn)代JavaScript應(yīng)用的模塊加載兼打包工具，它不僅僅可以打包JavaScript，還可以打包styles，images等資源。

來看一個典型的webpack配置：

var webpack = require('webpack');
var path = require('path')

module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: path.resolve(__dirname, '/build'),
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
   },
   {
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
   },
   {
    test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
    loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
   }
  ]
 },
 plugins: [
  new webpack.optimize.UglifyJsPlugin()
 ]
}

從上面webpack配置里面可以看出來有一些基本的配置點(diǎn)，也反映了webpack的四個理念：

entry——webpack會根據(jù)應(yīng)用的依賴關(guān)系，創(chuàng)建一個關(guān)系表。該表的起始點(diǎn)便是所謂的entry point（入口點(diǎn)）。entry point會告訴webpack從哪入手，webpack會以該表的依賴關(guān)系作為打包依據(jù)。
output——用于配置打包后的文件放置路徑。
loader——webpack把每個文件都看作組建（如.css, .html, .scss, .jpg, .png等），但是webpack只能識別JavaScript。這時候loaders便可以把這些文件轉(zhuǎn)換成組建，進(jìn)而被添加到依賴關(guān)系表。
plugins——因為loaders作用方式是以單一文件為基礎(chǔ)的，所以plugins更廣泛的用來對打包組建形成的集合（compilations）進(jìn)行自定義操作。

這樣，一個完整的模塊打包體系就建立起來了。

4、ES6

ES6，即ECMAScript 6.0，是 JavaScript的下一代標(biāo)準(zhǔn)。ES6里面新增了很多語法特性，使得編寫復(fù)雜的應(yīng)用更加優(yōu)雅自然。

ES6中引入了諸如let和const、箭頭函數(shù)、解構(gòu)賦值、字符串模版、Module、Class、Promise等特性，使得前后端編程語言在語法形式上的差異越來越小。

我們來看一下：

import React from 'react'  //模塊引入

import '../styles/reactStack.scss'

class ReactStack extends React.Component { //class特性

 render() {
  const learner = {name: '云陌', age: 18} //const定義變量
  const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
  const extraSkills = ['Git', 'Postman']
  const skillSet = [...mainSkills, ...extraSkills]
  const { name } = learner  //解構(gòu)賦值
  let greetings = null  //let定義變量
  if (name) {
   greetings = `${name},歡迎來到${mainSkills[0]}的世界！` //字符模版
  }
  //以下用了箭頭函數(shù)
  return (
   <div className="skills">
    <div>{greetings}</div>
    <ol>
     {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
    </ol>
   </div>
  )
 }
}

export default ReactStack  //模塊導(dǎo)出

當(dāng)然，并非所有瀏覽器都能兼容ES6全部特性，但看到這么優(yōu)雅的書寫方式，只能看怎么行呢？因此，這里又引出了一個神器，Babel！

5、Babel

Babel是一款JavaScript編譯器。

Babel可以將ES6語法的代碼轉(zhuǎn)碼成ES5代碼，從而在瀏覽器環(huán)境中實現(xiàn)兼容。

Babel內(nèi)置了對JSX的支持，所以我們才能向上面那樣直接return一個JSX形式的代碼片段。

具體用法不在本文過多講述。

6、Styles引入

在上面的代碼中，有以下樣式引入方式：

import '../styles/reactStack.scss'

樣式文件如下：

body {
 background: #f1f1f1;
}

.skills {
 h4 {
  color: darkblue;
 }
 ol {
  margin-left: -20px;
  li {
   font-size: 20px;
   color: rgba(0, 0, 0, .7);
   &:first-child {
    color: #4b8bf5;
   }
  }
 }
}

樣式文件要在項目中起作用，還需要在package.json里面添加相應(yīng)的loader依賴，如css-loader, sass-loader, style-loader等，別忘了package.json里還需要node-sass依賴，然后安裝即可。

webpack.config.js中相應(yīng)配置如下：

module: {
 loaders: [
  {
   test: /\.js$/,
   exclude: /node_modules/,
   loader: 'babel-loader'
  },
  {
   test: /\.scss$/,
   loaders: ["style-loader", "css-loader", "sass-loader"]
  }
 ]
}

再將main.js中的內(nèi)容作如下更改：

import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'

ReactDOM.render (
 <ReactStack />,
 document.getElementById('yunmo')
);

最后在瀏覽器中可以看到：

快速搭建React的環(huán)境步驟詳解

結(jié)語

至此，一個簡單的React項目便搭建起來了。

在后續(xù)的文章中，我將對本文涉及到的React技術(shù)棧做專門的講解，不僅限于硬性技能。當(dāng)然更多的是實踐做法上的總結(jié)，因為如果要掌握它們的理論，細(xì)看官方文檔和源碼是最好不過的做法。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：快速搭建React的環(huán)境步驟詳解
網(wǎng)址分享：http://bm7419.com/article30/igdoso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計公司、網(wǎng)站導(dǎo)航、網(wǎng)站制作、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容