Estructura básica de un proyecto React

React es la segunda librería JavaScript más popular en el mundo de la programación después de jQuery. Su popularidad viene de la posibilidad que abre para manejar código JavaScript desde una sintaxis similar a HTML, simplificando muchas de las acciones que queremos ejecutar en un proyecto. Para ello, React usa un lenguaje conocido como JSX y distintos objetos.

Ya sean elementos, componentes, estados o efectos, todos estos objetos son esenciales para entender el funcionamiento de React. En este post, discutiremos la estructura básica de un proyecto React, una maqueta para empezar a crear cualquier aplicación.

¿Existe una estructura básica de un proyecto React?

Antes de darte un ejemplo de una estructura básica de un proyecto React, debemos discutir la existencia de este concepto. Si conoces un poco sobre cómo funciona React, sabes que algunas personas tienden a confundirlo con un framework. Es decir, con un marco de trabajo que nos facilita la solución de problemas. Sin embargo, React no es un framework, sino una librería JavaScript que simplifica la ejecución de acciones.

Cuando afirmamos que React no es un framework, estamos diciendo, entre otras cosas, que React no nos dice cómo debemos organizar nuestro proyecto. Aunque es cierto que herramientas como create-react-app nos dan un ambiente de código de una aplicación creada con create-react-app, predeterminado, en el que ya existe una jerarquía de carpetas y archivos, React no nos dirá cómo debemos organizarlos. Esto es distinto a frameworks como Angular, que tienen herramientas para crear componentes que ordenan archivos automáticamente.

Entonces, no estamos atados a una estructura básica de un proyecto React, pero ¿existe? La verdad es que, como muchas otras cosas en el mundo de la programación, cada desarrollador encontrará la mejor manera de estructurar su proyecto React. De hecho, Dan Abramov, uno de los desarrolladores más influyentes en la comunidad de React, contestó con «mueve archivos hasta que se sienta correcto» a una pregunta sobre la estructura básica de un proyecto React. Es decir, sea cual sea el tamaño de nuestro proyecto, la forma de crear nuestra estructura es, aunque suene redundante, creando nuestra estructura.

Configuración inicial de create-react-app

Para empezar a trabajar con React, una de las herramientas más recomendadas es create-react-app. Esta herramienta nos permite crear un nuevo proyecto React con una configuración inicial ya establecida.

# Estructura básica de un proyecto React 
npx create-react-app my-app
cd my-app
npm start

Esto crea una estructura básica de carpetas y archivos que nos permite comenzar a desarrollar nuestra aplicación de inmediato.

Organización detallada de archivos y carpetas

Aunque React no impone una estructura de archivos, aquí hay una sugerencia de organización que puedes usar:

# Estructura básica de un proyecto React 
my-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   │   └── images/
│   ├── components/
│   │   └── MyComponent.js
│   ├── pages/
│   │   └── HomePage.js
│   ├── services/
│   │   └── api.js
│   ├── styles/
│   │   └── main.css
│   ├── App.js
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

Gestión de estilos (CSS, Sass, Styled-components)

En React, puedes manejar los estilos de varias formas:

• CSS: Usando archivos CSS tradicionales.
• Sass: Preprocesador CSS que permite usar variables, anidación, y más.
• Styled-components: Librería para escribir CSS en JavaScript.

# Estructura básica de un proyecto React 
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

export default Button;

Manejo del estado (useState, useReducer, Context API, Redux)

El manejo del estado es crucial en aplicaciones React. Aquí tienes algunas herramientas y patrones:

• useState: Para manejar estados locales.
• useReducer: Para estados más complejos.
• Context API: Para estados globales.
• Redux: Para una gestión de estado más robusta y escalable.

# Estructura básica de un proyecto React 
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Pruebas unitarias y de integración (Jest, React Testing Library)

Es importante escribir pruebas para asegurarte de que tu aplicación funciona correctamente.

• Jest: Framework de pruebas.
• React Testing Library: Herramienta para probar componentes React.

# Estructura básica de un proyecto React 
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Integración con APIs (fetch, Axios)

Para interactuar con APIs externas, puedes usar fetch o librerías como Axios.

import axios from 'axios';

function fetchData() {
  axios.get('https://api.example.com/data')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}

Despliegue del proyecto (Netlify, Vercel, GitHub Pages)

Desplegar tu aplicación React es el paso final. Aquí hay algunas opciones populares:

• Netlify: Fácil de usar y potente.
• Vercel: Ideal para proyectos Next.js y React.
• GitHub Pages: Perfecto para proyectos pequeños y personales.

Mejores prácticas y convenciones de código

Para mantener tu código limpio y mantenible, sigue estas mejores prácticas:

• Usa PropTypes para validar las props de tus componentes.
• Sigue la convención de nombres y mantén un estilo de código consistente.
• Usa Hooks en lugar de componentes de clase cuando sea posible.

Uso de herramientas de desarrollo (ESLint, Prettier, React DevTools)

Estas herramientas mejoran tu flujo de trabajo y la calidad del código:

• ESLint: Linter para JavaScript.
• Prettier: Formatter para mantener el estilo de código consistente.
• React DevTools: Extensión de navegador para depurar aplicaciones React.

Ahora que sabes cuál es la estructura básica de un proyecto React y sus flexibles posibilidades ¡ha llegado el momento de crear tu propio proyecto React con tu propia estructura y aprender a crear una página listado en React! Para aprender cómo desarrollar este tipo de proyectos de programación para la web, te invitamos a participar en nuestro Desarrollo Web Full Stack Boocamp.

En este programa de formación intensiva, no solo aprenderás a dominar herramientas como React, sino que también aprenderás lenguajes de programación como JSX, JavaScript, CSS y HTML. Así, te convertirás en un experto del desarrollo web en pocos meses. ¡Anímate a seguir aprendiendo e inscríbete para reservar tu plaza!