lexzer42 / beginner-react.js-coding

Este es un proyecto de una aplicación web escrita en TypeScript con React. This is a project of a web application written in TypeScript with React.

Beginner-React.js-Coding-

                                          Video

Español

Este código es una aplicación de React escrita en TypeScript. La aplicación muestra un contador y permite incrementarlo al hacer clic en un botón. También obtiene información de usuarios aleatorios utilizando la API de "randomuser.me" y muestra la lista de usuarios. Al hacer clic en otro botón, se cargan más usuarios. Además, hay un botón que muestra u oculta la lista de usuarios.

La aplicación utiliza estados para almacenar el contador, el número de página para realizar las solicitudes a la API, la información de los usuarios y el estado que controla si se muestra la lista de usuarios. Utiliza efectos para realizar una solicitud inicial a la API y cada vez que se actualiza el número de página.

El código utiliza interfaces de TypeScript para definir los tipos de los datos recibidos de la API y las funciones que se utilizan. También utiliza referencias para mantener una función actualizada que se utiliza al cargar más usuarios.

Como usar

1. Primero, asegúrate de tener npm instalado en tu máquina. Si no lo tienes, puedes descargarlo e instalarlo desde la página oficial (https://www.npmjs.com/get-npm).

2. Abre una ventana de comando o terminal y navega hasta el directorio del proyecto.

3. Ejecuta el comando npm install en la ventana de comando o terminal. Esto instalará todas las dependencias necesarias para el proyecto.

4. Después de que la instalación esté completa, ejecuta el comando npm start. Esto iniciará el servidor de desarrollo y abrirá la aplicación en tu navegador predeterminado.

Ahora deberías ver la aplicación funcionando en tu navegador. Puedes interactuar con el contador haciendo clic en el botón "Incrementar contador!". También se mostrará la lista de usuarios, y puedes cargar más usuarios haciendo clic en el botón "Siguiente usuario!". Puedes ocultar o mostrar la lista de usuarios haciendo clic en el botón "Mostrar lista de usuarios".

English

This code is a React application written in TypeScript. The application displays a counter and allows it to be incremented by clicking a button. It also fetches random user information using the "randomuser.me" API and displays a list of users. Clicking another button loads more users. Additionally, there is a button that shows or hides the user list.

The application uses states to store the counter, the page number for making API requests, the user information, and the state that controls whether the user list is shown. It uses effects to make an initial API request and every time the page number is updated.

The code uses TypeScript interfaces to define the types of data received from the API and the functions used. It also uses references to keep a function up to date that is used when loading more users.

How to use it

1. First, make sure you have npm installed on your machine. If not, you can download and install it from the official website (https://www.npmjs.com/get-npm).

2. Open a command prompt or terminal and navigate to the project directory.

3. Run the command npm install in the command prompt or terminal. This will install all the necessary dependencies for the project.

4. After the installation is complete, run the command npm start. This will start the development server and launch the application in your default browser.

You should now see the application running in your browser. You can interact with the counter by clicking the "Incrementar contador!" button. The user list will also be displayed, and you can load more users by clicking the "Siguiente usuario!" button. You can toggle the visibility of the user list by clicking the "Mostrar lista de usuarios" button.