首頁 > 文章 > web前端 > 搭建React環境教學

搭建React環境教學

php中世界最好的语言原創: 2018-04-16 09:46:261175瀏覽

這次帶給大家搭建React環境教程，搭建React環境的注意事項有哪些，下面就是實戰案例，一起來看一下。

前端生態這幾年可謂迎來了大發展，在這個生態圈內，不接受新事物學習新技能，等於墮入魔道。

本文嘗試對前端開發利器React，以及建置專案過程中涉及的技術堆疊進行介紹，以期開啟整個建置流程上的思考。

有必要指出的是，要弄清楚一件事情的原理，首先要知道它的目的是什麼。

1、Nodejs & NPM

為什麼要提nodejs呢？

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

這裡有必要來講一講NPM（node package manager）這個套件管理器。

npm是javascript套件管理器，我們可以在npm上找到、分享和使用來自無數開發者貢獻的程式碼包，而無需自己造輪子。

使用npm，需要安裝node。新的版本的nodejs已經整合了npm，安裝好nodejs，透過以下指令查看所安裝的版本：

$ npm -v

在專案目錄內，當在命令列執行

$ npm install

它會識別一個叫做package.json的文件，並嘗試安裝該文件內配置的依賴套件。

2、React

# React的組成化想法使得程式碼重用性高，易於測試、更容易分離關注點（separation of concerns）。

React也宣稱Learn Once, Write Anywhere。既可運行在客戶端瀏覽器，又能在服務端渲染，同時React Native也使得React開發原生app成為可能。

第一步：新建一個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套件管理器的必要文件，定義了該專案的名稱、版本、啟動命令、生產環境依賴套件（dependencies）和開發環境依賴套件（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>
 <p id="yunmo"></p>
 <script src="bundle.js"></script>
 </body>
</html>

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

var React = require('react');
var ReactDOM = require('react-dom');
var element = React.createElement(
 'h1',
 {className: 'yunmo'},
 '云陌，欢迎来到react的世界！'
 );
ReactDOM.render (
 element,
 document.getElementById('yunmo')
);

第四步：運行。

那麼如何在瀏覽器裡運作呢？這裡我們需要藉助強大的webpack-dev-server來開啟本機伺服器。

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

當然我們也可以透過nodejs來建立一個本機伺服器，但這裡其實webpack-dev-server是一個小型的nodejs Express伺服器，它使用webpack-dev-middleware中間件來服務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

執行服務後，在瀏覽器中輸入http://localhost:8080/

一個簡單的React專案便運行起來了。

3、Webpack

# webpack是一款現代JavaScript應用的模組載入兼打包工具，它不只可以打包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配置裡面可以看出來有一些基本的設定點，也反映了webpack的四個概念：

entry－webpack會根據應用程式的依賴關係，建立一個關係表。表格的起始點便是所謂的entry point（入口點）。 entry point會告訴webpack從哪入手，webpack會以該表的依賴關係作為打包依據。
output－用於配置打包後的檔案放置路徑。
loader——webpack把每個檔案都看成組成（如.css, .html, .scss, .jpg, .png等），但webpack只能辨識JavaScript。這時候loaders便可以把這些檔案轉換成組建，進而被加入到依賴關係表。
plugins——因为loaders作用方式是以单一文件为基础的，所以plugins更广泛的用来对打包组建形成的集合（compilations）进行自定义操作。

这样，一个完整的模块打包体系就建立起来了。

4、ES6

ES6，即ECMAScript 6.0，是 JavaScript的下一代标准。ES6里面新增了很多语法特性，使得编写复杂的应用更加优雅自然。

ES6中引入了诸如let和const、箭头函数、解构赋值、字符串模版、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  //解构赋值
  let greetings = null  //let定义变量
  if (name) {
   greetings = `${name},欢迎来到${mainSkills[0]}的世界！` //字符模版
  }
  //以下用了箭头函数
  return (
   <p className="skills">
    <p>{greetings}</p>
    <ol>
     {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
    </ol>
   </p>
  )
 }
}
export default ReactStack  //模块导出

当然，并非所有浏览器都能兼容ES6全部特性，但看到这么优雅的书写方式，只能看怎么行呢？因此，这里又引出了一个神器，Babel！

5、Babel

Babel是一款JavaScript编译器。

Babel可以将ES6语法的代码转码成ES5代码，从而在浏览器环境中实现兼容。

Babel内置了对JSX的支持，所以我们才能向上面那样直接return一个JSX形式的代码片段。

具体用法不在本文过多讲述。

6、Styles引入

在上面的代码中，有以下样式引入方式：

import '../styles/reactStack.scss'

样式文件如下：

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

样式文件要在项目中起作用，还需要在package.json里面添加相应的loader依赖，如css-loader, sass-loader, style-loader等，别忘了package.json里还需要node-sass依赖，然后安装即可。

webpack.config.js中相应配置如下：

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

再将main.js中的内容作如下更改：

import React from 'react'
import ReactDOM from 'react-dom'
import ReactStack from './pages/ReactStack'
ReactDOM.render (
 <ReactStack />,
 document.getElementById('yunmo')
);

结语

至此，一个简单的React项目便搭建起来了。

在后续的文章中，我将对本文涉及到的React技术栈做专门的讲解，不仅限于硬性技能。当然更多的是实践做法上的总结，因为如果要掌握它们的理论，细看官方文档和源码是最好不过的做法。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

搭建React環境教學

相關文章