隆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

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

44/45
Recursos

Aportes 27

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

es mala practica hacer uso del async para useEffect como el lo hizo lo mejor es asi :

const MyFunctionnalComponent: React.FC = props => {
  useEffect(() => {
    // Create an scoped async function in the hook
    async function anyNameFunction() {
      await loadContent();
    }
    // Execute the created function directly
    anyNameFunction();
  }, []);```

Si quieren descargar las imagenes que se usan en Platzi conf merch solo tienen que acceder a las urls que vienen en el campo image de initialState.js:

Despues de renegar mucho (mucho) (literalmente mas de 6 horas) consegu铆 hacer deploy en Google Cloud Services siguiendo esta documentaci贸n de Strapi:

https://strapi.io/documentation/developer-docs/latest/deployment/google-app-engine.html

Impresionante lo satisfactorio que fue verlo desplegado y funcionando al 100%.
Es un poco complejo hacerlo, pero es gratis! Si les surge alguna duda escribanme al privado y tratar茅 de ayudarlos. Un saludo companeros!

Por si a alguien llegara a tener este error en su consola 鈥淯ncaught ReferenceError: regeneratorRuntime is not defined鈥 pueden checar este link

O pueden instalar 鈥榥pm i --save-dev @babel/plugin-transform-runtime鈥 y dejar asi su archivo .babelrc

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

Aqu铆 est谩 la Cloud Function

Como dijo Javier, es mala pr谩ctica usar async await en el loop. No s茅 si React actualiz贸 algo o qu茅 pero mi aplicaci贸n se rompi贸 de repente. La correg铆 as铆:

// useInitialState.js

  useEffect(() => {
    const getData = async () => {
      const response = await axios(API);
      setProducts(response.data);
    };

    getData();
  }, []);
// useGoogleAdress.js

  useEffect(() => {
    const getData = async () => {
      const response = await axios(API);
      setMap(response.data.results[0].geometry.location);
    };

    getData();
  }, []);

Deja un 鉂わ笍si estas de acuerdo que este curso deberia ser actualizado.

Siento que en Platzi falta un curso de Strapi o de un Headless CMS.

Si estas viendo esto en 2022 y usando la V4 de Strapi:

Para obtener las imagenes en el llamado en la api nadamas tienes que agregar este parametro a la URL:

?populate=%2A

Y todo junto se ve asi:

http://localhost:3006/api/productss?populate=%2A

Fuente: Strapi Docs

la api no me devuelve los productos 馃槮

Muy buen curso s铆 se帽or, un grande don Oscar!

Si a alguien le pasa lo mismo, cuando cambian el puerto que trae por defecto y no les funciona usen npm run build e intente de nuevo.

  1. Otro CMS (a mi me gusta m谩s aunque fue interesante conocer Strapi) es Contenful y es bastate simple de trabajar: https://www.contentful.com/

  2. Les dejo un paquete para crear el loading para React f谩cilmente: https://www.npmjs.com/package/react-loader-spinner

44.-Crea una API con Strapi CMS y cons煤mela con React.js

Para hacer la api hacemos

npm create-strapi-app platziconf-backend --quickstart  //Aqui estar谩 nuestra API

Cuando termina nos da un admin, strapi es visual, no es nada de c贸digo ya que nos da una interfaz para crear la integraci贸n y todo lo que necesita la API.

Si queremos cambiar el puerto en el que se ejecuta podemos cambiarlo entrando a la parte backend del proyecto en la carpeta de config/server.js lo cambiamos a un puerto que se adapte a nuestra configuraci贸n.

npm run develop //Para poder visualizarlo

Configuramos el proyecto con nuestro nombre y la configuraci贸n que nos pide.

Vamos a content-types builder para crear la colecci贸n de productos con los que voy a mostrar en la tienda.

Seleccionamos crear nueva colecci贸n y agregamos elementos dependiendo del tipo que sean, por ejemplo: UID (identificador), num茅ricos, im谩genes, texto, etc.

En configuraci贸n tenemos los roles que podemos tener, los usuarios que pueden acceder, as铆 como tambi茅n los permisos que necesitamos.

Vamos a users & permissions plugin / roles 鈬 public para hacer p煤blico el recurso. Le vamos a otorgar el permiso de find para poder ver en get los productos y guardamos.

Ahora vamos a nuestras colecciones y agregamos un nuevo producto con los campos que establecimos previamente. Le damos publicar para que este listo y as铆 sucesivamente.

Nos podemos mover a el puerto donde tenemos desplegado el proyecto (la parte del backend) + /products para que nos muestre la api. Pj: localhost:3005/products.

En initialState solo dejamos: cart, buyer, orders.

En useInitialState a帽adimos la configuraci贸n de la API:

import axios from 'axios';

const API= "localhost:3005/products"; //La llamamos

//UseState que se encarga de tener los productos.
const [products, setProducts] = useState([]);

//useEffect para llamar el API y guardar el resultado en los productos.
useEffect(() => {
    const getData = async () => {
      const response = await axios(API);
      setProducts(response.data);
    };

    getData();
  }, []);

return {products,}

Para evitar que la aplicaci贸n se rompa en el render inicial vamos a garantizar que esto no pase haciendo una validaci贸n en App.jsx:

//Validar si est谩 lleno con informaci贸n 
const isEmpty = Object.keys(initialState.state).lenght;
//Como el estado es un objeto vamos a validar si tiene elementos

//En el return
<>
{isEmpty > 0 ? (
<AppContext.Provider value={initialState}>
      <BrowserRouter>
        <Layout>
          <Switch>
            {/*switch es el children de layout*/}
            <Route exact path="/" component={Home}></Route>{" "}
            {/*Exacta, con path especifico aqu铆  es el index y un componente*/}
            <Route exact path="/checkout" component={Checkout}></Route>
            <Route
              exact
              path="/checkout/information"
              component={Information}
            ></Route>
            <Route exact path="/checkout/payment" component={Payment}></Route>
            <Route exact path="/checkout/success" component={Success}></Route>
            <Route component={NotFound}></Route>{" "}
            {/*Ruta 404 cuando sucede un error*/}
          </Switch>
        </Layout>
      </BrowserRouter>
    </AppContext.Provider>
) : <h1>Loading...</h1>}

</>

En products actualizamos:

//Como products ya no est谩 dentro de state, sino que esta en el context.
const { products, addToCart } = useContext(AppContext);

Para poder ver las im谩genes vamos a product y modificamos:

<img src={`https://localhost:3006/${product.image[0].url}`}> 

npx create-strapi-app NAME_APP --quickstart ```

Si se desarrollara para una empresa una tienda, como la que hicimos en este curso, y por nuestra cuenta creamos el backend, 驴habr铆a que desarrollar tambi茅n un CMS? o 驴C贸mo har铆a el cliente para publicar o dar de baja nuevos productos?

Que genial herramienta es Strapi!

SI les sale 鈥淯ncaught ReferenceError: regeneratorRuntime is not defined鈥 pueden utilizar .then() y .catch()

Bueno esto me tomo tiempo, resulta que a la fecha strapi ha cambiado un poco, Cuando deseen mirar el Json tienen que poner localhost: 鈥楶UERTO鈥/api/products, antes de esto recuerden ir a la ruta CONF > COMPLEMENTO DE USUARIOS Y PERMISOS > ROLES > P脷BLICO y marcar la casilla FIND

No me funciono con la api de Strapi pero si con la fake api del profe 馃槮

Uno de los mejores profesores Oscar Barajas Tavares.

OoOOoOO, gracias Oscar, te quiero

Si quieren hacer el deploy de su API en heroku deberan tomar en cuanta algunas cosas.

Lo primero es que SQLite noes es compatible con heroku, por lo que deberan cambiar la base de datos, como Mongo.

Si usan los servidores gratuitos de heroku estos eliminaran cada cierto tiempo las imagenes que almacenadas con strapi. Para evitar esto ultimo debes configurar tu API para almacenar las imagenes en otro lado, yo utilice este plugin de firebase. strapi-provider-upload-to-firebase

Mis queridos Platzibers les comento a los que esten presentando error con el sqlite3 relacionado con node-pre-gyp se soluciona eliminando los node_modules y cambiando la version del sqlite3 de latest por la 5.0.0, no entiendo por que raz贸n no funciona con la latest seria chevere una retroalimentaci贸n, en todo caso solo es hacer ese cambio, ejecutar el comando npm install y 隆guala! tenemos nuestro proyecto corriendo 隆saludos!

Los productos (o lo que sea) que metan en la API en desarrollo, no pasa a modo producci贸n, osea que una vez desplegado a producci贸n hay que subir todos los productos de nuevo. En desarrollo suban 2 o 3 productos a modo de prueba y una vez desplegado suben todo, no pierdan tiempo como yo jajaj
Los invito a ver mi repo y mi despliegue
.
https://github.com/Irungaray/Merch-Store
.
https://merchstore-85845.web.app/

No me deja crear una nueva colecci贸n y en consola me da el siguiente error ):


[2021-01-27T00:20:14.089Z] error Bootstrap function in plugin "users-permissions" failed
[2021-01-27T00:20:14.091Z] error TimeoutError: Knex: Timeout acquiring a connection. The pool is probably full. Are you missing a .transacting(trx) call?


Ayudaaaaa

n