React
Comment configurer un environnement Web de base, réagir et babel

Remarques

Comment construire un pipeline pour un "Hello world" personnalisé avec des images.

Étape 1: Installez Node.js

Le pipeline de génération que vous allez créer est basé sur Node.js, vous devez donc vous assurer que vous l'avez installé en premier lieu. Pour obtenir des instructions sur l'installation de Node.js, vous pouvez consulter les documents SO pour cela ici.

Etape 2: Initialisez votre projet en tant que module de noeud

Ouvrez votre dossier de projet sur la ligne de commande et utilisez la commande suivante:

npm init

Pour les besoins de cet exemple, vous pouvez prendre les paramètres par défaut ou si vous souhaitez plus d’informations sur ce que tout cela signifie, vous pouvez consulter cette documentation sur la configuration du package.

Étape 3: Installer les paquetages npm nécessaires

Exécutez la commande suivante sur la ligne de commande pour installer les packages nécessaires pour cet exemple:

npm install --save react react-dom

Ensuite, pour les dépendances de développement, exécutez cette commande:

npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader 

Enfin, webpack et webpack-dev-server sont des éléments qui valent la peine d'être installés globalement plutôt que comme une dépendance de votre projet. Si vous préférez les ajouter en tant que dépendance, cela ne fonctionnera pas. Voici la commande à exécuter:

npm install --global webpack webpack-dev-server 

Étape 3: Ajouter un fichier .babelrc à la racine de votre projet

Cela permettra à babel d'utiliser les préréglages que vous venez d'installer. Votre fichier .babelrc doit ressembler à ceci:

{
  "presets": ["react", "es2015"]
}

Étape 4: Configurer la structure du répertoire du projet

Configurez-vous une structure de répertoire qui ressemble à la suivante dans la racine de votre répertoire:

|- node_modules
|- src/
  |- components/
  |- images/
  |- styles/
  |- index.html
  |- index.jsx
|- .babelrc
|- package.json

REMARQUE: Les node_modules , .babelrc et package.json devraient tous être déjà présents depuis les étapes précédentes. Je les ai simplement inclus pour que vous puissiez voir où ils correspondent.

Étape 5: Remplissez le projet avec les fichiers de projet Hello World

Ce n'est pas vraiment important pour le processus de construction d'un pipeline, alors je vais simplement vous donner le code et vous pouvez les copier dans:

src / components / HelloWorldComponent.jsx

import React, { Component } from 'react';

class HelloWorldComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {name: 'Student'};
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.setState({name: e.target.value});
  }

  render() {
    return (
      <div>
        <div className="image-container">
          <img src="./images/myImage.gif" />
        </div>
        <div className="form">
          <input type="text" onChange={this.handleChange} />
          <div>
            My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
          </div>
        </div>
      </div>
    );
  }
}

export default HelloWorldComponent;

src / images / myImage.gif

N'hésitez pas à substituer ceci à n'importe quelle image que vous souhaitez, simplement pour prouver que nous pouvons regrouper des images. Si vous fournissez votre propre image et que vous la nommez autrement, vous devrez mettre à jour HelloWorldComponent.jsx pour refléter vos modifications. De même, si vous choisissez une image avec une extension de fichier différente, vous devez modifier la propriété de test du chargeur d'image dans le fichier webpack.config.js avec une expression régulière appropriée pour correspondre à votre nouvelle extension de fichier.

src / styles / styles.css

.form {
  margin: 25px;
  padding: 25px;
  border: 1px solid #ddd;
  background-color: #eaeaea;
  border-radius: 10px;
}

.form div {
  padding-top: 25px;
}

.image-container {
  display: flex;
  justify-content: center;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Learning to build a react pipeline</title>
</head>
<body>
  <div id="content"></div>
  <script src="app.js"></script>
</body>
</html>

index.jsx

import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';

require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');

render(<HelloWorldComponent />, document.getElementById('content'));

Étape 6: Créer une configuration Webpack

Créez un fichier appelé webpack.config.js à la racine de votre projet et copiez ce code dans celui-ci:

webpack.config.js

var path = require('path');

var config = {
  context: path.resolve(__dirname + '/src'),
  entry: './index.jsx',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname + '/dist'),
  },
  devServer: {
    contentBase: path.join(__dirname + '/dist'),
    port: 3000,
    open: true,
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: "style!css"
      },
      {
        test: /\.gif$/,
        loaders: [
          'file?name=[path][name].[ext]',
          'image-webpack',
        ]
      },
      { test: /\.(html)$/,
        loader: "file?name=[path][name].[ext]"
      }
    ],
  },
};

module.exports = config;

Étape 7: Créez des tâches npm pour votre pipeline

Pour ce faire, vous devez ajouter deux propriétés à la clé de script du JSON définie dans le fichier package.json à la racine de votre projet. Faites en sorte que votre clé de script ressemble à ceci:

  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Le script de test aura déjà été là et vous pouvez choisir de le conserver ou non, ce n'est pas important pour cet exemple.

Étape 8: utiliser le pipeline

Depuis la ligne de commande, si vous êtes dans le répertoire racine du projet, vous devriez maintenant pouvoir exécuter la commande:

npm run build

Cela regroupera la petite application que vous avez créée et la placera dans le répertoire dist/ qu'il créera à la racine du dossier de votre projet.

Si vous exécutez la commande:

npm start

Ensuite, l'application que vous avez créée sera servie dans votre navigateur Web par défaut à l'intérieur d'une instance de serveur de développement Web.