React: Creando el primer programa.

¿Por donde empezar?

Partiendo de que ya dispongamos de un entorno de desarrollo y que tenemos instalado en el sistema npm según se explicó aquí : requisitos para empezar con react, podemos dar los primeros pasos:

La forma elegida para generar el proyecto es la herramienta create-react-app, instalada previamente a través del gestor de paquetes npm.

npx create-react-app nombre-proyecto

Estructura de archivos y directorios de React

Tras esto veremos que se genera una estructura de archivos muy reconocible:

Aquí tienes una descripción de la estructura de archivos y directorios, es importante tratar de familiarizarse con ella:

1. node_modules/: Este directorio contiene todas las dependencias y bibliotecas de terceros que tu proyecto necesita. No necesitas modificar nada aquí directamente; npm o yarn se encargan de gestionar estas dependencias.
2. public/: En este directorio, encontrarás los archivos que se servirán públicamente a través de tu aplicación web. Esto incluye el archivo HTML principal (public/index.html), archivos de favicon y cualquier otro recurso estático, como imágenes o archivos de iconos.
   • public/index.html: Este archivo HTML es la página principal de tu aplicación React. Aquí puedes definir la estructura básica de tu página y enlazar los archivos de JavaScript generados por React, si tienes una mínima formación en desarrollo web seguro que este es el documento que más reconoces.
3. src/: Este es el directorio principal donde trabajarás en tu aplicación React. Contiene la mayor parte de tus archivos de código fuente:
   • src/index.js: Este archivo es el punto de entrada de tu aplicación. Aquí se importa y renderiza el componente principal de React en el elemento DOM con id="root" definido en public/index.html.
   • src/App.js: Este es el componente principal de tu aplicación. Puedes personalizarlo según tus necesidades. Por lo general, este componente contiene la estructura básica de tu aplicación y es el punto de inicio para agregar más componentes y lógica.
   • src/index.css: Este archivo contiene estilos CSS globales para tu aplicación. Puedes personalizar los estilos de tu aplicación aquí.
   • src/App.css: Este archivo es un archivo de estilos CSS específico para el componente App.js. Puedes agregar estilos específicos para este componente aquí.
   • src/logo.svg: Un archivo SVG que se utiliza como ejemplo de recurso estático. Puedes eliminarlo o reemplazarlo con tus propias imágenes.
4. package.json: Este archivo es el descriptor de tu proyecto y contiene información sobre las dependencias, scripts de construcción y configuraciones específicas de tu aplicación React.
   Este archivo aporta muchos datos útiles como las versiones actuales de las dependencias instaladas:

1. package-lock.json (o yarn.lock): Este archivo asegura que las versiones exactas de las dependencias se utilicen en tu proyecto para mantener la consistencia entre entornos de desarrollo.
2. README.md: Este es el archivo de documentación de tu proyecto. Puedes editar este archivo para proporcionar información sobre tu aplicación y cómo configurarla y ejecutarla, no es algo vital, pero es una buena práctica utilizarlo para definir el funcionamiento de tu proyecto.
3. .gitignore: Este archivo lista los archivos y directorios que Git debe ignorar al realizar un seguimiento de cambios en tu repositorio. Por lo general, incluye entradas para evitar que se suban archivos de node_modules y otros recursos generados automáticamente, puedes añadir aquí todo lo que no quieras que se suba al repositorio.

Esta estructura estándar proporciona un marco organizativo para desarrollar aplicaciones React de manera efectiva. A medida que construyas tu aplicación, agregarás más componentes, estilos y lógica, pero esta estructura básica te ayudará a mantenerte organizado y productivo desde el principio, por ello le damos tanta relevancia.

Y por fin … el código.

Como hemos mencionado anteriormente (y probablemente ya sabías), lo primero es localizar el index.html que será la puerta de acceso a nuestra aplicación, allí veremos una estructura estándar HTML:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
    <title>React first app</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
   
  </body>
</html>

En este código hay dos cosas que debemos conocer, obviando los meta datos y el sistema de codificación definido:

• Title: la conocida etiqueta Title, que define el título de la aplicación, podemos apreciar en ella la primera mención a React.
• Body: Dentro del body, donde se localiza la estructura de la interfaz de la web, localizamos un div ya definido:

<div id="root"></div>

Esto crea un contenedor en la web que se identifica con el nombre «root», el nombre será usado para seleccionar ese contenedor y añadir información dentro de el, ¿Cómo se hace eso?, vayamos al siguiente archivo, el index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


reportWebVitals();

Aquí además de una lista de imports que analizaremos más adelante, vemos que se está creando una constante en base al elemento llamado root que habíamos visto antes en el HTML, desde luego, este nombre es solo un ejemplo y podemos utilizar el que queramos.

Hemos creado por tanto una raíz de ReactDOM, sobre la que en el paso siguiente renderizamos la aplicación.

La aplicación, identificada en este caso por APP, se renderiza dentro de un componente especial llamado React.StrictMode, es algo en lo que profundizaremos en otros posts, por ahora debes sacar que es un componente básico que ofrece facilidades para la detección de errores.

Llegado este punto habrás visto que tenemos una página html de entrada, que hay en ella un elemento en el que se mostrará información y que la información se renderiza a través de un componente de React del que sabemos aún poco, pero…¿Qué es esa app que renderiza? vamos al archivo donde se encuentra la lógica, el app.js.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          React <code>first app</code>by TECNITIUM.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Seguro que en este fragmento de código también reconoces ciertos elementos, podemos ver los imports, una función y un export.

Dentro de la función llamada App es donde está lo que buscamos, la información que será exportada al index.js para posteriormente ser mostrada en el HTML por medio del elemento «root».

Podrías perfectamente sustituir todo ese código por un sencillo «hola mundo!» de la siguiente manera, y eso te ayudaría a simplificar la comprensión:

import './App.css';

function App() {
  return (
    <p>Hola mundo!</p>
  );
}

export default App;

El resultado en el navegador sería algo así:

Una salida muy básica, ¿verdad? pero suficiente para abstraerte de todo el código que estaba dentro de la función, y que si renderizas como estaba, generará la siguiente salida, mucho más atractiva:

Estás ahora ante una página web muy sencilla, sin personalizar y que no hace nada, pero has comprendido la estructura básica de una aplicación React, has visto el funcionamiento de un componente y estás listo para seguir aprendiendo pero…no olvides que necesitas iniciar la aplicación:

Esto se consigue utilizando el siguiente comando desde dentro de la carpeta del proyecto:

npm start

Anotaciones:

• Es importante saber que la referencia entre el index.html y el index.js se genera de manera automática en forma de script una vez se lanza la aplicación.