React
Boilerplate reagieren [Reagieren + Babel + Webpack]

Projekt einrichten

Sie benötigen Node Package Manager, um die Projektabhängigkeiten zu installieren. Laden Sie den Knoten für Ihr Betriebssystem von Nodejs.org herunter . Node Package Manager wird mit Node geliefert.

Sie können den Knotenversions- Manager auch verwenden, um Ihre Knoten- und NPM-Versionen besser zu verwalten. Es eignet sich hervorragend zum Testen Ihres Projekts auf verschiedenen Knotenversionen. Es wird jedoch nicht für die Produktionsumgebung empfohlen.

Wenn Sie Node auf Ihrem System installiert haben, installieren Sie einige wichtige Pakete, um Ihr erstes React-Projekt mit Babel und Webpack zu starten.

Bevor wir tatsächlich anfangen, Befehle im Terminal zu treffen. Schauen Sie sich an, wofür Babel und Webpack verwendet werden.

Sie können Ihr Projekt starten, indem Sie npm init in Ihrem Terminal npm init . Folgen Sie der Ersteinrichtung. Führen Sie danach die folgenden Befehle in Ihrem Terminal aus:

Abhängigkeiten:

npm install react react-dom --save

Dev Dependecies:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev

Optionale Entwicklungsabhängigkeiten:

npm install eslint eslint-plugin-react babel-eslint --save-dev

Sie können sich auf dieses Beispiel package.json beziehen

Erstellen Sie .babelrc in Ihrem Projektstamm mit folgendem Inhalt:

{
  "presets": ["es2015", "stage-0", "react"]
}

Erstellen .eslintrc optional .eslintrc in Ihrem Projektstamm mit folgendem Inhalt:

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
  },
  "plugins": [
    "react"
  ]
}

Erstellen Sie eine .gitignore Datei, um das Hochladen generierter Dateien in Ihr git-Repo zu verhindern.

node_modules
npm-debug.log
.DS_Store
dist

Erstellen webpack.config.js Datei webpack.config.js mit den folgenden Mindestinhalten.

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Erstellen sever.js schließlich eine sever.js Datei, um npm start mit folgendem Inhalt sever.js zu können:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Serving your awesome project at http://localhost:3000/');
});

Erstellen src/app.js Datei " src/app.js ", damit Ihr React-Projekt etwas src/app.js .

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world.</h1>
    );
  }
}

Führen Sie den node server.js oder npm start im Terminal aus, wenn Sie definiert haben, wofür start in package.json

Reaktiv-Starter-Projekt

Über dieses Projekt

Dies ist ein einfaches Boilerplate-Projekt. In diesem Beitrag erfahren Sie, wie Sie die Umgebung für ReactJs + Webpack + Bable einrichten.

Lass uns anfangen

Wir benötigen einen Knotenpaket-Manager, um den Express-Server hochzufahren und die Abhängigkeiten im gesamten Projekt zu verwalten. Wenn Sie mit Node Package Manager noch nicht vertraut sind, können Sie hier nachsehen. Hinweis: Die Installation des Knotenpaket-Managers ist hier erforderlich.

Erstellen Sie einen Ordner mit einem geeigneten Namen, und navigieren Sie vom Terminal oder über die GUI in diesen Ordner. Gehen Sie dann zum Terminal und geben Sie npm init Dies erstellt eine package.json-Datei. Nothing scary. Beschreibung, Einstiegspunkt, Git-Repository, Autor, Lizenz usw. Hier ist der Einstiegspunkt wichtig, da der Knoten beim Ausführen des Projekts zunächst danach sucht. Am Ende werden Sie aufgefordert, die von Ihnen bereitgestellten Informationen zu überprüfen. Sie können Ja eingeben oder ändern. Nun ist es soweit , unsere package.json- Datei ist fertig.

Express-Server-Setup npm install express @ 4 --save ausführen . Dies sind alle Abhängigkeiten, die wir für dieses Projekt benötigen. Hier ist das Save-Flag wichtig, ohne dass die package.js- Datei nicht aktualisiert wird. Die Hauptaufgabe von package.json ist das Speichern von Abhängigkeiten. Es wird die Expressversion 4 hinzugefügt. Ihr package.json wird wie "dependencies": { "express": "^4.13.4", ............. }, aussehen "dependencies": { "express": "^4.13.4", ............. },

Nach dem vollständigen Download sehen Sie den Ordner node_modules und den Unterordner unserer Abhängigkeiten. Erstellen Sie nun im Stammverzeichnis des Projekts eine neue Datei server.js . Jetzt setzen wir den Express-Server. Ich werde den gesamten Code übergehen und es später erklären.

var express = require('express');
// Create our app
var app = express();

app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is using port:3000');
});

var express = erfordern ('express'); Dadurch erhalten Sie Zugriff auf die gesamte Express-API.

var app = express (); ruft die Express Library als Funktion auf. app.use (); Lassen Sie die Funktionalität Ihrer Express-Anwendung hinzufügen. app.use (express.static ('public')); gibt den Ordnernamen an, der auf unserem Webserver verfügbar gemacht wird. app.listen (port, function () {}) wird hier 3000 sein, und die von uns aufgerufene Funktion überprüft, ob der Web-Server ordnungsgemäß ausgeführt wird. Das ist es Express Server ist eingerichtet.

Gehen Sie nun zu unserem Projekt und erstellen Sie einen neuen öffentlichen Ordner und erstellen Sie die index.html- Datei. index.html ist die Standarddatei für Ihre Anwendung, und der Express-Server sucht nach dieser Datei. Die index.html ist eine einfache HTML-Datei, die aussieht

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
</head>

<body>
  <h1>hello World</h1>
</body>

</html>

Gehen Sie durch das Terminal zum Projektpfad und geben Sie node server.js ein . Dann sehen Sie * console.log ('Express Server verwendet Port: 3000'); *.

Gehen Sie zum Browser und geben Sie http: // localhost: 3000 in die Navigationsleiste ein. Sie sehen Hallo Welt .

Gehen Sie nun in den öffentlichen Ordner und erstellen Sie eine neue Datei app.jsx . JSX ist ein Präprozessor-Schritt, der JavaScript um XML-Syntax erweitert. Sie können React definitiv ohne JSX verwenden, aber JSX macht React um einiges eleganter. Hier ist der Beispielcode für app.jsx

ReactDOM.render(
  <h1>Hello World!!!</h1>,
  document.getElementById('app')
);

Gehen Sie nun zu index.html und ändern Sie den Code. Er sollte folgendermaßen aussehen

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23                                              /browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">                           </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js">    </script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

Damit sind Sie fertig, ich hoffe, Sie finden es einfach.