Prerrequisitos: tener nodejs/npm, git.

  1. Crear carpeta donde va el proyecto

  2. Inicializar git

    git init

  3. inicializar npm

    npm init

    poner en entry point la ubicación del index.js

    author: name <email>

    lisense: MIT

  4. Instalar React y react-dom

    npm install react react-dom

  5. Instalamos en CSS

    npm i mini-css-extract-plugin css-loader style-loader sass sass-loader -D

  6. creación de carpetas

    1. src

      index.js

      import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'
ReactDOM.render(<App />, document.getElementById('app'));

    2. public

      index.html

  7. instalar dependencias con los loader que necesitemos

    npm install @babel/core @babel/preset-env @babel/preset-react

npm install webpack webpack-cli webpack-dev-server

npm install babel-loader html-loader html-webpack-plugin

  8. creación de los archivos necesarios dentro del proyecto

    .gitignore

    le decimos a git lo que queremos que no actualice, ponemos node_modules

    .babelrc

    se agregan los presets de los elemtos que vamos a usar

    {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

    webpack.config.js

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'bundle.js',
	},
	mode: 'development',
	resolve: {
		extensions: ['.js', '.jsx'],
	},
	module: {
		rules: [
			{
				test: /\\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\\.html$/,
				use: [
					{
						loader: 'html-loader'
					}
				]
			},
			{
				test: /\\.(css|scss)$/,
				use: [
					"style-loader",
					"css-loader",
					"sass-loader",
				],
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './public/index.html',
			filename: './index.html'
		}),
		new MiniCssExtractPlugin({
			filename: '[name].css'
		}),
	],
	devServer: {
  static: {
    directory: path.join(__dirname, 'public'),
    },
  compress: true,
  port: 3005,
}
}

    styles

    global.scss

    Así debe quedar

    Untitled

  9. Agregar los scipts en package.json

    "start": "webpack serve --open",
"build": "webpack --mode production"

  10. Poner en el index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React basic</title>
</head>
<body>
    <div id='app'></div>
</body>
</html>