Regístrate para obtener acceso a proyectos similares
Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!
Únete al retoUn podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.
Escuchar el podcastTecnologías: HTML, CSS, JS, React, react-router, react context.
Basta con las páginas de destino y los proyectos de vista única, es hora de crear nuestra primera aplicación web.
Este es un proyecto colaborativo, la clase se dividirá en grupos y cada uno creará una parte de un sitio web de vistas múltiples.
No clones este repositorio.
a) Si usas Gitpod (recomendao) puedes clonar el boilerplate clic aquí.
b) Si trabajas localmente, escribe el siguiente comando en tu terminal:
1$ git clone https://github.com/4GeeksAcademy/react-hello-webapp`
💡 Importante: Recuerda actualizar el remote
del proyecto con el de tu repositorio usando git remote set-url origin <your new url>
, y luego guardar tu código en tu nuevo repositorio usando add
, commit
y push
.
Invita a otros estudiantes como colaboradores.
Todos los estudiantes deben clonar el repositorio.
Divide el proyecto en pequeñas partes y cada grupo puede empezar a trabajar en su parte, 2 o 3 personas máximo por grupo.
Instala las dependencias $ npm install
Inicia el servidor WebPack development: $ npm run start
¡Hecho!
Cada grupo tendrá que crear el componente vista correspondiente con contenido ficticio (inicialmente) y tantos componentes "más pequeños" como sea necesario.
Nota: Piensa DRY (Don't repeat yourself), declara solo un componente con contenidoy usa props
para manejar contenido diferente.
Cada grupo usa el Consumer dado por el profesor para para usar el store para ponerle el contenido a las partes:
Estructura de store
:
1store = { 2 posts:[ 3 { 4 title: 'This is a World Post', 5 content: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.', 6 date: 'Oct 15', 7 tags: ['World'], 8 author: 'Denise A', 9 image: 'https://venturebeat.com/wp-content/uploads/2015/09/Screen-Shot-2015-09-03-at-13.43.14-e1441259794560.png', 10 thumbnail: 'https://media.takealot.com/covers_tsins/50045787/50045787-1-listgrid.jpg' 11 }, 12 ... 13 ], 14 15 products:[ 16 { 17 name: 'Vintage Phone', 18 image: 'https://images.pexels.com/photos/9165/hand-top-white-old.jpg?auto=compress&cs=tinysrgb&h=500&w=500', 19 price: 300.67, 20 description: 'Embrace nostagia with a brand new flip phone' 21 }, 22 ... 23 ], 24 25 session:{ 26 username:'Rigo', 27 email: 'rigocodes@gmail.com', 28 loggedIn: false 29 }, 30 31 cart:[ 32 { 33 name: 'Polaroid Camera', 34 image: 'https://images.pexels.com/photos/191160/pexels-photo-191160.jpeg?auto=compress&cs=tinysrgb&h=500&w=500', 35 price: 129.99, 36 description: 'Get instant photos' 37 }, 38 ... 39 ] 40};
Para tener acceso a los datos globales, deberás importar el archivo principal del contexto:
1 2// importando app context 3import {Context} from '/path/to/store/appContext.jsx'; 4 5 6const MyView = () => { 7 const { actions, store } = useContext(Context); 8 //Luego usa el Consumer en cualquier parte del componente 9 return (<span> hello, {store.session.username} </span>); 10}
Sugerencia: puede ver un ejemplo de Context.Consumer
en acción en:
demo.jsx
- demoList.jsx
- demoProducts.jsx
Regístrate para obtener acceso a proyectos similares
Todas las semanas escogemos un proyecto de la vida real para que construyas tu portafolio y te prepares para conseguir un trabajo. Todos nuestros proyectos están construidos con ChatGPT como co-pilot!
Únete al retoUn podcast de cultura tecnológica donde aprenderás a luchar contra los enemigos que te bloquean en tu camino para convertirte en un profesional exitoso en tecnología.
Escuchar el podcast