El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Configuración de un Proyecto React

Siguiente ►
►

En este tema, aprenderás a configurar un proyecto React desde cero utilizando Webpack. Este proceso incluye la instalación de dependencias necesarias, la configuración de Webpack y Babel, y la creación de un archivo de configuración para Webpack. Al final de este tema, tendrás un proyecto React básico listo para el desarrollo.

  1. Instalación de Dependencias

Primero, necesitamos instalar Node.js y npm (Node Package Manager) si aún no los tienes instalados. Puedes descargarlos desde nodejs.org.

Paso 1: Crear un Directorio de Proyecto

Crea un nuevo directorio para tu proyecto y navega a él en tu terminal:

mkdir react-webpack-project
cd react-webpack-project

Paso 2: Inicializar un Proyecto npm

Inicializa un nuevo proyecto npm:

npm init -y

Esto creará un archivo package.json con la configuración predeterminada.

Paso 3: Instalar React y ReactDOM

Instala React y ReactDOM como dependencias del proyecto:

npm install react react-dom

Paso 4: Instalar Webpack y Babel

Instala Webpack, Webpack CLI, Babel y los loaders necesarios:

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

  1. Configuración de Webpack

Paso 1: Crear la Estructura de Directorios

Crea la siguiente estructura de directorios y archivos:

react-webpack-project/
├── public/
│   └── index.html
├── src/
│   ├── index.js
│   └── App.js
├── .babelrc
└── webpack.config.js

Paso 2: Configurar Babel

Crea un archivo .babelrc en la raíz del proyecto con el siguiente contenido:

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

Paso 3: Configurar Webpack

Crea un archivo webpack.config.js en la raíz del proyecto con el siguiente contenido:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  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'
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

Paso 4: Configurar HTML

Crea un archivo index.html en el directorio public con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React Webpack Project</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Paso 5: Configurar React

Crea un archivo index.js en el directorio src con el siguiente contenido:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Crea un archivo App.js en el directorio src con el siguiente contenido:

import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React with Webpack!</h1>
    </div>
  );
};

export default App;

  1. Ejecutar el Proyecto

Paso 1: Añadir Scripts a package.json

Añade los siguientes scripts a tu archivo package.json:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Paso 2: Iniciar el Servidor de Desarrollo

Inicia el servidor de desarrollo ejecutando el siguiente comando:

npm start

Abre tu navegador y navega a http://localhost:9000. Deberías ver "Hello, React with Webpack!".

Conclusión

En este tema, has aprendido a configurar un proyecto React desde cero utilizando Webpack. Has instalado las dependencias necesarias, configurado Webpack y Babel, y creado un archivo de configuración para Webpack. Ahora tienes un proyecto React básico listo para el desarrollo. En los siguientes temas, profundizaremos en técnicas más avanzadas y optimizaciones para tu proyecto React.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados