隆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

Arquitectura de vistas y componentes con React Router DOM

21/45
Recursos

Aportes 32

Preguntas 8

Ordenar por:

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

Hola!
si no quieres tener cada importaci贸n en una linea de nuestro Archivo App.js
pueden hacer un archivo index.js en la carpeta containers.
adentro de este archivo van a importar todos los componentes, de la siguiente manera.

export { default as Home } from './Home'
export { default as CheckOut } from './CheckOut'
export { default as Information } from './Information'
export { default as Payment } from './Payment'
export { default as Success } from './Success'
export { default as NotFound } from './NotFound'

luego en nuestro archivo App.js hacemos la importancion de la siguiente manera

import { Home, CheckOut, Information, Payment, Success, NotFound } from "../containers"

o si quieren reducir aun mas el codigo

import * as Page from '../pages'

con esta segunda manera el sistema de rutas deben hacerlo asi.

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import * as Page from '../pages'

const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Page.Home />
        </Route>
        <Route exact path="/checkout">
          <Page.CheckOut />
        </Route>
        <Route exact path="/checkout/information">
          <Page.Information />
        </Route>
        <Route exact path="/checkout/payment">
          <Page.Payment />
        </Route>
        <Route exact path="/checkout/success">
          <Page.Success />
        </Route>
        <Route>
          <Page.NotFound />
        </Route>
      </Switch>
    </BrowserRouter>
  )
}

export default App

cualquiera esta bien 馃槂 espero les sirva el aporte

Ojo: En la versi贸n 6 en adelante de react-router-dom, Switch fue remplazado por Routes:

import { BrowserRouter, Routes, Route } from 'react-router-dom'

El uso es el mismo, pero cambian algunas cosas en la Route:

<BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/checkout' element={<Checkout />} />
<Route path='/checkout/information' element={<Information />} />
<Route path='/checkout/payment' element={<Payment />} />
<Route path='/checkout/success' element={<Success />} />
<Route path='*' element={<NotFound />} />
</Routes>
</BrowserRouter>

Documentaci贸n
Como ven en lugar de component se usa element y nos permite pasar un componente JSX. No se necesita el exact y para que reconozca cualquier otra p谩gina como NotFound se usa '*'
Me parece m谩s sem谩ntico y f谩cil de entender el uso de Routes en lugar de Switch 馃槈

Que onda!
He creado este boilerplate para hacer el proyecto en full Typescript. Me gustaria saber la opinion respecto a paquetes que se puedan aniadir o estructura en los archivos config:
Repositorio

Cada vez que editamos los archivos de configuraci贸n como webpack debemos volver a correr el comando npm start

Hola, les dejo mi implementaci贸n en Nextjs:

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

Pueden buscar en los commits, el de la clase 21.

npm install react-router-dom --save```
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Home from '../container/Home'
import Checkout from '../container/Checkout'
import Information from '../container/Information'
import Payment from '../container/Payment'
import Success from '../container/Success'
import NotFound from '../container/NotFound'

const App = () => {
    return ( 
        <BrowserRouter>
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route exact path='/checkout' component={Checkout}/>
                <Route exact path='/checkout/information' component={Information}/>
                <Route exact path='/checkout/payment' component={Payment}/>
                <Route exact path='/checkout/success' component={Success}/>
                <Route component={NotFound}/>
            </Switch>
        </BrowserRouter>
     );
}
 
export default App;

Puende usar

touch  Home.jsx Checkout.jsx Information.jsx Payment.jsx Success.jsx NotFound.jsx 

Para los que tengan alg煤n problema como que no se muestre el contenido renderizado y tengan con resultado una pagina en blanco cuando esten usando el webpack-dev-server con el comando serve les recomiendo echar un ojo al objeto de configuracion devServer, asi me funciono a mi:

devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"),
    },
    devMiddleware: {
      index: 'index.html',
    },
    historyApiFallback: true,
    compress: true,
    port: 3000,
  },

Observen que hay un objeto llamado devMiddleware que dentro tiene un index, este index hace refencia al archivo html que se genere dentro de la carpeta dist, es decir al filename que tengan configurado en su plugin HtmlWebpackPlugin

new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }),

Hola, para los que tuvieron problemas para las rutas porque se les descargo 鈥渞eact-router-dom鈥 a la versi贸n 6, se tienen que hacer unos cambios ya que el Switch ya no se usa, les dejo mi codigo, en resumen, se cambio el Switch, se quito el component y se agrego el element y ahora los componentes se agregan como etiqueta

<code> 
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from '../containers/Home';
import Checkout from '../containers/Checkout';
import Information from '../containers/Information';
import Payment from '../containers/Payment';
import Sucess from '../containers/Sucess';
import NotFound from '../containers/NotFound';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path="/" element={<Home />} />
                <Route exact path="/checkout" element={<Checkout />} />
                <Route exact path="/checkout/information" element={<Information />} />
                <Route exact path="/checkout/payment" element={<Payment />} />
                <Route exact path="/checkout/success" element={<Sucess />} />
                <Route element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    )
}


export default App

En la ultima version de react si estas teniendo problemas para hacer funcionar las rutas prueba agregando la extencion .jsx

<code> /* eslint-disable import/extensions */
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import Home from '../containers/Home.jsx';
import Checkout from '../containers/Checkout.jsx';
import Information from '../containers/Information.jsx';
import Payment from '../containers/Payment.jsx';
import Success from '../containers/Success.jsx';
import NotFound from '../containers/NotFound.jsx';

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/checkout" component={Checkout} />
      <Route exact path="/checkout/information" component={Information} />
      <Route exact path="/checkout/payment" component={Payment} />
      <Route exact path="/checkout/success" component={Success} />
      <Route component={NotFound} />
    </Switch>
  </BrowserRouter>
);

export default App;

Hola! en el rect谩ngulo de comentarios cuando hay un error en VSC , me aparece el siguiente error:

Unexpected block statement surrounding arrow body; move the returned value immediately after the `=>`.eslintarrow-body-style

Es con base en arrow-body-style, alguien sabe como puedo corregirlo?
Este es mi archivo .eslinrc

Para los que tienen problema con la biblioteca react-router-dom apartir de la versi贸n 6 鈥淪witch鈥 se reemplaza por 鈥淩outes鈥 y necesitas actulizar la importaci贸n desde:

import { Switch, Route } from "react-router-dom"; 

a

import { Routes ,Route } from 'react-router-dom';

Tambi茅n deben de actualizar las declaraciones de ruta de

<Route path="/" component={Home} />

a

<Route path='/welcome' element={<Home/>} />

En react-router-dom, tampoco necesita usar la declaraci贸n de ruta exacta.
Para obtener m谩s informaci贸n, pueden visitar los documentos oficiales: https://reactrouter.com/docs/en/v6/upgrading/v5

Bastante detallado y r谩pido

Los aportes de la clase me salvaron. 隆Gracias a todos!

Si no te cargan las rutas puedes cambiar Switch por Routes en la importacion de react-router-dom tambien cambiamos component y por element y los componentes los traemos en forma de tag tipo HTML como se muestra a continuacion

import React from 'react';
import { BrowserRouter,Routes, Route} from 'react-router-dom';
import { Home } from '../containers/Home';
import { Checkout } from '../containers/Checkout';
import { Information } from '../containers/Information';
import { Payment } from '../containers/Payment';
import Success from '../containers/Success';
import NotFound from '../containers/NotFound';
import '../styles/components/App.css';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path='/' element={<Home/>} />
        <Route exact path='/checkout' element={<Checkout/>} />
        <Route exact path='/checkout/information' element={<Information/>} />
        <Route exact path='/checkout/payment' element={<Payment/>} />
        <Route exact path='/checkout/success' element={<Success/>} />
        <Route element={<NotFound/>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Si empiezas a realizar un proyecto desde cero hoy en dia, la manera de utilizar react-router-dom es la siguiente

import { BrowserRouter, Routes, Route }  from "react-router-dom"

return(
  <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
      </Routes>
  </BrowserRouter>
)

El curso necesita actualizaci贸n. El Switch cambio por Routes y la estructura tambi茅n cambio, por lo que si lo hacen tan cual la clase, con la nueva versi贸n de 鈥榬eact-router-dom鈥 no les va a correr.

Hola, para la versi贸n de [email protected] cambia un poco, aqu铆 les dejo el c贸digo:

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "../containers/Home";
import Checkout from "../containers/Checkout";
import Success from "../containers/Success";
import Payment from "../containers/Payment";
import NotFound from "../containers/NotFound";
import Information from "../containers/Information";

const App = () => {
    return(
        <BrowserRouter>
            <Routes>
                <Route exact  path="/" element={<Home />}/>
                <Route exact path="checkout" element={<Checkout />} />
                <Route exact path="checkout/information" element={<Information />}/>
                <Route exact path="checkout/payment" element={<Payment />}/>
                <Route  exact path="checkout/success" element={<Success />}/>
            
                <Route path="*" element={<NotFound />}/>
            </Routes>
        </BrowserRouter>
    )
}

export default App;

El curso es genial no paren de aprender ! , me ahorre ya 2 horas de configuraci贸n con Next Js 馃槂 !

Para aquellos que tengan error con el router pueden usar:
element en vez de component.

<Route path="/" element={<Home />}></Route>

隆Hola! Estoy siguiendo este curso, pero usando NextJS + TypeScript. A煤n no lo termino, pero voy agregando poco a poco las cosas que vamos viendo.

Si les interesa ver el proyecto hasta esta clase, les dejo el link del proyecto: https://github.com/d4vsanchez/platzi-conf-merch/tree/configure-routes

21.-Arquitectura de vistas y componentes con React Router DOM

Instalamos:

npm install react-router-dom --save
//Para poder manejar las rutas de nuestra aplicaci贸n

Lo configuramos dentro de routes/App.jsx

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { Home } from "../containers/Home";
import { Checkout } from "../containers/Checkout";
import { Information } from "../containers/Information";
import { Payment } from "../containers/Payment";
import { Success } from "../containers/Success";
import { NotFound } from "../containers/NotFound";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <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>
    </BrowserRouter>
  ); //Para encapsular la navegaci贸n, switch para mostrar el que coincida con la ruta que elijo.
} //Rutas que voy a manejar con route

export { App };

En webpack:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/",
  },
}
devServer: {
    static: path.join(__dirname, "dist"),
    compress: true,
    historyApiFallback: true,
    port: 3000,
    open: true,
  },

mucha compresion la voz de oscar

Para cambiar el nombre de un componente (o variable en general) en VSCode s贸lo tenemos que hacer clic derecho sobre el nombre del componente/variable/funci贸n y seleccionar rename symbol/renombrar s铆mbolo y colocar el nuevo nombre que queremos darle, y listo, evitamos tener que renombrar archivo por archivo.

de 10 este curso! si bien tipear todo a veces da error pero despu茅s de eso, muy genial la explicaci贸n y se ha avanzado r谩pido. m谩s cursos as铆!

Un par de shortcuts de VSCode para react:
Para crear una funci贸n:

rfce
Crea la funci贸n, incluyendo el import React鈥

rafce
Crea una arrow function, incluyendo el import React鈥

驴Alguien conoce cu谩l es la extensi贸n que utiliza Oscar para crear r谩pidamente las clases en los archivos?

Usando un snipet en vscode crea los componentes con el nombre de archivo.
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

Crean el nuevo archivo .jsx con el nombre y luego usan el snippet

rafce

y eso les crea la base de cada componente con el nombre correspondiente, para no tener que copiar, pegar y renombrar

Genial. Hasta 茅ste punto, funciona como para un proyecto base (config manual) con React, React-Router, Webpack, Eslint, Prettier

m