https://github.com/hugolebredo/react_tutorial

Pequeños ejercicios para aprender los fundamentos sobre el estado de la aplicación de React ⚛
https://github.com/hugolebredo/react_tutorial

reactjs tutorial-code

Last synced: about 1 year ago
JSON representation

Pequeños ejercicios para aprender los fundamentos sobre el estado de la aplicación de React ⚛

• Host: GitHub
• URL: https://github.com/hugolebredo/react_tutorial
• Owner: HugoLebredo
• License: gpl-3.0
• Created: 2022-10-30T18:43:01.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-13T18:13:48.000Z (over 3 years ago)
• Last Synced: 2025-01-21T12:11:20.625Z (about 1 year ago)
• Topics: reactjs, tutorial-code
• Homepage:
• Size: 57.6 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md
  • License: LICENSE

Awesome Lists containing this project

README

          

# Tutorial ReactJS I: Estado de la aplicación

Vamos a hacer unos ejercicios para comprender el funcionamiento del estado de la aplicación en ReactJS. 

Continuamos en 👉 [Tutorial ReactJS II](https://github.com/HugoLebredo/react_tutorial_2) trabajando con arrays en el estado de la aplicación.

## ¿Cómo funciona este repositorio?

- 🌱 En cada rama del repositorio se encuentra el código de los siguientes ejercicios.

- 🔗 Puedes ver el ejercicio desplegado clickando en el botón correspondiente.

- 📶 Los ejercicios tienen una dificultad incremental pero son todos muy siencillos.

- 📑 En el archivo Readme de cada rama se explica el ejercicio con un poco más de profundidad.

| Ejercicio | Descripción | Enlace |

| -- | -- | -- |

| [**Ejercicio1**](https://github.com/HugoLebredo/react_tutorial/tree/ejercicio1) | Crear un contador. | [![codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/HugoLebredo/react_tutorial/ejercicio1)|

| [**Ejercicio2**](https://github.com/HugoLebredo/react_tutorial/tree/ejercicio2) | Trabajamos con un objeto en el estado que contendrá dos contadores independientes. | [![codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/HugoLebredo/react_tutorial/ejercicio2) |

| [**Ejercicio3**](https://github.com/HugoLebredo/react_tutorial/tree/ejercicio3) | Añadimos un tercer contador que se incremente cuando  se puelse cualquier botón. | [![codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/HugoLebredo/react_tutorial/ejercicio3) |

| [**Ejercicio4**](https://github.com/HugoLebredo/react_tutorial/tree/ejercicio4) | Añadimos dos cosas array al estado que alamacena el orden de pulsación de los botones y un botón para resetear los contadores | [![codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/HugoLebredo/react_tutorial/ejercicio4) |

| [**Ejercicio5**](https://github.com/HugoLebredo/react_tutorial/tree/ejercicio5) | Se explica el *renderizado condicional* o dicho de otra manera como cambiar estilos a traves del estado. | [![codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/HugoLebredo/react_tutorial/ejercicio5) |

## Desplegar en local

Esta aplicación ha sido creada con [vite ⚡️](https://vitejs.dev/). Para desplegar el código localmente utiliza los siguientes comandos.

```bash

# Nos movemos a la carpeta de nuestro proyecto

cd my-project

# Instalamos las dependencias del package.json

npm install

# Iniciamos el proyecto

npm run dev

```