.
FabianSato

ReactJS - Ejercicios

ReactJS - Ejercicios

Introducción

Aqui dejaré cada uno de los trabajos realizados en ReactJS

  • Mi github con otros trabajos
  • Cheatsheet de ReactJS

A estudiar!

Ejercicio 01 - Componente simple que devuleva datos

Desarrollar el maquetado de una pagina de detalle de un producto para un sitio de ecommerce, se deberán visualizar los siguientes datos:

  • Nombre
  • Descripción
  • Precio
  • SKU
  • Cantidad disponible
  • Realizar un maquetado con los datos, desarrollado con componentes.WW

Link ejercicio

Ejercicio 02 - Componente que devuelva titulo, nombre y descripción de una selección de basquet

  • Crear un componente llamado Equipo

  • Inyectar el componente en App.js y asegurarse que sea renderizado.

  • El componente estará compuesto por un título h1 con el nombre de una selección de básquet. También tendrá algunos datos extras que los pueden encerrar en etiquetas <p>. Algunos ejemplos: "Posición, Partidos jugados, Ligas, etc".

Link ejercicio

Ejercicio 03

Es un ejercicio simple para poder mostrar como se trabaja con una lista de strings predeterminada que con un botón vamos agregando los strings nuevos que se van mostrando por pantalla

Boton Agregar

Ejercicio 04

Desarrollar el registro de una pagina web, en el registro tener los siguientes campos:

Nombre Apellido Email Telefono Password Confirmar password Realizar solo el maquetado utilizando react js y JSX, no se deben guardar los usuarios ni realizar lógica de validación de los mismos.

Formulario simple

Ejercicio 05

Desarrollar en reactjs modulos que muestren productos y que se carguen desde stados como objetos. y un boton que cuando lo presioens cambie el contenido del objeto por un contenido nuevo. Ademas hacer un contador que inicie en 0 un boton que sirva para incrementar o decrementar ese mismo numero (se tiene que mostrar en pantalla el numero)

Componente comun

Ejercicio 06

Crear en reactjs un ejercicio donde se vean 2 equipos de basket y se cambie el contador de 1 2 3 (incrementado y decrementando) en cada uno de los equipos. Mostrar dos banderas minimos de equipos con los mismos conceptos.

Ejercicio Equipo de basket

Ejercicio 07

Desarrollar el maquetado de una pagina de detalle de un producto para un sitio de ecommerce, se deberán visualizar los siguientes datos:

Nombre Descripción Precio SKU Cantidad disponible Realizar un maquetado con los datos, desarrollado con componentes.

Agregar al mismo un botón “Comprar”.

Al hacer clic en dicho botón se deberá mostrar debajo del mismo un mensaje al usuario que diga:

“Gracias por su compra”.

Resolverlo utilizando manejo de estados.

Ejercicio listado

Ejercicio 08 - Tablero de basket 2

Se realiza el ejercicio del equipo de basket pero ahora reemplazando las clases por funciones y mejorando el codigo usando variables ternarias y puliendo el codigo con Ecmascript 6

Tablero de basket 2

Ejercicio 09 - Clases y funciones

Facil ejemplo de texto que se cambia y quita usando clases y funciones

clases y funciones

API REST

Ejercicio 10- Creacion de productos con API REST

Descripción del trabajo

Trabajo de Api reset donde se muestra el id, title, description, precio, una imagen y categorias todo realizado desde un FETCH a una API externa de ejemplo

Realizar una consulta a una api rest, para mostrar una pagina de home con un listado de productos.

Se debe visualizar:

Nombre Precio Botón “Ver Detalle” El mismo no debe realizar ninguna acción Mantener el/los componentes desarrollados hasta el momento.

Creacion de productos con API rest

Ejercicio 11 - API rest rick and morty

Se requiere crear una aplicacion que consuma de la api rest de rick y morty para mostrar los datos de los personajes e imagenes de los mismos

API rest rick and morty

ReactJS - Ejercicios
Prev post

ReactJS - Ejercicios