Solución al reto: componentes y rutas de React Shop

Clase 14 de 30 • Curso de React 17 con Webpack 5 y Sass

Tan Zuñiga

student•

Components: pieza más pequeño (átomo). Containers: Muestran la unión de uno o más componentes. Pages: Son las secciones / rutas que vamos a tener.

Ivan BG

student•

Hubiera sido mejor empezar algo de cero y no combinar cosas de otro curso con este curso. al final no tuvo sentido el estar copiando y pegando....Aún así las explicaciones de Oscar son un deleite!

Carlos David Guedez Rangel

student•

Al contrario, me parece bien quer se haga este tipo de cosas, porque se pueden dar estas situaciones, en el campo laboral.

Me paso con un proyecto realizado en html y css puro pasarlo a react

Heywin Hernando Meneses Perez

student•

Yo creo que esta bien la forma como planteo el curso Oscar, incluso yo he respetado la ruta y vengo del curso de frontend developer y me parece genial continuar con el mismo proyecto y si vienes solo por el curso de React.js igualmente es bueno como se plantea el curso porque en muchos casos tendras que hacerlo en tu dia a dia, pasar de html y css a React

Jorge Alberto Barcos

student•

Creo que el curso de Front End Developer se podria haber echo mas profesional para no tener que haber echo el cambio en css como haber utilizado la metodologia BEM, entre otras cosas. Tal vez Oscar como buen profesional no lo mencionó pero internamente habra puteado jajajajaja

Luis Vazquez

student•

Coincido totalmente contigo, el curso de frontend developer no utiliza buenas prácticas de css lo cual ocasiona que se rompan estilos. Me sorprende porque esa misma profesora tenia una version anterior de ese mismo curso que esta mucho mejor hecho que este, creo que fue un error del Course Director y de quien este organizando esta nueva versión de la escuela de javascript

Julio Loarte Huerto

student•

Tienes mucha razón

José Luis Encastin Flores

student•

Para los que estamos trabajando y tenemos uin par de horas al día para estudiar, perder tiempo corrigiendo estilos que no aportan al conocimiento técnico/teórico/práctico, es algo frustrante.

Si lee esto algún miembro del Platzi Team, debería tomar en cuenta esta situación.

Miguel Hernández Casiano

student•

Vi que te ponen el vínculo al github. Podrías hacerle un git clone para tenerlo todo en tu màqina o puedes copiar manualmente los recursos de la clase.

David Castro

student•

Apoyo, estamos de acuerdo!

Luis Vazquez

student•

El curso de frontend developer practico es pesimo porque no se utilizan buenas prácticas para codificar css, no se utilizan componentes ni alguna metodologia css como BEM lo cual ocasiona que haya conflictos de estilos en este curso. Además me parece que estan muy mal nombrados los archivos que tiene que ver con la maqeutación, clase1, clase2, clase3,..., no te dice nada. No tener los archivos de figma para saber exactemente los espaciados del diseño también es un desacierto, utilizar el ojimetro como dice la profesora Estef Aguilar no es para nada profesional. En general creo que las clases de frontend de la escuela de javascript tuvieron un retroceso con respecto a la versión anterior. Una lastima porque el proyecto en efecto es más interesate que Platzi Videos pero no esta bien ejecutado.

César Palma

student•

lo bueno fue el proyecto, lo he usado para hacer mis propios templates para pasarlos a este curso, no hace falte ser tan purista con lo de atomic design , ni bem. Lo importante es conseguir el resultado siendo modular costo/beneficio porque todo es iterable en el futuro.

Nestor Ramirez

student•

Son cursos para principiantes y aunque no nos guste es buenos aprendan ciertas cosas que ahora existen y en su momento no, los ayuda a desarrollar su logica

Carolina Hernández Viveros

student•

Debo confesar que me tomo todo un dia organizar todo, ademas que no entiendo porque hay estilos que se rompen cuando ya venian bien =/

Jean León

student•

Es cierto ,creo que es porque Oscar hizo ajustes a la estructura de componentes para mejorar su comprensión siguiendo las pautas de Atomic design. Otra cosa que también influyo es que se tuvo que reajustar los nombres de las clases que venían del curso practico de frontend.

Rodolfo Vera

student•

En este caso Oscar no respetó los nombres de clases css que venían de las páginas que se crearon en el curso de Front End Developer y solo hay que ajustarlos en este proyecto

Favian H. Angarita

student•

Por si acaso, ya sé que está "hard" como se rompe la aplicacion. Picar los estilos o la falta de imagenes puede molestar, tener paciencia UwU. Ya en 2022 lo arreglarán. Para el tema de estilos, copien el repositorio no complicarse T.T. Y pues, recuerden que React cambió hace poco el tema de rutas... Ya no es Switch, si no Routes. Y el llamar una URL se hace como element y no component. Asi que para seguir, lo que si o si hay que arreglar es App.jsx

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

const App = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route exact path="/" element={<Home />} />
					<Route exact path="/login" element={<Login />} />
					<Route exact path="/password-recovery" element={<PasswordRecovery />} />
					<Route exact path="/send-email" element={<SendEmail />} />
					<Route exact path="/new-password" element={<NewPassword />} />
					<Route exact path="/account" element={<MyAccount />} />
					<Route exact path="/signup" element={<CreateAccount />} />
					<Route exact path="/checkout" element={<Checkout />} />
					<Route exact path="/orders" element={<Orders />} />
					<Route path="*" element={<NotFound />} />
        </Routes>
      </Layout>
    </BrowserRouter> 
  )
}

pdta: La unica imagen que sirve es un link a pexels, pero realemente no hay muchas imagenes (como 4), pongan las que quieran. Para reducir el estres, empezar por las de Header.jsx Besos :*

Matias Diaz

student•

Muchas gracias! Hice lo que dijiste y ajustando algunas cosas me funciono

Obed Paz

student•

Que desorden de curso, no se si el problema esta aqui o en el curso de Frontend dev.

Luis Fernando Morla Mora

student•

yo tampoco lo sé, el de frontend developer.... me gusta más el de Diego de Granda... pero brother te juro que llevo dando 3 vueltas en las ultimas 2 clases de atras y en las 2 siguientes para entenderle la bendita logica y que cuadre con mi codigo y lo que el tiene en pantalla!! tienen que rehacer este curso!! definitivamente

Oscar Isai Colina Pinto

student•

La verdad la versión anterior en cuanto al contenido era mejor, siento mucho desorden en esta ruta de JS

Andyno Cortez

student•

Esto me recuerda a la universidad publica, donde te las tenes que arreglar para aprender. Lo mas valioso que tiene platzi es la comunidad, y el esfuerzo que pone esa comundidad para darle uso a las herramientas a las que tienen acceso. Excelente profe oscar.

julian david gomez granda

student•

no es por odio ni nada, pero este curso con esta clase quedo como una completa vergüenza de curso sinceramente, recomiendo que hagan este curso nuevamente desde cero sin tener en cuenta cursos anteriores. por que sinceramente con lo que se acaba de hacer es de los peores cursos que he visto.

Andres Pluska

student•

Si clonaron el repo nuevamente y por ende los paquetes que tienen están desactualizados, solo tienen que escribir en la terminal de comandos lo siguiente:

npm install -g npm-check-updates

Es un paquete que puede detectar las ultimas versiones de los paquetes.

ncu -u

Es un comando de npm-check-updates, que modificará al package.json para que todas las dependencias estén listadas en sus últimas versiones.

Y ya por ultimo solo queda correr un "npm install"

Listo todos los paquetes estarán actualizados

PD: Recuerden actualizar el archivo App en routes.

Tania Sosa

student•

¡Hola Andres!

Muchas gracias la ayuda, éste es un excelente aporte 😄

Nunca pares de aprender 💚

Miguel Hernández Casiano

student•

Proyecto funcionando

Hoy es junio 25 de 2022. Les pongo el vìnculo con el proyecto funcionando y actualizado (tiene cambios respecto a lo que pone el profe): https://github.com/miguelhernandezk/React-shop/tree/main

Por favor hagan pull request para actualizar cambios en caso de que cuando intenten clonarlo ya no funcione.

octavio montoya

student•

Que grande

Andrés Felipe Lopez gomez

student•

Gracias Genio

Diego Urrego

student•

Este curso de React está PÉSIMO, de verdad que no sé que es peor si el contenido o el profesor para mí hasta ahora todo ha sido copiar y pegar...Tristemente he tenido que comprar cursos de mejor calidad y educación en Udemy. Platzi tiene muy buenos cursos y rutas pero esta de react con este pseudo profesor si de verdad que nada que ver. 👎

Diego Reyes Cabrera

student•

TOTAL

Eriksen Lezama

student•

Definitivamente mala experiencia el curso en este punto. Sobre todo para los nuevos. Uno con experiencia se las apaña, pero el que está comenzando se frustra un poco y el curso detiene el impulso o desvía la atención.

Mi recomendación es que no se den mala vida y traten de solucionar rápido para continuar viendo el curso y seguir aprendiendo/repasando. En lugar de copiar y pegar uno a uno, bájense la carpeta de /src y peguen todo en su proyecto. Excluyan App.js para evitar los errores de actualización de react-router-dom. Y si ya lo pegaron, solo sustituir el nombre del componente Switch por Routes, la propiedad** 'component'** del componente Route por** 'element'** y los componentes ya no va como variable sino como jsx, ejemplo:

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

...

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

Fernando Reyez Pinto

student•

es la magia de la programación xd, na mentiras, en la clase de react router dure tres días solucionando, tanto que tuve que ir a ver un tutorial de 0 en youtube y yo mismo volví a configurar el webpack, carpetas, etc. Pero gracias a eso tengo muy claro como funcionan esas cosas

Jose Tuiran Mendoza

student•

Con todo respeto, el que haya estilos por cada hoja html del curso anterior lo hace tan ineficiente al ver que se repiten clases y toca manualmente filtrar lo que se repite y lo que no. Esto genera mucho retroceso en el avance del curso incluso a replantiar cambiar las clases css desde cero, lo cual se supone que deberiamos de olvidarnos un poco de esto y enfocarnos netamente en lo que es React, se debió utilizar una hoja universal para las clases de css y con ello poder modular facilmente en partes el código de los estilos.

Vittorio Pugliese

student•

concuerdo al 100%

Diego Pardo Jaramillo

student•

Me hace falta el dislike

Magalí Acevedo

student•

Todo bien pero hizo cosas que no mostro y eso me molesta... no tengo experiencia en esto y entiendo que no es dificil pero <OrderItem /> no se como lo quito ni donde lo acomodo... si lo pienso un poco lo entiendo pero necesito la seguridad de que lo hice bien. ya me estrese... XD

Carlos Paredes

student•

Eso de dejar como "reto" un proyecto de otro curso que ni lo tome, me termina desordenando todo y desmotivando

Daniel Fernando Ramirez Giraldo

student•

El curso hasta esta clase:

David Eduardo Perez Hernandez

student•

Un pro tip: para evitar la ahora considerada mala practica de siempre repetir import React from 'react' en cada componente, podemos agregar lo siguiente a nuestro webpack.config


 loader: 'babel-loader', // acá abajito del loader
        options: {
            presets: [
                [
                    '@babel/preset-react',
                    {
                        runtime: 'automatic' //import react from react wont be needed anymore
                    }
                ]
                ]
            }

Solución al reto: componentes y rutas de React Shop

Introducción a React

¿Qué es React.js?

Conceptos fundamentales de React

Configurando el entorno de desarrollo para React

Análisis de dependencias en proyectos de React

Instalación de React y React DOM

Configuración de Webpack y Babel

Cambios en tiempo real con Webpack

React con CSS y Sass

Maquetación en React

Transformando HTML y CSS en componentes de React

Estilos en los componentes de React

Páginas, rutas y componentes

React Router DOM

Navegación entre rutas

Header en todas las rutas

¿Qué es Atomic Design? Conoce los beneficios

Solución al reto: componentes y rutas de React Shop

Tipos de componentes en React: stateful vs. stateless

Imágenes y alias en Webpack

Lógica con React Hooks

React.useState

Toggle del menú

useEffect y consumo de APIs

Custom Hooks para la tienda

useRef y formularios

React Context

Completando el carrito de compras

Orden de compra

Calculando el precio total

Eliminando productos del carrito

Deploy

Cómo comprar tu dominio y conexión con Cloudflare

Automatizando el despliegue con GitHub Actions

Próximos pasos

Retos de React.js (bug hunters)

Continúa con el Curso Práctico de Next.js