React Js Environment Setup

Question

Ich bin neu zu reagieren js und ich versuche, die Umgebung dafür einzurichten, und ich befolgte die Schritte in https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm erwähnt.

Aber nach all die Dinge, die dort erwähnt erhalte ich diese Fehlermeldung:

'webpack-dev-server' is not recognized as an internal or external command, operable program or batch file

Answer 1

Run:

npm install webpack-dev-server --save-dev 

Und versuchen Sie es erneut. Sie haben den Fehler erhalten, weil webpack-dev-server nicht in Ihren devDependencies innerhalb Ihrer package.json Datei gefunden wurde

Answer 2

Dies passiert, weil Sie webpack-dev-server nicht als globales Paket installiert haben, weshalb Sie ausführen können direkt.

Die empfohlene Methode ist die lokale Installation. Auf diese Weise vermeiden Sie dieses Problem.

Here Sie können die Schritte finden, um es auszuführen.

Viel Glück

Answer 3

Wenn Sie eine Anwendung mit babel entwickeln wollen, webpack, etc. Sie müssen folgende Schritte befolgen. Kein Zweifel, es gibt viel besseres Tutorial über das Internet, aber es wird Ihnen eine Idee geben.

1.Webpack:

In Browsern, kann man nicht require oder import Module, wie Sie in der Regel tun, während node.js Code zu schreiben. Mit Hilfe eines Modulbündlers, vielleicht Webpack, können Sie Code, der require/import verwendet, auf dieselbe Weise schreiben, wie Sie ihn in einer Knotenumgebung verwenden würden. Ich nehme an, dass Sie webpack angesichts seiner Popularität verwenden werden.

2. Installieren Abhängigkeiten (es6)

Diese sind minimal Abhängigkeiten Sie in Ihrem Projekt benötigen (package.json) es zum Laufen zu bringen. Sie können den folgenden Text direkt kopieren und in eine neue Datei namens "package.json" einfügen. Führen Sie den folgenden Satz von Befehlen in Ihnen LEER Projektverzeichnis:

1. installieren die Knoten Paket-Manager

   npm init [follow the command prompt to fill in meta data of your project like name, author,etc.]

2. globale Pakete

   npm install -g babel babel-cli [this will install transpiler(babel) into your global environment]

3. installieren Modul bundler installieren

   npm install webpack webpack-dev-server --save

4. installieren babel Plugins

   npm install babel-core babel-loader babel-preset-react babel-preset-es2015

Nach diesem Befehlssatz, Ihr Paket.json wird aussehen wie beginnen, wie folgend:

{ 
    "name": "reactjs", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "No Command Written Yet" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "webpack": "^3.4.1", 
    "webpack-dev-server": "^2.6.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.25.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1" 
    } 
} 

3.Write Ihre webpack-Datei config.js

Eine Probe webpack Konfigurationsdatei dieses mögen sollte. Frag mich nicht über jedes einzelne Stück, sondern schaue einfach auf webpack Tutorial, weil ich hier nicht alles erklären kann. Denken Sie nur daran, dass Webpack ein Modulbündler ist, der javascript und andere Assets für den Browser bündelt.

var config = { 
    entry: './main.js', 

    output: { 
     path:'/', 
     filename: 'index.js', 
    }, 

    devServer: { 
     inline: true, 
     port: 8080 
    }, 

    module: { 
     loaders: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 

      query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
     ] 
    } 
} 

module.exports = Konfig;

4.Set up Einstiegspunkt für Ihre Anwendung

src-> index.js

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(
    <App /> 
    , document.querySelector('.init') 
); 

5.Setup index.html in Ihrem Projekt Wurzel

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title>Welcome to ReactJs</title> 
    </head> 
    <body> 
    <div class="init"></div> 
    </body> 
    <script src="./public/bundle.js"></script> 
</html> 

Eine leichte Veränderung 6.Running ist in Ihrem package.json benötigt ersetzen:

"scripts": { 
    "test": "No Command Written Yet" 
    }, 

mit

"scripts": { 
     "dev": "webpack-dev-server --hot" 
     }, 

[dies wird das Skript ändern Sie läuft das auszuführen app gebündelt von webpack]

Jetzt, wann immer Sie das Projekt ausführen möchten, nur in das Projekt ro ot Verzeichnis und Anruf:

npm run dev

FERTIG, viel Spaß!