No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de React.js

Curso Pr谩ctico de React.js

Oscar Barajas Tavares

Oscar Barajas Tavares

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

14/30
Recursos

Aportes 93

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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鈥煤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谩 鈥渉ard鈥 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 鈥渘pm 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** 鈥榗omponent鈥** del componente Route por** 鈥榚lement鈥** 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鈥ristemente 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 鈥渞eto鈥 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 鈥榬eact鈥 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鈥

Explica bien pero necesito que le limiten el uso de la palabra "obviamente". Llega al punto que no puedo prestar atenci贸n al video porque me pone nervioso que lo diga en todas las oraciones

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 鈥渃omponent鈥, se utiliza 鈥渆lement鈥 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 鈥渞eto鈥 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

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 鈥渁nalizarlo鈥 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 鈥渁rriba鈥, 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 馃槄

Creo que esta parte la voy a hacer con styled components, as铆 ser铆a mas f谩cil ponerle los estilos al componente

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 鈥渃opy-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鈥n reto