React
React Boilerplate [React + Babel + Webpack]

Mise en place du projet

Vous avez besoin du gestionnaire de package Node pour installer les dépendances du projet. Nœud de téléchargement pour votre système d'exploitation à partir de Nodejs.org . Node Package Manager est fourni avec le noeud.

Vous pouvez également utiliser Node Version Manager pour mieux gérer vos versions de nœud et npm. C'est génial pour tester votre projet sur différentes versions de nœuds. Cependant, il n'est pas recommandé pour l'environnement de production.

Une fois que vous avez installé le nœud sur votre système, installez-vous et installez des packages essentiels pour dynamiser votre premier projet React en utilisant Babel et Webpack.

Avant de commencer à frapper des commandes dans le terminal. Jetez un oeil à ce que Babel et Webpack sont utilisés.

Vous pouvez démarrer votre projet en exécutant npm init dans votre terminal. Suivez la configuration initiale. Après cela, exécutez les commandes suivantes dans votre terminal -

Dépendances:

npm install react react-dom --save

Dépendances de Dev:

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

Dépendances optionnelles du dev:

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

Vous pouvez vous référer à cet exemple de package.json

Créez .babelrc dans la racine de votre projet avec les contenus suivants:

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

Vous pouvez éventuellement créer .eslintrc dans la racine de votre projet avec le contenu suivant:

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

Créez un fichier .gitignore pour empêcher le téléchargement des fichiers générés sur votre dépôt git.

node_modules
npm-debug.log
.DS_Store
dist

Créez le fichier webpack.config.js avec le contenu minimum suivant.

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

Et enfin, créez un fichier sever.js pour pouvoir exécuter npm start , avec le contenu suivant:

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

Créez le fichier src/app.js pour voir votre projet React faire quelque chose.

import React, { Component } from 'react';

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

Lancez node server.js ou npm start dans le terminal si vous avez défini ce que signifie start dans votre package.json

projet réactif

A propos de ce projet

Ceci est un projet simple passe-partout. Cet article vous guidera pour configurer l'environnement pour ReactJs + Webpack + Bable.

Commençons

nous aurons besoin d'un gestionnaire de paquets nodaux pour lancer le serveur express et gérer les dépendances tout au long du projet. Si vous êtes nouveau sur le gestionnaire de paquets, vous pouvez vérifier ici . Remarque: L'installation du gestionnaire de packages de nœuds est requise ici.

Créez un dossier avec le nom approprié et naviguez depuis celui-ci depuis le terminal ou par l'interface graphique. Allez ensuite au terminal et tapez npm init cela créera un fichier package.json. description, point d'entrée, dépôt git, auteur, licence, etc. Ici, le point d'entrée est important car le nœud le recherchera initialement lorsque vous exécuterez le projet. À la fin, il vous demandera de vérifier les informations que vous fournissez. Vous pouvez taper oui ou le modifier. Eh bien c'est ça, notre fichier package.json est prêt.

La configuration du serveur Express est exécutée npm install express @ 4 --save . C'est toutes les dépendances dont nous avions besoin pour ce projet. Il est important de sauvegarder l'indicateur, sans lequel le fichier package.js ne sera pas mis à jour. La tâche principale de package.json est de stocker la liste des dépendances. Il ajoutera express version 4. Votre package.json ressemblera à "dependencies": { "express": "^4.13.4", ............. },

Une fois le téléchargement terminé, vous pouvez voir qu'il existe un dossier node_modules et un sous-dossier de nos dépendances. Maintenant, à la racine du projet, créez un nouveau fichier server.js . Maintenant, nous mettons en place un serveur express. Je vais passer tout le code et l'expliquer plus tard.

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 = require ('express'); cela vous donnera accès à l'intégralité de l'api express.

var app = express (); appellera la bibliothèque express comme fonction. app.use (); laissez la fonctionnalité ajouter à votre application express. app.use (express.static ('public')); spécifiera le nom du dossier qui sera exposé dans notre serveur Web. app.listen (port, function () {}) ici sera notre port 3000 et la fonction que nous appelons vérifiera que le serveur web est exécuté correctement. C'est ça le serveur express est mis en place.

Allez maintenant dans notre projet et créez un nouveau dossier public et créez le fichier index.html . index.html est le fichier par défaut pour votre application et Express server recherchera ce fichier. Le fichier index.html est un simple fichier html qui ressemble à

<!DOCTYPE html>
<html>

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

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

</html>

Et accédez au chemin du projet via le terminal et tapez node server.js . Ensuite, vous verrez * console.log ('le serveur Express utilise le port: 3000'); *.

Allez dans le navigateur et tapez http: // localhost: 3000 dans la barre de navigation, vous verrez hello World .

Allez maintenant dans le dossier public et créez un nouveau fichier app.jsx . JSX est une étape de préprocesseur qui ajoute une syntaxe XML à votre code JavaScript. Vous pouvez certainement utiliser React sans JSX, mais JSX rend React beaucoup plus élégant. Voici l'exemple de code pour app.jsx

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

Maintenant, allez dans index.html et modifiez le code, il devrait ressembler à ceci

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

Avec ceci en place vous êtes tous finis, j'espère que vous trouvez cela simple.