DerekAlmanza / LearningReact

Repositorio creado para aprender React, publicado para aprendizaje propio y para quien le sirva

LearningReact

Repositorio creado para aprender React, publicado para aprendizaje propio y para quien le sirva.

Cada carpeta numerada en la raíz del repositorio es un proyecto creado con React.

Autor. 👤

Almanza Infante Derek. F. Ciencias.

Modo de uso.

Clone el repositorio y ejecute index.html de la carpeta, ahí tendrá un menú sencillo para poder desplegar los temas.

También puede ver la página desde aquí: https://derekalmanza.github.io/LearningReact/

Notas agregadas.

Pruebas unitarias y de integración.

Pruebas unitarias: Enfocadas en pequeñas funcionalidades.

Pruebas de integración: Enfocadas en cómo funcionan varias piezas en conjunto.

Características de las pruebas:

1. Fáciles de escribir.
2. Fáciles de leer.
3. Confiables.
4. Rápidas.
5. Principalmente unitarias.

Temas a ver:

• AAA

  • Arrange - Arreglar: Preparamos el estado inicial inicializando variables y realizando las importaciones necesarias.

  • Act - Actuar: Aplicamos acciones llamando métodos, simulando clicks o realizando acciones del paso anterior.

  • Assert - Afirmar: Observar el componente resultante; que algo cambie, que algo incremente o que no suceda,

• Jest

• Expect

• toBe

• Enzyme: npm install --save-dev @wojtekmaj/enzyme-adapter-react-17

• Comandos útiles en la terminal para pruebas.

• Revisar elementos renderizados en el componente.

• Simular eventos

Custom Hooks

Manera de extraer funcionalidades de algún componente ya realizado pero usar este método y manejar su información de una manera más sencilla. El estándar aceptado es colocar antes del nombre de archivo un use. p.e useMiHookPersonalizado.js.

Apps creadas con React: 💻

1. Intro a React.

2. Repaso de JS.

   • Constantes y variables.
   • Template Strings. (Testeado)
   • Objetos.
   • Arreglos.
   • Funciones. (Testeado)
   • Desestructuración de objetos.
   • Desestructuración de arreglos. (Testeado)
   • Import y Export. (Testeado)
   • Promises. (Testeado)
   • FetchAPI.
   • Async - Await. (Testeado)
   • Operador ternario.

3. Props.

   • Componentes.
   • Retornar fragmentos <></>
   • Imprimir variables.
   • Propiedades. (Testeado)
   • Principio de Hooks.

4. Counter App. (Testeado)

   • Counter App Creado.

5. GifExpertApp.

   • UseState.
   • Comunicación entre componentes.
   • UseEffect.
   • Keys
   • Fetch a una API.
   • Comunicación entre componentes.
   • Clases de CSS.
   • Helpers - Métodos Auxiliares.
   • Custom Hooks.
   • Enviar métodos como argumentos.