Introducción a ReactJS

ReactJS es una biblioteca front-end popular utilizada para construir interfaces de usuario y aplicaciones de una sola página. En este artículo, exploraremos los conceptos básicos de ReactJS y crearemos un proyecto completo desde cero.

Configuración del Proyecto

Para empezar, necesitamos tener Node.js y un editor de código de nuestra elección instalados en nuestra máquina. En este caso, utilizaremos Visual Studio Code. Creamos una nueva carpeta llamada "react-youtube" y la abrimos directamente en Visual Studio Code.

Setting Up the Project

Luego abrimos la terminal directamente desde Visual Studio Code y utilizamos Vite, que es más rápido que Create React App, para ejecutar los siguientes comandos: npm create vite@latest my-react-app. Esto creará un nuevo proyecto React.

Creando el Primer Componente

Comenzamos creando un nuevo componente llamado WelcomeMessage.jsx. Creamos una carpeta llamada components donde insertaremos todos nuestros componentes. En el archivo WelcomeMessage.jsx, exportamos una función que devuelve una porción de JSX.

Creating the First Component

Luego vamos a nuestro archivo App.jsx e importamos el componente WelcomeMessage. Llamamos al componente WelcomeMessage y le pasamos una prop message.

Pasando Props a los Componentes

Introducimos el concepto de props, que nos permite pasar diferentes parámetros al mismo componente. Pasamos una prop message al componente WelcomeMessage y la usamos para mostrar un mensaje dinámico.

Passing Props to Components

Creando un Componente de Contador

Creamos un nuevo componente llamado Counter.jsx y usamos el hook useState para crear una variable de estado count. Luego usamos la función setCount para incrementar la variable count cuando se hace clic en el botón.

Creating a Counter Component

Usando el Hook useState

Introducimos el hook useState, que nos permite crear una variable de estado y una función para actualizarla. Usamos el hook useState para crear una variable de estado count y una función setCount para actualizarla.

Using the useState Hook

Obteniendo Datos de una API

Introducimos el hook useEffect, que nos permite obtener datos de una API cuando se monta el componente. Usamos el hook useEffect para obtener datos de la Random User API y mostrar el nombre y la imagen del usuario.

Fetching Data from an API

Conclusión

En conclusión, hemos aprendido cómo crear un proyecto React completo desde cero. Hemos aprendido cómo crear componentes, pasar props a los componentes, usar el hook useState y obtener datos de una API usando el hook useEffect.

Conclusion

Como proyecto final, creamos un componente de lista de tareas que permite a los usuarios agregar y eliminar tareas. Usamos el hook useState para crear una variable de estado tasks y una función setTasks para actualizarla.

Final Project

Espero que este artículo te haya sido útil. Si tienes alguna pregunta o quieres aprender más sobre React, por favor deja un comentario abajo.