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 reactApp

Um 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 init

Dieser 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 --save

Oder Sie können alle in einem einzigen Befehl installieren als -

C:\Users\username\Desktop\reactApp>npm install react react-dom --save

Schritt 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 --save

Oder Sie können alle in einem einzigen Befehl installieren als -

C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

Schritt 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-dev

Oder 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-dev

Schritt 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 > .babelrc

Schritt 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 start

Es 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 build

Dadurch 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-app

Dadurch 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)? y

Schritt 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.js

Fü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