Requisit > Installed Node.js y npm

Webpack

Ahora vamos a crear un archivo package.json
Now we are going to create a package.json file

npm init -y

Dependencies / Dependencias

Instalaremos 6 dependencias necesarias para la aplicacion React que funcione correctamente. Todas las librerias lo usamos en una linea de instalar npm :
We will install 6 necessary dependencies for the React application to work correctly. All libraries use it in one line to install npm:

sudo npm install path @babel/core @babel/preset-react react babel-loader react-dom --save

Y luego instalar webpack / Then install webpack:

npm install webpack webpack-cli --global

Crear un archivo webpack.config.js / create file webpack.config.js

var path = require('path');

module.exports = {
  entry: './components/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
}

React.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Root extends Component {
  render() {
    return (
      <h1>Hello World from React</h1>
    )
  }
}
let container = document.getElementById('app');
let component = <Root />;
ReactDOM.render(component, container);

Ejecutar webpacl / run webpack

webpack --config webpack.config.js

View

<div id="app"></div>
<script src="dist/main.js" charset="utf-8"></script>

Comando para compilar webpack por cada modificaciones

sudo webpack --watch