React
React Boilerplate [React + Babel + Webpack]

Project opzetten

U hebt Node Package Manager nodig om de projectafhankelijkheden te installeren. Download knooppunt voor uw besturingssysteem van Nodejs.org . Node Package Manager wordt geleverd met node.

U kunt Node Version Manager ook gebruiken om uw knooppunt- en npm-versies beter te beheren. Het is geweldig voor het testen van uw project op verschillende knooppuntversies. Het wordt echter niet aanbevolen voor de productieomgeving.

Nadat u het knooppunt op uw systeem hebt geïnstalleerd, installeert u een aantal essentiële pakketten om uw eerste React-project met Babel en Webpack af te blazen.

Voordat we daadwerkelijk opdrachten beginnen te geven in de terminal. Kijk waar Babel en Webpack voor worden gebruikt.

U kunt uw project starten door npm init in uw terminal uit te voeren. Volg de eerste installatie. Voer daarna de volgende opdrachten uit in uw terminal-

Bijgebouwen:

npm install react react-dom --save

Dev afhankelijkheden:

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

Optionele Dev-afhankelijkheden:

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

U kunt verwijzen naar dit voorbeeldpakket. Json

Maak .babelrc in uw project root met de volgende inhoud:

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

Maak optioneel .eslintrc in uw projectwortel met de volgende inhoud:

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

Maak een .gitignore bestand om te voorkomen dat gegenereerde bestanden naar je git repo worden geüpload.

node_modules
npm-debug.log
.DS_Store
dist

Maak een webpack.config.js bestand met de volgende minimale inhoud.

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')
    }]
  }
};

En tot slot, maak een sever.js bestand om npm start te kunnen uitvoeren, met de volgende inhoud:

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/');
});

Maak het bestand src/app.js om uw React-project iets te zien doen.

import React, { Component } from 'react';

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

Voer node server.js of npm start in de terminal, als u hebt gedefinieerd waar start staat in uw package.json

react-starter project

Over dit project

Dit is een eenvoudig boilerplate-project. Dit bericht helpt je bij het instellen van de omgeving voor ReactJs + Webpack + Bable.

Laten we beginnen

we hebben een node-pakketbeheerder nodig voor het opstarten van de express-server en het beheren van afhankelijkheden gedurende het hele project. als u nieuw bent bij node pakketbeheer, kunt u hier kijken . Opmerking: hier is het installeren van knooppuntpakketbeheer vereist.

Maak een map met de juiste naam en navigeer ernaar vanuit terminal of via GUI. Ga vervolgens naar terminal en typ npm init Dit maakt een pakket.json-bestand, Niets engs, het zal je een paar vragen stellen zoals de naam van je project, versie, beschrijving, entrypunt, git repository, auteur, licentie etc. Hier is entrypunt belangrijk omdat het knooppunt er in eerste instantie naar zal zoeken wanneer je het project uitvoert. Aan het einde wordt u gevraagd om de door u verstrekte informatie te verifiëren. U kunt ja typen of wijzigen. Nou dat is het dan, ons bestand package.json is klaar.

Express server setup draait npm install express @ 4 - opslaan . Dit zijn alle afhankelijkheden die we nodig hadden voor dit project. Hier is het opslaan van vlag belangrijk, zonder dat het pakket.js- bestand niet wordt bijgewerkt. Hoofdtaak van package.json is het opslaan van een lijst met afhankelijkheden. Het zal express versie 4 toevoegen. Uw package.json zal eruit zien als "dependencies": { "express": "^4.13.4", ............. },

Na de volledige download ziet u dat er een map node_modules en een submap van onze afhankelijkheden zijn. Maak nu in de root van het project een nieuw bestand server.js . Nu stellen we express server in. Ik ga alle code voorbij en leg het later uit.

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 = vereisen ('express'); dit geeft je de toegang tot hele express api.

var app = express (); roept express library aan als functie. app.use (); laat de functionaliteit toevoegen aan uw uitdrukkelijke toepassing. app.use (express.static ( 'public')); geeft de mapnaam op die op onze webserver wordt weergegeven. app.listen (port, function () {}) zal hier onze poort 3000 zijn en de functie die we aanroepen zal controleren of onze webserver correct werkt. Dat is het, express server is ingesteld.

Ga nu naar ons project en maak een nieuwe map openbaar en maak index.html bestand. index.html is het standaardbestand voor uw toepassing en de Express-server zal dit bestand zoeken. De index.html is een eenvoudig HTML-bestand dat eruitziet

<!DOCTYPE html>
<html>

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

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

</html>

En ga naar het projectpad door de terminal en typ node server.js . Vervolgens ziet u * console.log ('Express-server gebruikt poort: 3000'); *.

Ga naar de browser en typ http: // localhost: 3000 in de navigatiebalk. Je ziet hallo World .

Ga nu naar de openbare map en maak een nieuw bestand app.jsx . JSX is een preprocessorstap die XML-syntaxis aan uw JavaScript toevoegt. U kunt React zonder JSX zeker gebruiken, maar JSX maakt React een stuk eleganter. Hier is de voorbeeldcode voor app.jsx

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

Ga nu naar index.html en wijzig de code, deze zou er zo uit moeten zien

<!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>

Met dit op zijn plaats ben je helemaal klaar, ik hoop dat je het eenvoudig vindt.