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>
Árbol de archivos y directorios:
.
├── public
│ └── index.html
├── src
├── .babelrc
├── package-lock.json
└── package.json
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;
Árbol de archivos y directorios:
.
├── public
│ └── index.html
├── src
│ └── components
│ └── HolaMundo.jsx
├── .babelrc
├── package-lock.json
└── package.json
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"));
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
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)