隆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 del home

22/45
Recursos

Aportes 18

Preguntas 7

Ordenar por:

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

Si a alguien le sirve, el shortcut:

rafce

importa react, crea el componente y lo exporta.

Para aquellos que les tarde en compilar al ejecutar npm start, simplemente agreguen --mode development al script de start en el package.json

"start": "webpack serve --mode development"

鈥淭odos los izquierdos reservados鈥 Jajaja que buen pie de p谩gina

Deberiamos usar los elementos de html header y footer a fines de este curso eso no es importante pero es bueno acostumbrarse a utilizar los elementos semanticos correspondientes.

Soy yo o en el archivo Header.css no viene la clase .Header-title?

Por si alguno de ustedes est谩 usando la v6 de react router, la manera de preservar un layout es ligeramente diferente, en nuestro elemento Layout importamos Outlet de react-router-dom, de acuerdo a la documentaci贸n, este componente ser谩 reemplazado por los componentes hijos de nuestras rutas anidadas:

import { Outlet } from 'react-router-dom'

import Header from './Header'
import Footer from './Footer'

import './index.css'

const Layout: FC = () => {
  return (
    <div className='Main'>
      <Header />
      <Outlet />
      <Footer />
    </div>
  )
}

export default Layout

Luego, en nuestro archivo de rutas:

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

import { Home, Checkout, Information, Payment, Success, NotFound } from 'views'
import { Layout } from 'components'

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Layout />}>
          <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 />} />
        </Route>
      </Routes>
    </Router>
  )
}

export default App

Haciendo esto el layout se conservar谩 en todas las dem谩s rutas anidadas y cada Route reemplazar谩 al Outlet que declaramos en nuestro Layout.

Los css est谩n mal codificados. Me sale un dise帽o diferente.

Hola, cuando ejecuto mi webpack con el comando npm run start no me ejecuta mi c贸digo o mejor dicho no me lo representa en el puerto aqu铆 les paso mis archivos tanto webpack como lo que me dispara por consola.

Agradecer铆a cualquier ayuda.

<code>
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: "/"
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/[name].css',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    port: 3001,
  },
};

Consola

<code>
 [email protected] 顐 ~/Documentos/cursos/platzi-conf 顐 顐 master 卤 顐 npm run start

> [email protected] start /home/andresargote/Documentos/cursos/platzi-conf
> webpack serve --mode development

鈩 锝ds锝: Project is running at http://localhost:3001/
鈩 锝ds锝: webpack output is served from undefined
鈩 锝ds锝: Content not from webpack is served from /home/andresargote/Documentos/cursos/platzi-conf/dist
鈩 锝ds锝: 404s will fallback to /index.html
(node:17912) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
鈩 锝dm锝: asset bundle.js 1.19 MiB [emitted] (name: main)
asset ./index.html 1.76 KiB [emitted]
asset assets/main.css 715 bytes [emitted] (name: main)
Entrypoint main 1.19 MiB = assets/main.css 715 bytes bundle.js 1.19 MiB
runtime modules 1.19 KiB 5 modules
cacheable modules 1.08 MiB
  modules by path ./node_modules/ 1.07 MiB 20 modules
  modules by path ./src/ 3.76 KiB
    modules by path ./src/containers/*.jsx 948 bytes 6 modules
    modules by path ./src/components/*.jsx 1.2 KiB 3 modules
    modules by path ./src/styles/components/*.css 150 bytes 3 modules
    ./src/index.js 246 bytes [built] [code generated]
    ./src/routes/App.jsx 1.25 KiB [built] [code generated]
css modules 711 bytes
  css ./node_modules/css-loader/dist/cjs.js!./src/styles/components/Layout.css 84 bytes [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./src/styles/components/Layout.css (1) 212 bytes [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./src/styles/components/Header.css 352 bytes [code generated]
  css ./node_modules/css-loader/dist/cjs.js!./src/styles/components/Footer.css 63 bytes [code generated]
webpack 5.6.0 compiled successfully in 1035 ms
鈩 锝dm锝: Compiled successfully.
URIError: Failed to decode param '/%PUBLIC_URL%/manifest.json'
    at decodeURIComponent (<anonymous>)
    at decode_param (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:574:18)
    at next (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:220:15)
    at expressInit (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:317:13)
    at /home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:335:12)
URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
    at decodeURIComponent (<anonymous>)
    at decode_param (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/layer.js:172:12)
    at Layer.match (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/layer.js:123:27)
    at matchLayer (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:574:18)
    at next (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:220:15)
    at expressInit (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/middleware/init.js:40:5)
    at Layer.handle [as handle_request] (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:317:13)
    at /home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/home/andresargote/Documentos/cursos/platzi-conf/node_modules/express/lib/router/index.js:335:12)

Les recomiendo utilizar HTML sem谩ntico para el desarrollo de sus proyectos. Por ejemplo, utilizar la etiqueta <footer> 鈥 </footer> como contenedor del componente Footer, y <header> 鈥 </header> y <nav> 鈥 </nav> para el componente Header.

Dejemos de usar Divs para todo y comencemos a programar tomando en cuenta a todos.

Les dejo estos art铆culo d贸nde pueden leer acerca de el HTML sem谩ntico y la accesibilidad:

隆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/create-layout

La verdad es que tarde bastante en entender el pie de pagina

Hola, en mi caso estoy siguiendo este proyecto con Nextjs. Para los estilos estoy usando styled components.

Les dejo mi repositorio:
https://github.com/danyel117/platzi-conf-store

Commit clase 22.

Si est谩n utilizando React Router Dom v.6 pueden utilizar Outlet en su archivo Layout.jsx en lugar de { children }

Layout.jsx

import { Outlet } from 'react-router-dom'
import Header from './Header'
import Footer from './Footer'

const Layout = () => {
  return (
    <>
      <Header />
        <Outlet />
      <Footer />
    </>
  )
}


Pero OJO 馃憖, en su App.jsx tambien debe cambiar un poco la estructura de sus Routes:

App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from '../components/Layout'
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'

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Layout />}>
          <Route index 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 />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

Dentro del Webpack.config.js podemos poner esta configuracion que nos ayuda a acortar los import a lo largo de nuestra app

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      '@styles': path.resolve(__dirname, 'src/styles/components'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@containers': path.resolve(__dirname, 'src/containers'),
    },
  },

Esta configuracion nos permite exportar los Stylos, componentes, container y demas carpetas con como se ve arriba, en el archivo que quieras llamar cualquier componente, estilo o container solo debes de hacer lo siguiente:

import '@styles/Footer.css';
import { Information } from '@containers/Information';
import { Header } from '@components/Header';

donde la sintaxis es poner el @ y el nombre que le hayas puesto a la ruta en el webpack.config.js

Pueden utilizar el siguiente comando en la terminal de Ubuntu, les abrir谩 un explorar de Windows para que puedan copiar, pegar y cortar archivos de una manera mas sencilla desde Ubuntu<=>Window.

explorer.exe .

Mor铆 con todos los izquierdos reservados haha

A alguien mas le pasa que webpack no se recompila automaticamente? No he podido dar con el error 馃槮

No me cargaron los estilos de header y footer, 驴a que se debe?