隆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

Continuous integration y continuous delivery con GitHub Actions

39/45
Recursos

Aportes 21

Preguntas 16

Ordenar por:

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

Para los que hayan creado su repositorio en Github despues de se hiciera el cambio en la rama principal ahora llamada main y no les este funcionando el deploy. Les comparto el archivo yml con ese cambio.

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Para los que ten铆an las variables en .env
1- En el repositorio de GitHubs en Settings > Secrets > New repository secret y agregar las variables de entorno.
Deberia quedar algo asi:

2- Luego en el deploy-to-firebase.yml en el paso de Build agregar las variables de esta forma para que las tome de los secrets.

- name: Build
   run: npm run build
       env:
       	GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
   	PAYPAL_CLIENT_ID: ${{ secrets.PAYPAL_CLIENT_ID }}

3- Hacer commit, push y en el deploy deber铆a aparecer algo asi:

Si tienes problemas para hacer login desde la terminal, agrega --interactive al comando:

 firebase login --interactive```

Hice el deploy habiendo hecho el ejercicio con create-react-app con esta configuraci贸n:

deploy-to-firebase.yml:

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: build
          path: build
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: build
          path: build
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Todo lo dem谩s, fueron los mismos pasos.

ADVERTENCIA SI USAS VARIABLES DE ENTORNO:
Webpack 5 ya no trabaja con variables de node como process. Enntonces para llevar utilizar variables de entorno y poder subirlos a producci贸n implementa lo siguiente:

webapck.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
require('dotenv').config();
// const Dotenv = require('dotenv-webpack');

/** @type {import('webpack').Configuration} */
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:'/'
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
    }),
    new MiniCssExtractPlugin({
      filename: 'assets/[name].css',
    }),
    new CopyPlugin({
      patterns: [
        { from: 'public/manifest.json', to: '' },
        { from: 'public/service-worker.js', to: '' },
        { from: 'public/icon.png', to: 'assets' },
      ],
    }),
    new webpack.DefinePlugin({
      'process.env.PAYPAL_CLIENT_PP': JSON.stringify(process.env.PAYPAL_CLIENT_PP),
      'process.env.GOOGLE_MAPS_API_KEY': JSON.stringify(process.env.GOOGLE_MAPS_API_KEY),
		}),
  ],
  devServer: {
    allowedHosts: path.join(__dirname, 'dist'),
    historyApiFallback: true,
    compress: true,
    port: 3005,
  },
};

Luego, ahora ya no se trabaja en master, sino en main, el siguiente
.github/workflows/deploy-to-firebase.yml

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
        env: 
          GOOGLE_MAPS_API_KEY: ${{ secrets.GOOGLE_MAPS_API_KEY }}
          PAYPAL_CLIENT_PP: ${{ secrets.PAYPAL_CLIENT_PP }}
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

y ahora puedes utilizar el process.env.ETC
Yo utiliz un archivo de configuracion
config/index.js

const config = {
    clientIdPaypal: process.env.PAYPAL_CLIENT_PP,
    googleMapsApiKey: process.env.GOOGLE_MAPS_API_KEY
}

export default config

Ya en github van setting del proyecto> Secrets>actions > New repository y agregan sus claves
脡xitos!

Hola a mi no me dejaba hace commit tuve que instalar un paquete

npm i pre-commit --save-dev

y ah铆 ya pude hacerlo si a alguien le sirve saludos

Antes de mandar a producci贸n ser铆a un buen detalle poner un Loader para que el usuario tenga un feedback mientras carga la API:

// Products.jsx

import Loader from './Loader';
import '../styles/components/Products.css';

const Products = () => {
  const { products, addToCart } = useContext(AppContext);

  if (products.length == 0) {
    return <Loader />
  }

// ...
}

// Loader.jsx

import React from 'react'

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

const Loader = () => {
  return (
    <div className="lds-grid">
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
      <div />
    </div>
  );
}

export default Loader;

// Loader.css

.lds-grid {
  display: grid;
  position: relative;
  width: 64px;
  height: 64px;
}

.lds-grid div {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #000;
  animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
  top: 6px;
  left: 6px;
  animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
  top: 6px;
  left: 26px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
  top: 6px;
  left: 45px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
  top: 26px;
  left: 6px;
  animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
  top: 26px;
  left: 26px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
  top: 26px;
  left: 45px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
  top: 45px;
  left: 6px;
  animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
  top: 45px;
  left: 26px;
  animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
  top: 45px;
  left: 45px;
  animation-delay: -1.6s;
}

@keyframes lds-grid {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

Para los que al hacer firebase login les abre la pesta帽a en google, pero al intentar hacer la autentificacion los mando a una url localhost y no les funciona ami me funciono haciendo un

firebase login --no-localhost

El unico paso de mas que tienen que es que google les va a dar una key y esta la tienen que pegar en la consola.

Estimo que el error se me genero por hacer el proyecto desde wsl de ubuntu pero no estoy seguro

Para los que estamos usando WSL Ubuntu-20.04 debemos instalar firebase con **sudo ** para que funcione el firebase login

sudo npm install -g firebase-tools

Me funcion贸 pero hay que actualizar el archivo deploy-to-firebase.yml ya que la rama es main ahora:

name: Build and Deploy
on: [push]

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Archive Production Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Download Artifact
        uses: actions/[email protected]
        with:
          name: dist
          path: dist
      - name: Deploy to Firebase
        uses: w9jds/[email protected]
        with:
          args: deploy --only hosting
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Saludos comunidad, tengo un problema que no me deja avanzar.

Alguien podria por favor darme una mano

1 ERROR in child compilations
webpack 5.6.0 compiled with 2 errors in 7517 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected]1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected]1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2020-12-18T07_29_31_075Z-debug.log
Error: Process completed with exit code 1.

He usado el hosting de Firebase en varias ocasiones pero nunca habia ustado esta herramienta integrada con github
Es todo m谩s sencillo, m谩s pr谩ctico y mejor administrado

Proyecto minimo viable ! 馃槮

Quisiera un curso profesional y avanzado de React donde trabajaramos un proyecto completo (con todos los casos de uso, bien explicados) de e-commerce.

les dejo la url para que exploren el proyecto: https://platzi-store-merch.web.app/

Si no le sale el token al ejecutar firebase login:ci y les muestra este error Error: Cannot run login in non-interactive mode.
posiblemente est茅n realiz谩ndolo desde Git bash

Y este proceso deben realizarlo desde la terminal de windows

Para los que luego de realizar firebase init y no les muestra la lista de sus proyectos de firebase y le muestra el error de failed to list firebase projects. see firebase-debug.log

Pueden probar utilizando firebase login --reauth y no utilizar firebase login

Si tienen problema cuando se logean en firebase usen el siguiente comando:
Set-ExecutionPolicy -Scope process -ExecutionPolicy Bypass

si alguien tiene problemas para ejecutar el comando 鈥渇irebase login鈥 por tener los scripts desabilitados, en este link, hay una serie de comandos para solucionarlo

https://docs.microsoft.com/es-es/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2

Waaaa qu茅 clase tan intensa, mi primer despliegue en FireBase!!! 馃槃

GitHub Action vendria a ser muy parecido a lo que hace automaticamente Vercel ?

Hola
Tuve algunos inconveniente al crear el action y como no pod铆a darme cuenta de que era, lo cree desde la solapa de actions.
set up a workflow yourself
1-cambiar el nombre de main.yml por deploy-to-firebase.yml
2-eliminar contenido de ejemplo y pegar el contenido de nuestro archivo

Lo importante de esto es que pude darme cuenta de porque no me estaba funcionando, ten铆a una may煤scula en un folder. Que pude comprobar luego de revisar el repositorio.
Saludos