React JS — Primeros pasos

7 min readJan 27, 2022

Crea tu primera aplicación en React, la estructura de carpetas y el primer componente.

Este articulo es totalmente práctico; no vamos a detenernos en conceptos ni conocimientos básicos, vamos a crear nuestra aplicación en react y entender todo el proceso.

Si quieres saber mucho mas sobre React, puedes ver este articulo.

Empecemos a crear nuestra primera aplicación con React y nuestro primer componente.

Primer paso; Generando nuestra app

Node.JS

Para generar una aplicación de React necesitamos tener instalado Node.js en nuestro sistema.

La forma más sencilla de instalar Node.js en tu sistema es, sin ninguna duda, usar el instalador de la web oficial donde podrás decidir entre usar la versión LTS o la actual.

La recomendación siempre es usar la versión LTS, si ya tienes node instalado en tu sistema recuerda que para usar la ultima version de React, necesitarás tener Node >= 14.0.0 y npm >= 5.6 instalados en tu máquina.

Una vez que instales Node.js ya puedes generar tu aplicación en React.

Create React App

Create React App es la mejor manera de comenzar a construir una nueva aplicación usando React.

Este comando configura tu ambiente de desarrollo de forma que puedas usar las últimas características de Javascript, brindando una buena experiencia de desarrollo, y optimizando tu aplicación para producción.

Para crear un proyecto nuevo ejecuta en una terminal lo siguiente:

¿Pero qué significan estos comandos? Si quieres saberlo puedes ver el este articulo.

Luego de ejecutar estos comandos, tendremos un mensaje en la consola que nos avisa que ya podemos ver nuestro sitio web en nuestro explorador de manera local y se abre automáticamente nuestra pagina en React.

Podemos también acceder manualmente a: http://localhost:3000 y ver nuestra pagina en React.

Felicitaciones ya creaste tu primer sitio en React, un comando fue suficiente, es como magia!!

Segundo paso; Creando la estructura de nuestro proyecto

Visual Studio Code

El Visual Studio; es un editor de código fuente independiente que se ejecuta en Windows, macOS y Linux ye s la selección principal para desarrolladores web y JavaScript, con multitud de extensiones para admitir casi cualquier lenguaje de programación.

Este es el editor que vamos a usar para trabajar en nuestra app en React.

Una vez descargado e instalado el visual studio code, abrimos la carpeta de nuestro proyecto React en visual studio.

Carpetas

Con nuestro proyecto abierto, vemos una serie de archivos y carpetas que conforman todo nuestro proyecto en React. La única carpeta que nos interesa es SRC, ahi vamos a crear nuestros componentes y hacer el 99% de cosas que tengamos que hacer en nuestra app en React.

Dentro de source, creamos las siguientes carpetas;

components; En esta carpeta vamos a crear todos los componentes reutilizables de nuestra aplicación.

pages; Es la carpeta en donde vamos a crear todos nuestros contenedores principales o paginas.

Una vez creadas estas dos carpetas, creamos las que necesitamos dentro de la carpeta components.

assets; En esta carpeta vamos a guardar nuestras imágenes, fonts, animaciones y todos los elementos estáticos de nuestro proyectos.

elements; Esta carpeta es para los componentes con menor jerarquía, los que serán reutilizado por componentes más complejos y con más lógica de negocios.

layouts; Aquí viven las plantillas de diseño, son las que van a contener un layout inicial con los bloques reutilizables en nuestra app, por ejemplo, donde va a estar el navigation bar, footer, barra lateral y ese tipo de cosas que se mantienen consistentes en toda la app.

sections; Son las secciones que se pueden reutilizar en el sitio, una section es en componente que se reutiliza como bloque general, como un slide, una table de precios de tus servicios, los comentarios de tus usuarios o los logos de tus clientes y cosas así.

Tercer paso; Creando el primer componente

Una vez que ya tenemos la estructura de nuestro proyecto, podemos empezar a crear nuestro primer componente, pero antes;

App.js

Este archivo es el contenedor generar de todos los demás componentes de nuestra app, se encuentra en el root del la carpeta src. Cuando digo contenedor general, me refiero a que en el, vive todo el código de los componentes que creemos para nuestra app, dentro de ese archivo luego podremos agregar lógica para navegar entre componentes y contenedores para manejar estado, ese es nuestro punto de partida.

Así se ve nuestro archivo;

Antes de crear nuestro primer componente vamos a hacer un pequeño refactor y limpieza.

Primero vamos a convertir nuestra función tradicional en un método del tipo arrow function (si quieres saber como convertir una función tradicional en una función tipo arrow puedes verlo en este articulo);

Ahora vamos a remover todo el código html y dejar únicamente un fragment vacío, los fragments son elementos que devuelven multiple elementos. Por defecto react solo permite un componente principal dentro de un contenedor, por eso usamos estos fragments.

Agregar un fragment es sencillo, solo agregamos las etiquetas <> </>.

Entonces nuestro archivo App.js quedaría listo para empezar a desarrollar nuestra app.

Creando el componente home

Ya podemos empezar a crear nuestro primer componente, para eso tenemos que entender cómo se crea un componente en React.

Hay varias formas de crear componentes (Componentes funcionales y de clase), nosotros vamos a crear componentes funcionales, que es básicamente crear una función en javascript (si, así de sencillo es).

Para crear un componente primero tengo que crear un archivo JSX (o TSX si uso TypeScript), lo vamos a crear en nuestro carpeta pages, ya que va a ser la primera pagina de nuestra aplicación.

Ahora abrimos nuestro archivo src/pages/Home.jsx y creamos nuestro componente escribiendo una simple función tipo arrow en javascript

En el return de mi función agregue un fragment, por que es en el return donde voy a escribir todo el código visual de nuestra app, es decir los elementos html, otros componentes y todo eso que el usuario ve.

Ahora en el return de nuestro Home, voy agregar un contenido y así terminar mi primer componente, por ahora voy a agregar un h1 y un párrafo. Mi componente Home.jxs quedaría así.

Importando y usando un componente

Una vez que creamos nuestro componente, podemos importarlo en nuestro archivo App.js que es el contenedor principal de nuestra app. Una vez ahi, el usuario ya puede visualizar el contenido de nuestro componente.

Importando; para importar un componente usamos el import y señalamos la ruta donde se encuentra el componente, esto lo hacemos fuera de la función del componente contenedor por ejemplo;

Usando; para usar un componente es básicamente lo mismo que usar cualquier etiqueta HTML, solo tenemos que entender que a veces tenemos etiquetas que se auto cierran como <img /> y otros etiquetas que no se auto cierran como <div> </div>.

La mayoría de los componentes básicos, se auto cierran, nuestro componente Home, no va a ser la excepción por ahora. Aplicando la lógica de las etiquetas HTML, nuestro elemento home lo podemos usar así;

Uniendo todas las piezas

Si ya importamos nuestro componente Home y sabemos como usarlo, podemos empezar a unir todas las piezas en App.js para mostrar nuestro componente al usuario, recordemos que los componentes que se van a mostrar, tienen que estar dentro del return de la función.

Ahora terminemos de limpiar el archivo App.js, para eso vamos a remover el import del logo y de la hoja de estilo que traje por defecto React (App.css).

Una vez removido los elementos que no vamos a usar importamos nuestro componente Home y lo agregamos dentro de la función App para que el usuario lo vea. Nuestro archivo App.js terminado se vería así;

Terminamos

Ahora para ver el resultado en el explorador, nos aseguramos que aun se este ejecutando el comando npm start en nuestra terminal y si no se esta ejecutando lo volvemos a ejecutar en la carpeta del proyecto.

Si todo hiciste todo bien ya puedes ver el resultado de nuestro increíble esfuerzo!