ReactJS - Umgebung einrichten
In diesem Kapitel zeigen wir Ihnen, wie Sie eine Umgebung für eine erfolgreiche React-Entwicklung einrichten. Beachten Sie, dass viele Schritte erforderlich sind, dies jedoch dazu beiträgt, den Entwicklungsprozess später zu beschleunigen. Wir brauchenNodeJSWenn Sie es also nicht installiert haben, überprüfen Sie den Link aus der folgenden Tabelle.
| Sr.Nr. | Software & Beschreibung |
|---|---|
| 1 | NodeJS and NPM NodeJS ist die Plattform, die für die ReactJS-Entwicklung benötigt wird. Testen Sie unser NodeJS-Umgebungssetup . |
Nach der erfolgreichen Installation von NodeJS können wir React darauf mit npm installieren. Sie können ReactJS auf zwei Arten installieren
Mit Webpack und Babel.
Verwendung der create-react-app Befehl.
ReactJS mit Webpack und Babel installieren
Webpackist ein Modulbündler (verwaltet und lädt unabhängige Module). Es nimmt abhängige Module und kompiliert sie zu einem einzigen (Datei-) Bundle. Sie können dieses Bundle beim Entwickeln von Apps über die Befehlszeile oder durch Konfigurieren mit der Datei webpack.config verwenden.
Babel ist ein JavaScript-Compiler und -Transpiler. Es wird verwendet, um einen Quellcode in einen anderen zu konvertieren. Auf diese Weise können Sie die neuen ES6-Funktionen in Ihrem Code verwenden, wobei babel sie in einfaches altes ES5 konvertiert, das in allen Browsern ausgeführt werden kann.
Schritt 1 - Erstellen Sie den Stammordner
Erstellen Sie einen Ordner mit Namen reactApp auf dem Desktop, um alle erforderlichen Dateien mit dem Befehl mkdir zu installieren.
C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactAppUm ein Modul zu erstellen, muss das generiert werden package.jsonDatei. Daher müssen wir nach dem Erstellen des Ordners einen erstellenpackage.jsonDatei. Dazu müssen Sie das ausführennpm init Befehl an der Eingabeaufforderung.
C:\Users\username\Desktop\reactApp>npm initDieser Befehl fragt nach Informationen zum Modul wie Paketname, Beschreibung, Autor usw. Sie können diese mit der Option –y überspringen.
C:\Users\username\Desktop\reactApp>npm init -y
Wrote to 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"
}Schritt 2 - Installieren Reagieren und Dom reagieren
Da unsere Hauptaufgabe darin besteht, ReactJS zu installieren, installieren Sie es und seine dom-Pakete mit install react und react-domBefehle von npm jeweils. Sie können die von uns installierten Pakete hinzufügenpackage.json Datei mit der --save Möglichkeit.
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --saveOder Sie können alle in einem einzigen Befehl installieren als -
C:\Users\username\Desktop\reactApp>npm install react react-dom --saveSchritt 3 - Installieren Sie das Webpack
Da wir Webpack verwenden, um Bundler zu generieren, installieren Sie Webpack, Webpack-Dev-Server und Webpack-Cli.
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server --save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --saveOder Sie können alle in einem einzigen Befehl installieren als -
C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --saveSchritt 4 - Babel installieren
Installieren Sie babel und seine Plugins babel-core, babel-loader, babel-preset-env, babel-preset-react und das HTML-Webpack-Plugin
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react --save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin --save-devOder Sie können alle in einem einzigen Befehl installieren als -
C:\Users\username\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env
babel-preset-react html-webpack-plugin --save-devSchritt 5 - Erstellen Sie die Dateien
Um die Installation abzuschließen, müssen wir bestimmte Dateien erstellen, nämlich index.html, App.js, main.js, webpack.config.js und ,.babelrc. Sie können diese Dateien manuell oder mithilfe von erstellencommand prompt.
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 > .babelrcSchritt 6 - Compiler, Server und Loader einstellen
Öffnen webpack-config.jsDatei und fügen Sie den folgenden Code hinzu. Wir setzen den Webpack-Einstiegspunkt auf main.js. Der Ausgabepfad ist der Ort, an dem die gebündelte App bereitgestellt wird. Wir setzen auch den Entwicklungsserver auf8001Hafen. Sie können einen beliebigen Port auswählen.
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'
})
]
}Öffne das package.json und löschen "test" "echo \"Error: no test specified\" && exit 1" Innerhalb "scripts"Objekt. Wir löschen diese Zeile, da wir in diesem Tutorial keine Tests durchführen werden. Fügen wir das hinzustart und build Befehle stattdessen.
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"Schritt 7 - index.html
Dies ist nur normales HTML. Wir setzendiv id = "app" als Wurzelelement für unsere App und Hinzufügen index_bundle.js Skript, das unsere gebündelte App-Datei ist.
<!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>Schritt 8 - App.jsx und main.js
Dies ist die erste React-Komponente. In einem nachfolgenden Kapitel werden wir die Komponenten von React ausführlich erläutern. Diese Komponente wird gerendertHello 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 diese Komponente importieren und in unser Stammverzeichnis rendern App Element, damit wir es 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'));Note - Wann immer Sie etwas verwenden möchten, müssen Sie importes zuerst. Wenn Sie die Komponente in anderen Teilen der App verwenden möchten, müssen Sie dies tunexport es nach der Erstellung und importieren Sie es in die Datei, in der Sie es verwenden möchten.
Erstellen Sie eine Datei mit Namen .babelrc und kopieren Sie den folgenden Inhalt darauf.
{
"presets":["env", "react"]
}Schritt 9 - Ausführen des Servers
Das Setup ist abgeschlossen und wir können den Server starten, indem wir den folgenden Befehl ausführen.
C:\Users\username\Desktop\reactApp>npm startEs wird der Port angezeigt, den wir zum Öffnen im Browser benötigen. In unserem Fall ist eshttp://localhost:8001/. Nachdem wir es geöffnet haben, sehen wir die folgende Ausgabe.
Schritt 10 - Generieren des Bundles
Um das Bundle zu generieren, müssen Sie den Befehl build in der Eingabeaufforderung wie folgt ausführen:
C:\Users\Tutorialspoint\Desktop\reactApp>npm run buildDadurch wird das Bundle im aktuellen Ordner wie unten gezeigt generiert.
Verwenden des Befehls create-react-app
Anstatt Webpack und Babel zu verwenden, können Sie ReactJS einfacher installieren, indem Sie es installieren create-react-app.
Schritt 1 - Installieren Sie die Create-React-App
Durchsuchen Sie den Desktop und installieren Sie die Create React App mithilfe der Eingabeaufforderung wie unten gezeigt -
C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-appDadurch wird ein Ordner mit dem Namen my-app auf dem Desktop erstellt und alle erforderlichen Dateien darin installiert.
Schritt 2 - Löschen Sie alle Quelldateien
Durchsuchen Sie den src-Ordner im generierten my-app-Ordner und entfernen Sie alle darin enthaltenen Dateien wie unten gezeigt -
C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? ySchritt 3 - Dateien hinzufügen
Fügen Sie Dateien mit Namen hinzu index.css und index.js im src ordner als -
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.jsFügen Sie in der Datei index.js den folgenden Code hinzu
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';Schritt 4 - Führen Sie das Projekt aus
Führen Sie das Projekt abschließend mit dem Befehl start aus.
npm start