¡Bienvenida! Este es un curso especial de React Hooks

1

¿Qué aprenderás en el Curso Profesional de React Hooks?

2

¿Qué son los React Hooks y cómo cambian el desarrollo con React?

Introducción a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusión de React Hooks y React Context

6

useReducer: como useState, pero más escalable

7

¿Qué es memoization? Programación funcional en JavaScript

8

useMemo: evita cálculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita cálculos innecesarios en funciones

11

Optimización de componentes en React con React.memo

12

Custom hooks: abstracción en la lógica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: análisis y retos de Platzi Conf Store

15

Instalación de Webpack y Babel: presets, plugins y loaders

16

Configuración de Webpack 5 y webpack-dev-server

17

Configuración de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creación de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetación y estilos del home

23

Maquetación y estilos de la lista de productos

24

Maquetación y estilos del formulario de checkout

25

Maquetación y estilos de la información del usuario

26

Maquetación y estilos del flujo de pago

27

Integración de íconos y conexión con React Router

Integración de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la página de checkout

31

useRef en la página de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicación con la API de PayPal

34

Integración de pagos con la API de PayPal

35

Completando la integración de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicación con la API de Google Maps

37

Integración de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimización de aplicaciones web con React

41

Integración de React Helmet para mejorar el SEO con meta etiquetas

42

Análisis de performance con Google Lighthouse

43

Convierte tu aplicación de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y consúmela con React.js

¿Qué sigue en tu carrera profesional?

45

Próximos pasos para especializarte en frontend

Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Maquetación y estilos de la información del usuario

25/45
Recursos

Aportes 13

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Archivo Information.jsx

import React from 'react';
import '../styles/components/Information.css';

const Information = () => {
  return (
    <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Información de contacto:</h2>
        </div>
        <div className="Information-form">
          <form action="">
            <input type="text" placeholder="Nombre completo" name="name" />
            <input type="text" placeholder="Correo Electronico" name="email" />
            <input type="text" placeholder="Direccion" name="addres" />
            <input type="text" placeholder="apto" name="apto" />
            <input type="text" placeholder="Ciudad" name="city" />
            <input type="text" placeholder="Pais" name="country" />
            <input type="text" placeholder="Estado" name="state" />
            <input type="text" placeholder="Codigo postal" name="cp" />
            <input type="text" placeholder="Telefono" name="phone" />
          </form>
        </div>
        <div className="Information-buttons">
          <div className="Information-back">Regresar</div>
          <div className="Information-next">pagar</div>
        </div>
      </div>
      <div className="Information-sidebar">
        <h3>Pedido:</h3>
        <div className="Information-item">
          <div className="Information-element">
            <h4>ITEM Name</h4>
            <span>$10</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Information;

Lo recomendable al trabajar con formularios es utilizar la etiqueta label para indicar la información que se solicita en los campos de texto. Esto es útil principalmente útil para las personas que utilizan lectores de pantalla.

import React from 'react';
import '../styles/components/Information.css';

const Information = () => (
  <div className="Information">
    <div className="Information-content">
      <div className="Information-head">
        <h2>Contact Information:</h2>
      </div>
      <div className="Information-form">
        <form action="">
          <label htmlFor="name">
            Full Name
            <input type="text" placeholder="Full Name" name="name" id="name" />
          </label>
          <label htmlFor="email">
            Email
            <input type="text" placeholder="Email" name="email" id="email" />
          </label>
          <label htmlFor="address">
            Address
            <input
              type="text"
              placeholder="Address"
              name="address"
              id="address"
            />
          </label>
          <label htmlFor="apto">
            APT
            <input type="text" placeholder="APT" name="apto" id="apto" />
          </label>
          <label htmlFor="country">
            Country
            <input
              type="text"
              placeholder="Country"
              name="country"
              id="country"
            />
          </label>
          <label htmlFor="state">
            State
            <input type="text" placeholder="State" name="state" id="state" />
          </label>
          <label htmlFor="city">
            City
            <input type="text" placeholder="City" name="city" id="city" />
          </label>
          <label htmlFor="cp">
            Postal Code
            <input type="text" placeholder="Postal Code" name="cp" id="cp" />
          </label>
          <label htmlFor="phone">
            Phone
            <input type="text" placeholder="Prone" name="phone" id="phone" />
          </label>
        </form>
      </div>
      <div className="Information-buttons">
        <div className="Information-back">Go Back</div>
        <div className="Information-next">Pay</div>
      </div>
    </div>
    <div className="Information-sidebar">
      <h3>Order Summary:</h3>
      <div className="Information-item">
        <div className="Information-element">
          <h4>ITEM Name</h4>
          <span>$10</span>
        </div>
      </div>
    </div>
  </div>
);

export default Information;

Recuerda: “Programas para humanos, no para máquinas”…aunque parece obvio, no está demás recordarlo…

No se supone que es mala practica usar tanto <div /> y no <section />, <main /> o <nav />?

Para el que lo este haciendo en ingles:

import React from 'react';

import '../styles/components/Information.css';

const Information = () => {
  return (
    <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Contact Information:</h2>
        </div>

        <div className="Information-form">
          <form action="">
            <input type="text" placeholder="Name" name="name" />
            <input type="text" placeholder="Email" name="email" />
            <input type="text" placeholder="Country" name="country" />
            <input type="text" placeholder="City" name="city" />
            <input type="text" placeholder="State" name="state" />
            <input type="text" placeholder="Adress" name="adress" />
            <input type="text" placeholder="Apartament" name="apto" />
            <input type="text" placeholder="Postal code" name="cp" />
            <input type="text" placeholder="Phone Number" name="phone" />
          </form>
        </div>

        <div className="Information-buttons">
          <div className="Information-back">
            Go Back
          </div>

          <div className="Information-next">
            Continue and Pay
          </div>
        </div>
      </div>

      <div className="information-Sidebar">
        <h3>Order:</h3>

        <div className="Information-item">
          <div className="Information-element">
            <h4>ITEM Name</h4>
            <span>$10</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Information;

Hola, les dejo el avance de mi proyecto, hecho en Nextjs con Styled Components:

https://github.com/danyel117/platzi-conf-store

Commit clase 25.

Es normal tantas etiquetas “Div” en los templates.?

Queria aportar sobre los nombres de los componentes.
.
Al ver terminado el componente que estamos trabajando, que es el formulario que la persona llena con los datos de compra, y a un costado tiene el resumen de lo que esta comprando. esto es lo que se llama Checkout.
.
De tal manera que el componente que vimos en la clase anterior tiene mas sentido llamarlo shoppingCart, Order o algo asi.

  <div className="Information">
      <div className="Information-content">
        <div className="Information-head">
          <h2>Informacion de contacto</h2>
        </div>
        <div className="Information-from">
          <form action="">
            <input type="text" placeholder="Nombre completo" name="name" />
            <input type="text" placeholder="Correo electronico" name="email" />
            <input type="text" placeholder="Direccion" name="address" />
            <input type="text" placeholder="Apto" name="apto" />
            <input type="text" placeholder="Ciudad" name="city" />
            <input type="text" placeholder="Pais" name="counrty" />
            <input type="text" placeholder="Estado" name="state" />
            <input type="text" placeholder="Codigo postal" name="cp" />
            <input type="text" placeholder="Telefono" name="phone" />
          </form>
        </div>
        <div className="Information-buttons">
          <div className="Information-back">Regresar</div>
          <div className="Information-next">Pagar</div>
        </div>
      </div>
      <div className="Information-sidebar ">
        <h3>Pedido:</h3>
        <div className="Information-item">
          <div className="Information-element">
            <h4>
              Item name <spam>10 $</spam>
            </h4>
          </div>
        </div>
      </div>
    </div>

Me parece que pudieron ahorrarse estas clases, entregando el boilerplate de estas secciones ya realizado de una mejor forma (estoy suponiendo que la calidad la están sacrificando por el tiempo). Esta forma de hacer HTML no es “profesional” tal como lo dice el título del curso.
 
El sólo hecho de no tener labels y depender de placeholders significa que no estamos implementando correctamente WCAG.

Information .css

.Information {
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  grid-row-gap: 1.5em;
  display: grid;
  margin: 0 0 4em 0;
}
.Information-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Information-sidebar {
  margin: 10px 0 0 0;
}
.Information-back {
  margin: 10px 0 0 0;
}
.Information-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Information-item .fas {
  margin: 0 0 0 10px;
  color: rgba(0,0,0,0.4);
  cursor: pointer;
}
.Information-item button {
  background-color: transparent;
  border: none;
  outline: none;
}
.Information-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.Information-element h4 {
  margin: 0;
}
h2 {
  margin: 0 0 8px 0;
  padding: 0;
}
h3 {
  font-size: 18px;
  margin: 0 0 8px 0;
  padding: 0;
}
input {
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  color: rgba(0,0,0,0.75);
  display: inline-block;
  font-feature-settings: "tnum";
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  list-style: none;
  margin: 0 0 8px 0;
  outline: 0;
  padding: 4px 12px;
  width: 100%;
  box-sizing: border-box;
}
.Information-buttons {
  margin: 10px 0 0 ;
}
.Information button {
  box-shadow: inset 0px 1px 0px 0px #bee2f9;
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    background-color: #63b8ee;
    border-radius: 6px;
    border: 1px solid #3866a3;
    display: inline-block;
    cursor: pointer;
    color: #14396a;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #7cacde;
    width: 100%;
    display: block;
    outline: none;
}

Genial!

n