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

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.

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!

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

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.

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

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

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 😗

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.

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.

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 />} />

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.

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.

He hecho una parte del reto, incluso he sacado mucho más componentes. Aquí mi repo para que puedan ver mi trabajo.
Estaré abierto a comentarios… también he considerado tener en cuenta otras cosas para la elaboración de cada UI

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

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.

Se hicieron cambios en el css porque se empiezan a romper varios estilos si dejamos las clases con los nombres del primer curso.

Fue lo malo de copiar y pegar…

Hola instalé el Plugin Path Intellisense para VSCode, me ha encantado y ahorrado mucho tiempo desde entonces.

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. 👎

Coincido con los demás, me hubiera gustado un proyecto desde 0 y no estar copiando y pegando código de un curso pasado.

Regular la clase… Me recuerda cuando en la universidad venia el profe y daba todo a la carrera

Para evitar problemas con el css, decidi usar los styled component, esto garantiza que los estilos que definimos solo vivan en nuestro componente, container, Pagina evitando los problemas de especificidad.

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

Hay un copy paste de parte del profesor en cual no se ha fijado que por ejemplo en ProductItem no existe ningun contenedor card-container. La verdad dudo de como hizo para que le quedará así la interfaz.
He perdido 3 días haciendo esto por mi cuenta, intentando arreglar el css. Debo decir que no he visto mejoras en los primeros cursos de la escuela de JavaScript. El anterior curso que daba la profesora; iba como jugando carreras, debido a eso me tomé el curso dictado por Diego.
Ahora el nuevo que lanzaron fue de mal en peor, no entiendo.

Este curso es genial, aunque en realidad tuve que copiar y pegar archivos en esta clase por cuestiones de tiempo, pero esto nos hace caer en cuenta de que el proyecto de frontend developer pude ser más organizado. Este tipo de dificultades nos peuden pasar en el campo laboral y de todo se aprende un poco.

En el page Checkout hace un import a Menu pero no lo llama nunca, sirve para algo o alguien sabe por que lo hace?

Para poder ver en el editor las imágenes que nos estamos trayendo, existe la extensión Image preview.

Asi me quedo con routes 😃

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Latout from "../containers/Latout";
import Login from "../containers/Login";
import RecoveryPassword from "../containers/RecoveryPassword";
import Home from "../pages/Home";
import NotFound from "../pages/NotFound";
import Chekout from "../pages/Chekout"
import CreateAccount from "../pages/CreateAccount";
import MyAccount from "../pages/MyAccount";
import NewPassword from "../pages/NewPassword";
import Orders from "../pages/Orders";
import PasswordRecovery from "../pages/PasswordRecovery";
import SendEmail from "../pages/SendEmail";
import "../styles/global.scss";

const App = () => {
	return (
		<BrowserRouter>
			<Latout>
				<Routes>
					<Route exact path="/" element={<Home />} />
					<Route exact path="/login" element={<Login />} />{" "}
					<Route
						exact
						path="/recovery-password"
						element={<RecoveryPassword />}
					/>
					<Route exact path="/Chekout" element={<Chekout />} />
					<Route exact path="/CreateAccount" element={<CreateAccount />} />
					<Route exact path="/MyAccount" element={<MyAccount />} />
					<Route exact path="/NewPassword" element={<NewPassword />} />
					<Route exact path="/Orders" element={<Orders />} />
					<Route exact path="/PasswordRecovery" element={<PasswordRecovery />} />
					<Route exact path="/SendEmail" element={<SendEmail />} />
					<Route path="*" element={<NotFound />} />
				</Routes>
			</Latout>
		</BrowserRouter>
	);
};

export default App;

La clase mas larga y dificil 😫

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
                    }
                ]
                ]
            }

Deben actualizar el curso porque si tiene varias desactualizaciones, debemos estar a la vanguardia de lo nuevo que sucede.

Cuando hice el curso de frontend me preguntaba porque la gente se quejaba tanto en comentarios sobre la no utilización de metodologías en el CSS. Ahora ya lo entiendo…
Creo que falta sinergia entre ese curso y este, es muy difícil adaptar ese proyecto a esta metodología.

Ya me perdí!!!

Para quien esté teniendo errores con react-router-dom, dejo por aquí cómo sería la configuración del mismo con la versión V6.

export 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>
  );
};

En lugar de “component”, se utiliza “element” como prop y se envía al componente como una etiqueta (entre símbolos “</>”).

Este “reto” pudo haber sido un curso completo de componentizacion 😦

Para quienes están teniendo problemas para organizar el proyecto, les dejo una forma de tener el código del profesor para que puedan guiarse mas fácilmente. No les recomiendo que copien todos los archivos y demás, porque la practica es necesaria, sin embargo creo que de esta forma podemos ver mas fácilmente la estructura y el contenido de cada archivo para saber cuales fueron los cambios que se realizaron.
Instrucciones:
Desde la consola estando en la carpeta de nuestro proyecto nos regresamos una carpeta hacia atrás, por ejemplo si estamos en ~/user/Documents/React/shop/ nos regresamos a ~/user/Documents/React/ y en ella ejecutamos el siguiente comando:

git clone https://github.com/platzi/react-practico.git

Esto nos clonara el proyecto del profesor. Nos posicionamos en esa carpeta que se acaba de crear cd .\react-practico\ y abrimos el visual studio code code ., una vez abierto en la parte inferior izquierda nos saldrá la rama de git en la que estamos:

Al dar clic en ella nos aparecen las diferentes ramas que tenemos en el proyecto, buscamos la que dice react/challenge y la seleccionamos, ahora nos aparecerá el proyecto hasta este punto del curso con la solución del profesor y ahora podemos usar esto como referencia.
ATENCIÓN
No es recomendable que copies y pegues todo el código, debes practicar, pero en caso de que lo hagas ten presente que te va a generar errores en App.jsx porque el profesor utiliza Switch el cual actualmente esta desactualizado además de que Route ahora utiliza element en lugar de component, entonces si lo haces deberás corregir eso entre otros posibles errores.

En lo particular a mi me parece una buena clase, simplemente lo que hay que hacer es cambiar algunas cosa para que la aplicación funcione pero en términos generales esta bien resumida la clase

¡Un día para armar todo y que funcione! Qué dolor de cabeza.
Supongo que así es en la vida real también.

Ta dura la clase… el diseño es diferente, los paginas, componentes son diferentes, la solucion del docente es diferente…
bueno a seguir

Para no perder el enfoque de este curso decidí hacer un copy paste de Containers/Componentes/Pages/Styles en general del Repo de esta clase.

Ahora, como en este curso usamos una mezcla de CSS y SASS a nivel de archivos de estilo, decidí manejar todo en SCSS y en vez de ir archivo por archivo actualizando variables. Estoy buscando y reemplazando de una forma masiva, con VSCode lo podemos hacer oprimiendo Crtl + Shif + H o Edit > Replace in Files.

PD:En el input de la imagen donde escribo $white hay dos iconos, en el de la derecha si dan click van a reemplazar en todos los archivos.

Me tomo unas tres horas facilmente acomadar todos los componentes, contenedores y páginas en sus respectivas carpeteas 😣

La cuenta entre pages+containers+components no me da.
No entiendo nada

Que clase desordenbada, curso mugroso, quiero aprender React, no arreglar los estilos que alguien mas hizo mal.

Como bien muchos dicen, este curso no es de los mejores de Platzi. Sin embargo hay que arreglársela y seguir adelante. Siguiendo las recomendaciones de un compañero les recomiendo;

• Bajar a la sección de recursos y descargar toda la carpeta src
• Copiarla en su directorio y reemplazarla por la que ya teníamos (esta trae todos los archivos nuevos)
• Hacer los respectivos git add y git commit
• Ir al Archivo App.jsx en nuestro editor de código y reemplazar su código por este código y todo funcionara. Ya estamos listos para seguir adelante

<import React from 'react';
import { BrowserRouter, Routes , Route } from 'react-router-dom';
import Layout from '../containers/Layout';
import Home from '../pages/Home';
import Login from '../containers/Login';
import PasswordRecovery from '../containers/RecoveryPassword';
import SendEmail from '../pages/SendEmail';
import NewPassword from '../pages/NewPassword';
import MyAccount from '../pages/MyAccount';
import CreateAccount from '../pages/CreateAccount';
import Checkout from '../pages/Checkout';
import Orders from '../pages/Orders';
import NotFound from '../pages/NotFound';
import '../styles/global.css'; 

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

Me tomo un par de días por tiempo pero trate de ajustar el proyecto seguimiento el Atomic Design les dejo el github por si quieren clonarlo.

https://github.com/julian1david/React-ShopStore

import React from 'react';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import Layout from '../containers/Layout';
import Home from '../pages/Home';
import Login from '../pages/login';

import PasswordRecovery from '../pages/PasswordRecovery';
import SendEmail from '../pages/SendEmail';
import NewPassword from '../pages/NewPassword';
import MyAccount from '../pages/MyAccount';
import CreateAccount from '../pages/CreateAccount';
import Checkout from '../pages/Checkout';
import Orders from '../pages/Orders';
import NotFound from '../pages/NotFound';

import '../styles/global.css';
const App = () =>{
    return(
        <BrowserRouter>
            <Layout>

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

export default App;

Como que está de la verch xD

Comparto los ajustes de CSS que hice y adjunto link de descarga para hacerte más fácil la ruta 😄

Link: https://github.com/JANDSOL/react-shop/releases/tag/v1.0

Captures

Home

Login

Password Recovery

Send Email

New Password

Account

SignUp

Checkout

Orders

Not Found

Gente… tampoco se claven mucho con que no funcionan algunas cosas con el css, puede ser que lo hagan a propósito para no caer en la mala práctica del “copy-paste” sin ver lo que realmente se copia en el proyecto.
Al final son puntos finos que se deben trabajar para las buenas prácticas de cada uno de nosotros

Para los que usan la versión 6, hay que ser muy cuidadosos de migrar entre versiones ya que mi problema es que en la version 6 se podría decir que Routes remplaza a switch y en cada Route cambiamos componente por element o no mostrara nada ademas los elementos llevaran < /> ya no se pueden usar sin los signos (< />), me la pase horas hasta que me di cuenta.

Ejemplo:

<Route exact path="/login" element={<SendEmail />} />

Asi quedo mi archivo App.jsx

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Layout from '../containers/Layout';
import Home from '../pages/Home';
import Login from '../pages/Login';
import PasswordRecovery from '../pages/PasswordRecovery';
import SendEmail from '../pages/SendEmail';
import NewPassword from '../pages/NewPassword';
import MyAccount from '../pages/MyAccount';
import CreateAccount from '../pages/CreateAccount';
import Checkout from '../pages/Checkout';
import Orders from '../pages/Orders';
import NotFound from '../pages/NotFound';
import '../styles/global.css';

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>
	);
}

export default App;

Así quedo mi Home:

Pues leo muchos comentarios de inconformismo, y los primeros 10 minutos pensando me senti igual que todos, pero siendo optimista es una oportunidad para progresar y hacer el reto basandonos en los recursos del profe y entender todo lo que el hizo.
hay que verlo como lo que el dice…un reto