Webpack&React[EN][ES]

It is recommended to have React Developer Tool in the browser’s devTools. From now on there are two ways to create a React App:

-create react app-

We need nodejs so we can install create-react-app and then once in the wished folder, we apply the command npx create-react-app [NameOfYourApp].

In conclusion, this is the fastest and easiest way to create an App in React. About Webpack it is integrated internally, but you can always modify it as you please.

-customize-

Have nodejs beforehand. Here we want to install webpack to bundle all the modules and components the App is going to contain, webpack-cli must be installed so we count on an interface to manage Webpack’s processes. For development mode, we will need the Webpack-dev-server, it will deploy our project locally.

WEBPACK: we establish an entry point from where webpack will start to bundle and an output that will give the resulting bundle, normally a dist folder is where the files resulted from that bundle will be hosted. But it is not enough, we need loaders to read extensions like “.sass .html .css .js”, each extension may require a unique loader but others need several loaders.

Then, if we want to work with sass and HTML the loaders required are: node-sass, this library allow us to use the preprocessor; sass-loader, compiles the sass files into CSS; style-loader, inject the CSS into the HTML; css-loader, reads CSS files as a string; file-loader, It’s a must to have to count on images or gifs in the App; babel-loader, important to read and compile js files into readable versions for the browser, but it requires some plugins to work with:

const path = require('path');
const { resolve } = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  watch: true,
  entry: './src/index.js',
  output:{
    path: path.resolve(__dirname, './dist') ,
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use:{
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use:[
          'style-loader',
          'css-loader',
          'sass-loader',
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader'
          },
        ]
      }
    ]
  }

@babel/core, is the Api from babel; @babel/preset-dev, focused transpile javascript for all browsers; @babel/preset-react, it englobes plugins to read react formats as jsx. Now, we count on plugins for specific features of javascript: @babel/plugin-proposal-class-properties, reads classes’ properties; @babel/plugin-transform-runtime && @babel/runtime, when compiling babel use helpers that use features not supported by ES in every file, so the code it is repeated. Babel runtime contains all those helpers and babel transform runtime takes the specific feature and injects it in the appropriate file.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties", "babel/plugin-transform-runtime"]
}

Webpack count also on plugins to improve the usage in these case we install: html-webpack-plugin, creates an HTML file to contains all the bundles of your App; clean-webpack-plugin, all files that are not used in the dist folder are deleted;MinCssExtractPlugin, it compress the CSS files is perfect for production mode.

module.exports = {
plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin ({
      template: "./public/index.html",
      filename: "./index.html"
    }),
  ]
}

Conclusion

To create react apps there are two ways, through react-create-app or on our way. For this last one, it is necessary Webpack and babel, extra some loader and plugins to develop the App dynamism.