Tutorial zum Einrichten einer React-Umgebung-js-Tutorial-php.cn

Dieses Mal bringe ich Ihnen ein Tutorial zum Aufbau einer React-Umgebung. Was sind die Vorsichtsmaßnahmen für den Aufbau einer React-Umgebung?

Die Front-End-Ökologie hat in den letzten Jahren eine große Entwicklung erlebt. Neue Dinge nicht zu akzeptieren und neue Fähigkeiten zu erlernen, ist gleichbedeutend damit, auf den Weg des Teufels zu geraten.

In diesem Artikel wird versucht, React, das Front-End-Entwicklungstool, und den beim Aufbau des Projekts beteiligten Technologie-Stack vorzustellen, um über den gesamten Bauprozess nachzudenken.

Es muss darauf hingewiesen werden, dass man, um das Prinzip einer Sache zu verstehen, zunächst wissen muss, welchen Zweck sie hat.

1. Nodejs & NPM

Warum NodeJS erwähnen?

Anstatt zu sagen, dass NodeJS eine weitere Möglichkeit für die serverseitige Entwicklung bietet, ist es besser zu sagen, dass es das gesamte Front-End-Entwicklungsökosystem völlig verändert hat. Die NodeJS-Plattform hat leistungsstarke npm, grunt, express usw. abgeleitet, die den Front-End-Workflow und die Entwicklungsmethoden nahezu neu definiert haben.

Hier muss über den NPM-Paketmanager (Node Package Manager) gesprochen werden.

npm ist ein Javascript-Paketmanager, den wir von unzähligen Entwicklern auf npm finden, teilen und nutzen können, ohne das Rad selbst neu erfinden zu müssen.

Um npm verwenden zu können, muss der Knoten installiert sein. Die neue Version von nodejs hat npm integriert. Überprüfen Sie nach der Installation von nodejs die installierte Version mit dem folgenden Befehl:

$ npm -v

Nach dem Login kopieren

Im Projektverzeichnis, wenn

$ npm install

Nach dem Login kopieren

in der Befehlszeile ausgeführt wird Es wird eine Datei namens package.json identifizieren und versuchen, die in der Datei konfigurierten abhängigen Pakete zu installieren.

2. Reagieren

Das organisatorische Denken von React macht Code hochgradig wiederverwendbar, einfach zu testen und einfacher zu trennen.

React behauptet außerdem: „Learn Once, Write Anywhere“. Es kann im Client-Browser ausgeführt und auf dem Server gerendert werden. Gleichzeitig ermöglicht React Native auch die Entwicklung nativer Apps mit React.

Schritt eins: Erstellen Sie eine package.json-Datei und geben Sie die für das Projekt erforderlichen Abhängigkeitspakete an.

{
 "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": ""
}

Nach dem Login kopieren

Dies ist eine notwendige Datei für den npm-Paketmanager, die den Namen, die Version, den Startbefehl, die Produktionsumgebungsabhängigkeiten (Dependences) und die Entwicklungsumgebungsabhängigkeiten (DevDependencies) des Projekts definiert.

Schritt 2: Erstellen Sie eine neue index.html-Datei.

<!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>

Nach dem Login kopieren

Schritt 3: Schreiben Sie einen einfachen React-Code.

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

Nach dem Login kopieren

Schritt 4: Ausführen.

Wie führt man es also im Browser aus? Hier müssen wir den leistungsstarken Webpack-Dev-Server verwenden, um den lokalen Server zu starten.

Wir können sehen, dass die Datei package.json oben die Abhängigkeitspakete webpack und webpack-dev-server enthält. Webpack wird im Folgenden vorgestellt.

Natürlich können wir auch einen lokalen Server über NodeJS erstellen, aber hier ist Webpack-Dev-Server tatsächlich ein kleiner NodeJS-Express-Server, der Webpack-Dev-Middleware-Middleware verwendet, um Webpack-Pakete bereitzustellen.

Die Datei webpack.config.js ist wie folgt konfiguriert:

var webpack = require('webpack');
module.exports = {
 entry: ['./app/main.js'],
 output: {
  path: dirname + '/build',
  filename: 'bundle.js'
 },
 module: {
  loaders: []
 }
}

Nach dem Login kopieren

Geben Sie auf diese Weise den Befehl

$ npm start

Nach dem Login kopieren

ein, nachdem wir das Abhängigkeitspaket über npm install in der Befehlszeile installiert haben Geben Sie nach dem Ausführen des Dienstes http://localhost:8080/

in den Browser ein Es läuft ein einfaches React-Projekt.

3. Webpack

Webpack ist ein Tool zum Laden und Packen von Modulen für moderne JavaScript-Anwendungen. Es kann nicht nur JavaScript, sondern auch Stile, Bilder und andere Ressourcen packen.

Schauen wir uns eine typische Webpack-Konfiguration an:

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()
 ]
}

Nach dem Login kopieren

Aus der obigen Webpack-Konfiguration können wir ersehen, dass es einige grundlegende Konfigurationspunkte gibt, die auch die vier Konzepte von Webpack widerspiegeln:

Eintrag – Webpack erstellt eine Beziehungstabelle basierend auf den Abhängigkeiten der Anwendung. Der Ausgangspunkt der Tabelle ist der sogenannte Einstiegspunkt. Der Einstiegspunkt teilt Webpack mit, wo es beginnen soll, und Webpack verwendet die Abhängigkeiten der Tabelle als Grundlage für die Verpackung.
Ausgabe – wird zum Konfigurieren des Platzierungspfads für gepackte Dateien verwendet.
Loader – Webpack behandelt jede Datei als Komponente (wie .css, .html, .scss, .jpg, .png usw.), aber Webpack kann nur JavaScript erkennen. Zu diesem Zeitpunkt können Loader diese Dateien in Komponenten konvertieren und dann der Abhängigkeitstabelle hinzufügen.
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  //模块导出

Nach dem Login kopieren

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

5、Babel

Babel是一款JavaScript编译器。

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

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

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

6、Styles引入

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

import '../styles/reactStack.scss'

Nach dem Login kopieren

样式文件如下：

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;
   }
  }
 }
}

Nach dem Login kopieren

样式文件要在项目中起作用，还需要在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"]
  }
 ]
}

Nach dem Login kopieren

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

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

Nach dem Login kopieren

结语

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

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

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