Proyecto: análisis y retos de Platzi Conf Store

Curso Profesional de React Hooks

¡Bienvenida! Este es un curso especial de React Hooks

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

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

Introducción a React Hooks

useState: estado en componentes creados como funciones

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

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

useReducer: como useState, pero más escalable

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

useMemo: evita cálculos innecesarios en componentes

useRef: manejo profesional de inputs y formularios

useCallback: evita cálculos innecesarios en funciones

Optimización de componentes en React con React.memo

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

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

Proyecto: análisis y retos de Platzi Conf Store

Git Hooks con Husky

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

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

Configuración de Webpack 5 con loaders y estilos

Loaders de Webpack para Preprocesadores CSS

Flujo de desarrollo seguro y consistente con ESLint y Prettier

Estructura y creación de componentes para Platzi Conf Store

Arquitectura de vistas y componentes con React Router DOM

Maquetación y estilos del home

Maquetación y estilos de la lista de productos

Maquetación y estilos del formulario de checkout

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

Maquetación y estilos del flujo de pago

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

Integración de React Hooks en Platzi Conf Merch

Creando nuestro primer custom hook

Implementando useContext en Platzi Conf Merch

useContext en la página de checkout

useRef en la página de checkout

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

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

Integración de pagos con la API de PayPal

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

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

Integración de Google Maps en el mapa de checkout

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

Continuous integration y continuous delivery con GitHub Actions

Compra del dominio y despliega con Cloudflare

Optimización de aplicaciones web con React

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

Análisis de performance con Google Lighthouse

Convierte tu aplicación de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

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

¿Qué sigue en tu carrera profesional?

Próximos pasos para especializarte en frontend

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 27

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Fernando Quinteros Gutierrez

hace 4 años

Archivos y comandos
Creamos nuestra carpeta

mkdir platzi-conf-merch

iniciamos nuestros paquetes npm

npm init -y

iniciamos git

git init

npm install react react-dom

archivo public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Platzi Conf Merch</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

archivo src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

archivo src/components/App.jsx

import React from 'react'

const App = () => {
  return (
    <div>
      <h1>hola mundo</h1>
    </div>
  )
}

export default App;

Javier Fuentes Mora

Profe Platzi

hace 4 años

Hoy en dia ya no se recomienda crear tu propia configuracion de webpack , ya que si tu proyecto crece requeriras a todo un equipo que le da mantenimiento gente como Kent C Dots lo menciona continuamente , lo mejor es usar CRA , o NextJS. Tal vez es bueno solo para que entiendas como funciona pero no para en realidad trabajar

Achraf Mharmel

hace 3 años

Para los que tengan React 18 deben renderizar de esta nueva forma

Aitor Santana Cabrera

hace 3 años

Buenas, les dejo el enlace a mis apuntes sobre hooks basados en este curso. Están hechos en Notion, espero que les sea de utilidad.
React Hooks

Diego Alejandro Cifuentes Arango

hace 4 años

Dios mio, severo E-commerce se viene, será mi primero, ojala aprenda lo suficiente como para hacer los mios (:

Jesus Ivan Villalobos de la Cruz

hace 3 años

No se olviden de crear su archivo .gitignore, yo utilize un plantilla generada en https://www.toptal.com/developers/gitignore

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test
.env.production

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### Node Patch ###
# Serverless Webpack directories
.webpack/

### react ###
.DS_*
**/*.backup.*
**/*.back.*

node_modules

*.sublime*

psd
thumb
sketch

### VisualStudioCode ###
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace

# Local History for Visual Studio Code
.history/

### VisualStudioCode Patch ###
# Ignore all local history of files
.history
.ionide

Seba Cardoso

hace 4 años

La version 17 de react es muy nuevita

Elioenai Garcia Garcia

hace 3 años

Estructura básica de carpetas. 💪🏻

Yilmar López Ospina

hace 2 años

En React 18 la formade renderizar cambió, ahora hay que hacer algo como esto

import React from "react";
import ReactDOM from "react-dom/client";

import App from "./components/App";

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Rodrigo Andres Ramírez Aguirre

hace 3 años

Comando para crear la estructura de archivos inicial

mkdir src && mkdir public && mkdir ./src/components && touch ./src/index.js && touch ./src/components/App.jsx && touch ./public/index.html

Jason Francisco Macas Mora

hace 2 años

Usando Vite.js:

npm create vite@latest

Juan Jose Hernandez Garcia

hace 4 años

Hasta donde llevo suena bastante bien. Ojala no sea como en los demas cursos que dejan estas ideas para emocionarnos y el final no es tan bueno. Vengo a comentar que tal esta cuando acabe :v