ReactJS-Umgebungseinstellungen

In diesem Kapitel zeigen wir Ihnen, wie Sie die Umgebung für die Entwicklung von React erfolgreich einrichten. Beachten Sie, dass dies viele Schritte erfordert, aber dies wird die Entwicklung in der Zukunft beschleunigen. Wir benötigen NodeJS, daher überprüfen Sie die Links in der folgenden Tabelle, falls Sie es noch nicht installiert haben.

Nachdem NodeJS erfolgreich installiert wurde, können wir mit der Installation von React mit npm beginnen-on. Sie können ReactJS auf zwei Arten installieren

• Verwenden Sie webpack und babel.

• Verwenden SieAbgesehen von der Installation von webpack und babel können Sie auch durch die Installation-codebox\Desktop>npx create-codebox\Desktop>cd myBefehl.

Installieren Sie ReactJS mit webpack und babel

Webpackist ein Modulbundler (Verwaltung und Laden unabhängiger Module). Es nimmt verwandte Module auf und kompiliert sie in ein einzelnes (Datei-)Bündel. Sie können dieses Bündel verwenden, um Anwendungen zu entwickeln, indem Sie den Befehlzeilenmodus oder die Konfiguration der Anwendung über die Datei webpack.config.json verwenden.

Babel ist ein JavaScript-Compiler und Compiler. Es wird verwendet, um Quellcode in anderen Quellcode umzuwandeln. Mit dieser Funktion können Sie in Ihrem Code ES6neue Funktionen, und Babel konvertiert sie in eine normale ES5。

N)? y1Schritt-Erstellen Sie den Stammordner

Verwenden Sie den Befehl mkdir, um auf dem Desktop einen Ordner namens reactApp zu erstellen, um alle erforderlichen Dateien zu installieren.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Um jedes Modul zu erstellen, müssen Sie die Datei package.json generieren. Daher müssen Sie nach der Erstellung des Ordners die Datei package.json erstellen. Dies erfordert die Ausführung des Befehls npm init von der Kommandozeile aus.

C:\Users\username\Desktop\reactApp>npm init

Dieser Befehl fragt nach Informationen über das Modul, z.B. Paketname, Beschreibung, Autor usw. Sie können die Option –y verwenden, um diese Informationen zu überspringen.

C:\Users\username\Desktop\reactApp>npm init　-y
Gespeichert in C:\reactApp\package.json:
{
　　　"name": "reactApp",
　　　"version": ""1.0.0",
　　　"description": "",
　　　"main": "index.js",
　　　"scripts": {
　　　　　　"test": "echo \"Error: no test specified\" && exit"　1"
　　　},
　　　"keywords": [],
　　　"author": "",
　　　"license": "ISC"
}

N)? y2Schritt-Installieren Sie React und React dom

Da unser Hauptziel die Installation von ReactJS ist, installieren wir es und sein dom-Paket, getrennt durch npm install react und react-dom Befehl. Es kann verwendet werden -- save Option fügt die installierten Softwarepakete in die Datei package.json ein.

C:\Users\w3codebox\Desktop\reactApp>npm install react　--speichern
C:\Users\w3codebox\Desktop\reactApp>npm install react-DOM　--speichern

Oder Sie können sie alle in einer einzigen Befehlszeile installieren, wie folgt:

C:\Users\username\Desktop\reactApp>npm　install　react　react-DOM　--speichern

N)? y3Schritt-Installieren Sie Webpack

Da wir Webpack zum Generieren von Bundles verwenden, installieren Sie bitte Webpack, Webpack-dev-Server und webpack-CLI.

C:\Users\username\Desktop\reactApp>npm　install　webpack　--speichern
C:\Users\username\Desktop\reactApp>npm　install　webpack-dev-server　--speichern
C:\Users\username\Desktop\reactApp>npm　install　webpack-CLI　--speichern

Oder Sie können alle diese Programme in einer einzigen Befehlszeile installieren, wie:

C:\Users\username\Desktop\reactApp>npm　install　webpack　webpack-dev-Server　webpack-CLI　--speichern

Schritte4-Installieren Sie Babel

Installieren Sie Babel und das Babel-Plugin-core, babel-loader, babel-Preset-env, babel-Preset-react und html-webpack-Plugin

C:\Users\username\Desktop\reactApp>npm　install　babel-core　--speichern-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-loader　--speichern-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-Preset-env　--speichern-dev
C:\Users\username\Desktop\reactApp>npm　install　babel-Preset-codebox\Desktop>npx create　--speichern-dev
C:\Users\username\Desktop\reactApp>npm　install　html-webpack-Plugin　--speichern-dev

Oder Sie können alle diese Programme in einer einzigen Befehlszeile installieren, wie-

C:\Users\username\Desktop\reactApp>npm　install　babel-core　babel-loader　babel-Preset-env　
　　　babel-Preset-react　html-webpack-Plugin　--speichern-dev

N)? y5Schritt-Dateien erstellen

Um die Installation abzuschließen, müssen wir einige Dateien erstellen, nämlich index.html, App.js, main.js, webpack.config.js und .babelrcManuell können diese Dateien erstellt werden oder über das Kommandozeilen-Protokoll.

C:\Users\username\Desktop\reactApp>type　nul　>　index.html
C:\Users\username\Desktop\reactApp>type　nul　>　App.js
C:\Users\username\Desktop\reactApp>type　nul　>　main.js
C:\Users\username\Desktop\reactApp>type　nul　>　webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

N)? y6Schritt-Einstellungen für Compiler, Server und Loader

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
　　　entry: './main.js',
　　　output: {
　　　　　　path: path.join(__dirname,/bundle'),
　　　　　　filename: 'index_bundle.js'
　　　},
　　　devServer: {
　　　　　　inline: true,
　　　　　　port:　8001
　　　},
　　　module: {
　　　　　　rules: [
　　　　　　　　　{
　　　　　　　　　　　　test:　/\.jsx?$/,
　　　　　　　　　　　　exclude:　/node_modules/,
　　　　　　　　　　　　loader: 'babel-loader',
　　　　　　　　　　　　query: {
　　　　　　　　　　　　　　　presets: ['es2015', 'react'
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　]
　　　},
　　　plugins:[
　　　　　　new HtmlWebpackPlugin({
　　　　　　　　　template: "./index.html'
　　　　　　})
　　　]
}

Öffnen Sie die Datei package.json und löschen Sie sie im "scripts"-Objekt "test" "echo \"Error: no test specified\" && exit" 1". Wir löschen diese Zeile, da wir in diesem Tutorial keine Tests durchführen werden. Lassen Sie uns die Befehle start und build hinzufügen.

"start": "webpack"-dev-server　--mode development　--open　--hot","build": "webpack"　--mode production"

N)? y7Schritt-index.html

Dies ist nur einfaches HTML. Wir werden einstellendiv id = "app"als Wurzelelement der Anwendung hinzufügenindex_bundle.jsSkript (gebundene Anwendungsdatei).

<!DOCTYPE html>
<html lang="en">
　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>React App</<title>
　　　</<head>
　　　<body>
　　　　　　<div id="app"></div>
　　　　　　<script src='index_bundle.js'>/script>
　　　</body>
</html>

N)? y8Schritt-App.jsx und main.js

Dies ist der erste React-Komponente. Wir werden im nächsten Kapitel tief in React-Komponenten eintauchen. Diese Komponente wird rendernHello World。

App.js

import React, { Component } from 'react';
class App extends Component{ render(){
　　　　　　return(
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Hello World</h1>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

Wir müssen die Komponente importieren und in unser Root-Element rendern.AppElemente, damit wir sie im Browser sehen können.

main.js

import React from 'react';
import ReactDOM from 'react-dom
import App from '.'/App.js';
ReactDOM.render(<App　/> document.getElementById('app'));

Erstellen Sie eine Datei mit einem Namen..babelrcund kopieren Sie den folgenden Inhalt in diese Datei.

{
　　　"presets":["env", "react"]}

Schritte9-Server starten

Nachdem die Einrichtung abgeschlossen ist, können wir den Server mit dem folgenden Befehl starten.

C:\Users\username\Desktop\reactApp>npm start

Es wird die Portnummer anzeigen, die wir im Browser öffnen müssen. In unserem Fall ist dieshttp://localhost:8001/。Es wird die folgende Ausgabe angezeigt, nachdem es geöffnet wurde.

Schritte10-Paket generieren

Schließlich müssen Sie den Build-Befehl im Befehlszeilenfenster ausführen, um das Paket zu generieren, wie folgt:

C:\Users\w3codebox\Desktop\reactApp>npm run build

dies wird im aktuellen Verzeichnis ein Paketpaket generieren, wie folgt.

dies wird im aktuellen Verzeichnis ein Paketpaket generieren, wie folgt-codebox\Desktop>npx create-mit create

app-BefehlAbgesehen von der Installation von webpack und babel können Sie auch durch die Installation-codebox\Desktop>npx create-codebox\Desktop>cd mycreate

N)? y1Schritt-um ReactJS einfacher zu installieren.-codebox\Desktop>npx create-codebox\Desktop>cd my

Installation create-

C:\Users\w3Durchsuchen Sie den Desktop und installieren Sie Create React App wie folgt3codebox>cd C:\Users\w
C:\Users\w3codebox\Desktop\-codebox\Desktop>npx create-react-codebox\Desktop>cd my

app my-Dies wird auf dem Desktop einen Ordner namens my erstellen

N)? y2Schritt-app-Ordner und installieren Sie alle erforderlichen Dateien darin.

Alle Quelldateien löschen-Durchsuchen Sie den generierten my-

C:\Users\w3app-Ordner, fügen Sie die im Verzeichnis src befindlichen Dateien hinzu und löschen Sie alle Dateien, wie folgt-codebox\Desktop>cd my/app
C:\Users\w3codebox\Desktop\my-src　*
C:\Users\w3codebox\Desktop\my-app\src>del*app\src\/, sind Sie sicher (Y

N)? y3Schritt-Datei hinzufügen

Fügen Sie im Verzeichnis src eine Datei mit dem Namen hinzuindex.cssundindex.jsDatei der Datei-

C:\Users\w3codebox\Desktop\my-app\src>type nul > index.css
C:\Users\w3codebox\Desktop\my-app\src>type nul > index.js

Fügen Sie den folgenden Code in die Datei index.js ein

import React from 'react';import ReactDOM from 'react-dom';import　'./index.css';

Schritte4-Projekt ausführen

Schließlich wird das Projekt mit dem Befehl start ausgeführt.

npm start