React par la pratique – 1 : Préparer l’environnement de développement

composant avec React

Sommaire

Introduction

Le premier problème que vous pourriez rencontrer est de configurer webpack et babel pour utiliser une version moderne de Javascript avec React, dans ce tutorial je vais vous présenter une configuration simple et efficace.

Ce tutorial suppose que vous savez déjà ce qu’est webpack, que vous avez déjà galéré avec sa configuration et que vous aimeriez bien apprendre à le faire vous même from scratch.

1 – Creation d’un projet

Notre projet sera créé comme un projet npm normal, dans un répertoire de votre choix lancez la commande suivante :

npm init

Nommez votre projet, puis laissez tout les paramètres par défaut.

2 – Structure de base

— src/ <—- Sources du projet
|——index.jsx
|——index.html

— public/ <—— Ressources ( images, css … )
— dist/ <—— Contiendra le code compilé et prêt à être déployé.

3 – Installation des dépendances

installer les dépendances webpack :

npm i --save-dev webpack-merge webpack html-webpack-plugin copy-webpack-plugin webpack-dev-server

installer les dépendances babel:

npm i --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-react-hmre babel-preset-stage-0 babel-register

4 – Configuration de babel

Il faut maintenant configurer babel pour utiliser la bonne version de Javascript dans notre projet, notez qu’on ajoute aussi le plugin react qui se charge de transpiler la syntaxe JSX en du code Javascript.

dans package.json ajouter cette section

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

5 – Configurer webpack

Configurer les scripts pour utiliser webpack dans package.json :

"scripts": {
"start": "webpack-dev-server --progress --inline --hot",
"build": "webpack -p"
},

Script de configuration de webpack

Puis configurez votre web pas comme présenté ci-dessous, avec cette configuration on va :

  1. Définir le fichier src/index.jsx comme point d’entrée de l’application
  2. Compiler les fichiers Javascripts dans src/ et ayant une des extensions (js ou jsx)
  3. Utiliser le plugin ‘HtmlWebpackPlugin‘ pour ajouter automatiquement la balise <script /> pointant sur le bundle compilé durant les phases de build et de dev.
  4. Utiliser le plugin NamedModulesPlugin pour faciliter le débug durant le développement.
  5. Copier automatiquement toutes les ressources statiques dans dist/ durant le processus de compilation.
  6. Utiliser le module ‘babel-loader‘ avec les plugins ( »es2015« , « react« , « stage-0« ) quand il rencontre un fichier Javascript durant la compilation.
  7. Permettre de charger des styles à partir de fichiers css depuis un composant React avec le module ‘style-loader‘.
  8. Permettre la mise à jour du code à chaud durant le dev avec le module ‘react-hmre
  9. créer un serveur de dev sur le port 9090 afin d’utiliser la mise à jour du code dans le navigateur à chaud.
// webpack.config.js

const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');


const TARGET = process.env.npm_lifecycle_event;

var common = {
        entry: "./src/index.jsx",
        output: {
            path: path.join(__dirname, './dist'),
            //publicPath: '',
            filename: 'bundle.js'
        },
        resolve: {
            modules: [
                path.join(__dirname, "./src"),
                "node_modules"
            ],
            extensions: ['.js', '.jsx'],
            enforceExtension: false
        },

        plugins: [
            new webpack.NamedModulesPlugin(),
            new HtmlWebpackPlugin({
                template : './src/index.html',
            }),

            new CopyWebpackPlugin([
                {
                    from: 'public',
                    to: path.join(__dirname, 'dist')
                }
            ])

        ],

        module: {
            rules: [{
                test: /\.js/,
                exclude: /node_modules/,
                loader: "babel-loader",
                include: [__dirname],
                options: {
                    presets: ["es2015", "react", "stage-0"]
                }
            },
                {
                    test : /\.css$/,
                    include: [path.join(__dirname, 'src')],
                    use : ['style-loader', {
                        loader : 'css-loader',
                        options : {
                            modules : true,
                            importLoaders : 1,
                            localIdentName : '[path][name]__[local]--[hash:base64:5]',
                        },
                    }],
                }
            ]
        }
    }


if (TARGET === 'start') {
    console.log('Compiling front end code for dev ')

    //   Add Hot reload for dev env
    common.module.rules[0].options.presets.push("react-hmre")

    module.exports = merge(common, {
        devServer: {

            contentBase: './public',

            port: 9090,
            proxy: {
                '/api': {
                    target: 'http://localhost:8080',
                    secure: false,
                    prependPath: false
                }
            },
            publicPath: 'http://localhost:9090/',
            historyApiFallback: true
        },
        devtool: 'source-map'
    });

}

if (TARGET === 'build') {
    console.log('Compiling front end code for production ')

    module.exports = merge(common, {});
}


Tester la configuration

On va tester la configuration en mettant du code javascript de version ES2015 dans le fichier principal :

// src/index.jsx

let nom = 'World'
console.log(`Hello ${nom}`)

et le fichier HTML pour permettre d’exécuter ce code dans la console :

<!-- src/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exemple</title>
</head>
<body>

</body>
</html>

Vous pouvez maintenant utiliser webpack pour lancer le serveur de dev :

npm start

Puis dans votre navigateur ouvrez l'url http://localhost:9090 et ouvrez la console de développement, vous devriez voir un message Hello World dans la console.

Packager le code pour la distribution ( pour la prod )

Pour packager votre code pour le déployer en production vous pouvez compiler votre code avec la commande :

npm run build

Vous trouverez alors le code prêt à être déployé dans le répertoire dist

Code source

Le code source est disponible sur github au tag suivant step-0 pour pointer directement sur cette étape.

Vous pouvez faire cela depuis la ligne de commande avec les commandes suivantes :

git clone git@github.com:bmarwane/react-step-by-step.git
cd react-step-by-step
git checkout step-0

Innstallez les dépendances avec la commande :

npm install

Puis démarrez votre environnement de développement avec la commande:

npm start

Suite

Dans le chapitre suivant vous allez créer votre premier composant React.

Créer votre premier composant React

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *