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.
Introducción
¿Qué es React.js?
Conceptos fundamentales de React
Configurando el entorno de desarrollo
Instalación de React y React DOM
Configuración de Webpack y Babel
Cambios en tiempo real con Webpack
React con CSS y Sass
Maquetación en React
Transformando HTML y CSS en componentes de React
Estilos en los componentes de React
Páginas, rutas y componentes
React Router DOM
Navegación entre rutas
Header en todas las rutas
¿Qué es Atomic Design?
Solución al reto: componentes y rutas de React Shop
Tipos de componentes en React: stateful vs. stateless
Imágenes y alias en Webpack
React Hooks
React.useState
Toggle del menú
useEffect y consumo de APIs
Custom Hooks para la tienda
useRef y formularios
React Context
Completando el carrito de compras
Orden de compra
Calculando el precio total
Eliminando productos del carrito
Deploy
Cómo comprar tu dominio y conexión con Cloudflare
Automatizando el despliegue con GitHub Actions
Próximos pasos
Retos de React.js (bug hunters)
Continúa con el Curso Práctico de Next.js
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 53
Preguntas 6
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;
<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.
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.