Construir una aplicación en React desde cero implica entender dos piezas fundamentales: los componentes y las herramientas que permiten que el código moderno funcione en cualquier navegador. Aquí se explica cómo crear un primer componente funcional, configurar el punto de entrada de la aplicación y preparar Babel para transformar JavaScript moderno en código compatible.
¿Cómo se crea un componente funcional en React?
Dentro de la carpeta source/components se crea un archivo llamado HelloWorld.jsx [01:00]. La convención en React es importar React al inicio de cada archivo nuevo, ya que el framework lo necesita para interpretar JSX.
jsx
import React from 'react';
const HelloWorld = () => {
return <h1>Hola mundo</h1>;
};
export default HelloWorld;
Este patrón se conoce como componente funcional: una función de JavaScript que retorna elementos de interfaz. Se utiliza export default para que otros archivos puedan consumirlo fácilmente.
¿Qué es el punto de entrada index.js?
El archivo index.js ubicado en la raíz de source actúa como punto de entrada [01:30]. Es el primer archivo que será detectado y donde se concentra la configuración inicial de React. Aquí se importan dos elementos esenciales:
- React: la librería principal.
- ReactDOM: la librería encargada de empujar los componentes de React hacia el navegador.
jsx
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(
<HelloWorld />,
document.getElementById('app')
);
El método render de ReactDOM recibe dos parámetros [02:30]: el componente que se quiere mostrar y el elemento del DOM donde se insertará. En este caso, se busca un div con el id app dentro del HTML.
¿Cómo se prepara el archivo HTML?
Dentro de la carpeta public se configura un archivo HTML básico [03:05] que sirve como contenedor de toda la aplicación:
html
<!DOCTYPE html>
<html>
<head>
<title>Platzi Video</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
El div con id="app" es exactamente el nodo que ReactDOM utilizará para renderizar los componentes.
¿Qué es Babel y por qué es necesario?
Babel es una herramienta que transforma JavaScript moderno en una versión compatible con todos los navegadores [00:20]. Sin Babel, las características más recientes de ECMAScript podrían no funcionar en navegadores antiguos.
Para instalarlo se ejecuta en la terminal [03:50]:
bash
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
Cada paquete cumple un rol específico:
- @babel/core: incluye todas las herramientas necesarias para la transformación del código.
- babel-loader: permite que Babel trabaje junto con Webpack.
- @babel/preset-env: traduce características de ECMAScript 5 y 6 para garantizar compatibilidad.
- @babel/preset-react: permite interpretar y transformar JSX, la sintaxis que React utiliza para definir interfaces.
Estos paquetes se instalan como dependencias de desarrollo con la bandera --save-dev, ya que solo se necesitan durante el proceso de construcción del proyecto.
¿Cómo se configura el archivo .babelrc?
En la raíz del proyecto se crea un archivo llamado .babelrc [04:50]. El punto inicial indica que es un archivo oculto en sistemas operativos basados en Unix, aunque los editores de código como Visual Studio Code lo mostrarán sin problema.
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Este objeto le indica a Babel qué presets utilizar al momento de procesar el código. Es fundamental que este archivo viva en la raíz del proyecto para que las herramientas lo detecten correctamente.
Con estos pasos queda lista la base para que Webpack, en la siguiente etapa, tome estos archivos y los prepare tanto para un entorno de desarrollo local como para producción. Si tienes dudas sobre algún paso o quieres compartir cómo te fue con la configuración, déjalo en los comentarios.
