DEV Community

Fabio Sanchez
Fabio Sanchez

Posted on

Configurar Webpack & React Parte 2 - 🗒 Código fuente inicial.

En la entrega anterior creamos nuestro proyecto e instalamos las dependencias principales, en este tutorial nos enfocaremos en crear el código fuente inicial de React y en el siguiente tutorial lo probaremos con webpack.

Este código fuente inicial será modificando en futuros tutoriales pero por ahora es suficiente como para entender como trabaja webpack.

index.html

Dentro de la carpeta public crearemos un archivo index.html, este archivo html será donde nuestro transpilado de React y sus componentes se renderizaran, mas concretamente en el div con id app.

El archivo debe tener 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>Hola react</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

Árbol de archivos y directorios:

.
├── public
│   └── index.html
├── src
├── .babelrc
├── package-lock.json
└── package.json
Enter fullscreen mode Exit fullscreen mode

HolaMundo.jsx

Dentro de la carpeta src crearemos una subcarpeta llamada components y dentro de esta un archivo llamado HolaMundo.jsx que será nuestro primer componente de prueba y tendrá el siguiente contenido.

import React from "react";

const HolaMundo = () => {
  return <h1>Hola mundo</h1>;
};

export default HolaMundo;

Enter fullscreen mode Exit fullscreen mode

Árbol de archivos y directorios:

.
├── public
│   └── index.html
├── src
│   └── components
│       └── HolaMundo.jsx
├── .babelrc
├── package-lock.json
└── package.json
Enter fullscreen mode Exit fullscreen mode

index.js

Nos situamos de nuevo en la carpeta de src y creamos un archivo llamado index.js que será el punto de entrada principal para nuestra configuración de webpack.

import React from "react";
import ReactDOM from "react-dom";
import HolaMundo from "./components/HolaMundo";

ReactDOM.render(<HolaMundo />, document.getElementById("app"));
Enter fullscreen mode Exit fullscreen mode

Como observación, podemos ver que tiene importado nuestro primer componente de ejemplo HolaMundo.jsx.

Árbol de archivos y directorios:

.
├── public
│   └── index.html
├── src
│   ├── components
│   │   └── HolaMundo.jsx
│   └── index.js
├── .babelrc
├── package-lock.json
└── package.json
Enter fullscreen mode Exit fullscreen mode

Despedida

En la siguiente entrega empezaremos a crear la configuración de webpack y añadiremos soporte para archivos js y jsx

Top comments (0)