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

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.

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

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 😗

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

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.

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.

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.

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.

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

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.

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

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

Me hace falta el dislike

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

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

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

MAAAAAAL!! TODO MAAAAL!!
Se salto una parte super importente del proceso!! No sé que código tomó como componente y cual otro como page o containers. Me tocó copiar todo el código y crear los archivos. Espero que más adelante se aclare exactamante como fue que los dividió.

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.

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

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

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

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

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…

quise ser positivo y no p7tear al profe!!! pero perdi todo el dia arreglandop u ordenando y no lo he solucionado aun #F

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

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.

Queridos colegas, acostumbrense a no quejarse tanto y más bien a tomar retos. sentirse comodos superandolos y disfrutando de cada línea de código que cree. En la vida real, nos encontraremos con obstaculos mucho más complejos que simplemente adaptar una app en js a react. No se quejen, aprovechen esta oportunidad para pulir sus habilidades y aprender más. recuerden que entre más practica, mejores seremos. La Exigencia trae consigo la Excelencia. no lo olviden.

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.

El curso hasta esta clase:

hasta el momento aún no entiendo a que le llama components, pages, containers, routes

Tuve que clonar el repositorio y usar el de Oscar, está muy bueno el curso, pero la pifiaron acá-

quería aprender react no a aplicarle clases css a las etiquetas -_-

Yo hice un componente para las imágenes, se los comparto:

import React from 'react'
import Scarecrow from '../assets/images/Scarecrow.png';
import logoYardSale from '../assets/logos/logo_yard_sale.svg';
import iconShoppingCart from '../assets/icons/icon_shopping_cart.svg';
import iconMenu from '../assets/icons/icon_menu.svg';
import flechita from '../assets/icons/flechita.svg';
import iconClose from '../assets/icons/icon_close.png';
import btAddToCart from '../assets/icons/bt_add_to_cart.svg';

const Images = ({ source }) => {

  switch (source) {
    case "Scarecrow":
      var imgSrc = <img src={ Scarecrow } alt="Espanta pajaros" />;
      break;
    case "logoYardSale":
      var imgSrc = <img src={ logoYardSale } alt="logo" className="logo" />;
      break;
    case "iconShoppingCart":
      var imgSrc = <img src={ iconShoppingCart } alt="shopping cart" />;
      break;
    case "btAddToCart":
      var imgSrc = <img src={ btAddToCart } alt="add to cart" />;
      break;
    case "iconMenu":
      var imgSrc = <img src={ iconMenu } alt="menu" className="menu" />
      break; 
    case "iconClose":
      var imgSrc = <img src={ iconClose } alt="close" className="close" />
      break; 
    case "flechita":
      var imgSrc = <img src={ flechita } alt="arrow" />
      break; 

    default:
      break;
  }

  return (
    <>
      { imgSrc }
    </>
  )
}

export default Images

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 “</>”).

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 😫

Puedo bajarme la carpeta /src, unir todo y hacer que funcione pero el verdadero valor esta en ir paso a paso con el profesor y entender porqué tomo las decisiones que tomó en los momentos cruciales. Así solo me toca intuír.

A💩class!

Rutas React 6

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';

function 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;

No se si son las nuevas versiones de React, pero en mi caso googleando, descubri que dentro de App.jsx la definir el llamado del componente este debe ser manejado como tal por ejemplo: <Home/>

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

Dejo mi página de error 404.
Más vale tarde que nunca !

Si estan copiando y pegando el repositorio, aprovechen en cambiar el @import por el @use en scss

Horrible experiencia, si se supone que estamos aprendiendo como vamos a refactorizar un proyecto completo aplicando un patron de diseño del cual solo vimos una imagen? obligatoriamente toca pasar el curso para continuar con la ruta de la escuela, pero esta clase ha sido completamente decepcionante

Menos mal hice un curso de React en udemy antes de hacer este curso, si tienen problemas con sus estilos cambien de nombre a sus archivos css para que no tengan problemas por ejm Header.css cambienlo por Header.module.css esto encapsula los estilos solo para ese componente pueden averiguar mas gogleando

Muchachos si en la terminal por error le dan a control Z el proceso se va a segundo plano para devolverlo a primer plano solo coloquen fg y listo espero a alguien le sirva

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;

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

Ya me perdí!!!

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

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 😣

Al principio me moleste un poco al tener que organizar todo, pero esto es la vida real, esto pasa y va ha pasar a diario cuando trabajen con código de otros desarrolladores y dar mantenimiento

Dijo que iba a explicar uno por uno y no lo hizo xddd

En el minuto 5:00, esta forma de CSS SÍ es una convención, se llama SUIT CSS, y esta más orientado para trabajar con componentes. En React olvidense de BEM. https://es.accentsconagua.com/articles/webdesign/using-postcss-with-bem-and-suit-methodologies.html

Para acceder al codigo del profe, lo ideal es insertar el siguiente comando en la terminal:

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

Esto copia la rama especifica del repositorio donde se encuentra el codigo, una vez clonado, solo ejecutamos npm install, npm audit fix por si salen errores y npm run start para visualizar

https://github.com/gndx/react-practico

Estoy aprendiendo React, hasta el video anterior todo bien, aunque ahorita en 2023 han habido cambios, he podido pasarlos sin problema.
Pero en este punto si me habría gustado mucho más ir construyendo todo junto al profesor. Eso de verlo construido y simplemente pegarlo y “analizarlo” no lo veo muy efectivo. Pero bueno, a seguirle con todos los animos.

Qué caótico curso: desordenado, implementando tecnologías sin una apropiada explicación, realizando cambios del proyecto anterior sin mencionarlos, implementando nuevos cambios (sin mencionarlos)… en fin, tal parece que el objetivo fuera específicamente confundir al estudiante. Este curso debería ser retirado de esta plataforma, añade más preguntas que respuestas.

JAJAJA, copié el repositorio y al intentar reparar la compatibilidad con los actualizaciones se rompió todo, La verdad que no quedará, hasta tuve que borrar el repositorio jajaja

A partir de este video, me aparte durante 2-3 dias y trate de recrear yo mismo todos los componentes existentes en el proyecto asignado, practicando la maquetacion en React. Creo que es la mejor forma de tomar este curso

Siento que me costo mas de lo esperado y es porque el projecto que estamos agregando, no tiene los archivos .html separados por nombre y a nombre me refiero a uno mas descriptivo, habian veces de las cuales me las pasaba en un archivo que ya modifique y entonces perdia tiempo o me mareaba, no se si a alquien mas le paso.

dure medio día acomodando todo en modo guerra con los estilos, pero bueno la práctica es parte del proceso, así que, animo a todos!!!

#nuncaParesDeAprender

Vaya birria de clases, muy confuso y frustrante. Veo comentarios de hace casi un año quejándose de lo mismo y por lo que se ve no han ehcho nada para arreglarlo. Si van a hacer un curso que es la continuación del otro deberían hacerlos más coherentes. Ya cuando hice el curso de frontend developer en el que se maqueta esta web me hizo tener una mala impresión hacia el equipo de Platzi por todas las malas prácticas que se estaban tomando. Cuando empecé este pensé en todos los posibles problemas que íbamos a tener pero es que esto ya es una verguenza. Qué pena haber pagado Platzi un año porque tengo la sensación que habiendome gastado el mismo dinero en cursos de Udemy en oferta aprendería mucho más. Una pena que tenga esta sensación con Platzi ahora…

Tomo lo hecho por le profesor y me quedo con lo de Atomic Design. Esto siempre me complica al momento de ejecutar proyectos por mi cuenta

Si no pudiste hacer los cambios (o bien porque estás repasando conceptos, no tuviste tiempo, te perdiste en los cambios o la razón que sea, aquí te dejo mi repo en donde encontraras los archivos de esta clase (solo de esta clase) para que puedas hacer un clon y continuar.

En mi código encontrarás unos pequeños cambios:

• Uso react dom v6

• Implemente las imágenes (usando un loader de webpack, te dejaré mi config por aquí por si quieres repasarla)

• Corregí los errores de estilo que evitaban mostrar el logo (era un display: none que generaba problemas)

• También arregle un detalle del logo en el header que se mostraba como “arriba”, esto era causado por un margen (use un selector id el cual encontraras en el header.scss)

Repositorio

Config de webpack

const path = require('path') // donde estamos usando este proyecto
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


const babelLoader = {
    test: /\.(js|jsx)$/, // escuchara estas extensiones aunque
    exclude: [/node_modules/], // evitara las de estas carpetas. 
    use: {
        loader: 'babel-loader' // para las extensiones que dan positivo al test, las pasara por el loader (compilador) de babel
    },
}

const htmlLoader = {
    test: /\.html$/, 
    use: {
        loader: 'html-loader' 
    },
}

const sassLoader = {
    test: /\.(css|scss)$/,
    use: [
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
}



const fileLoader = {
    test: /\.(png|jp(e*)g|svg|gif)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[contenthash].[ext]',
                outputPath: 'resources',
            }
        }
    ]
}




module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // carpeta en donde se guardara el resultado final
        filename: 'bundle.js', // nombre final del archivo
        publicPath: '/', // Ruta de inicio
    },
    resolve: {
        extensions: [ '.js', '.jsx' ], // extensiones que estara "escuchando"
    },
    mode: 'development',
    module: { // configuraciones de loaders
        rules: [
            babelLoader,
            htmlLoader,
            sassLoader,
            fileLoader,
        ]
    },
    plugins: [ // nos permite agg plugins
        new HtmlWebpackPlugin({ // le enviamos la configuracion al plugin
            template: './public/index.html',
            filename: './index.html'
        }),
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
    ],
    devServer: { // config obtenida en https://webpack.js.org/configuration/dev-server/
        static: {
            directory: path.join(__dirname, 'public'),
        },
        historyApiFallback: true,
        compress: true,
        port: 3000,
    }

}

Espero haberte ayudado, happy coding!

Recuerden que como buenos developers, debemos manejar la frustración 😅

Genial, se debe estructurar muy bien el proyecto para hacerlo fácil de comprender.

esta clase fue muy maluca, termie haciendo todo el reto a como yo entendi con los nombres que a mi me parecieron para terminar borrando todo y descargar el github para poder seguir sin lios el curso… no me parecio util eso, hubiese sido mejor que entonces dijera este y este van aqui y aqui sin hacerlos y luego nosotros hacerlos por dentro

Pero que pasó aqui ? esta clase y la anterior no tienen cohesión, algunos archivos cambiaron de rutas , toca cambiar todo el css, que error del equipo platzi, si se supone que este curso es una continuacion del curso Frontend deberian seguir la linea, por unos por un lado y otros por otro, nos enredan a los estudiantes.

! Recuerda

Cambias esto en las etiquetas de Label

Simplemente es cambiar el for a htmlFor 
<code> 

Si es muy confuso, pero un compa compartio en los comentarios el repositorio y tambien el profe lo comparte en clases anteriores, lo puedes usar como guia y tu mismo ir agregando he ir comparando, pero usando las dependencias con sus recursos actualizados. Sera facil? pues depronto complicado pero si sera sencillo ir mirando cada cosa mientras aprendemos
---------//-----------//

https://github.com/platzi/react-practico/tree/react/challenge/src

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

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

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

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