Aplicación Multivista de React

Tecnologí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.

🌱 Cómo iniciar este proyecto

No clones este repositorio.

1. El primer paso para comenzar a codificar es clonar el React.js FLUX boilerplate en tu ordenador (local), o utilizando el puente de aprovisionamiento de 4Geeks.com que te permite abrirlo en un sólo paso.

Si deseas clonar el repositorio para abrirlo en tu ordenador localmente, escribe el siguiente comando en la terminal bash:

1$ git clone https://github.com/4GeeksAcademy/react-hello-webapp

1. Invita a otros estudiantes como colaboradores.

2. Todos los estudiantes deben clonar el repositorio.

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

4. Instala las dependencias $ npm install

5. Inicia el servidor WebPack development: $ npm run start

¡Hecho!

Partes/Grupos:

• NavBar/Footer/Login View (Session) | https://getbootstrap.com/docs/4.1/examples/carousel/ & https://getbootstrap.com/docs/4.1/examples/sign-in/
• Landing Page with Carousel (Products and Posts) | https://getbootstrap.com/docs/4.1/examples/carousel/
• Blog/Post View (Posts) | https://getbootstrap.com/docs/4.1/examples/blog/
• Store/Checkout (Products) | https://getbootstrap.com/docs/4.1/examples/product/ & https://getbootstrap.com/docs/4.1/examples/checkout/

Este proyecto está destinado a realizarse en dos fases.

Fase 1: configurar las vistas. Reaccionar enrutador.

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 contenido y usa props para manejar contenido diferente.

Fase 2: Dinamizar la aplicación: React Context.

Cada grupo usa el Consumer dado por el profesor para usar el store para ponerle el contenido a las partes:

• Navbar: debe mostrar el nombre de usuario y la imagen del usuario (suponga que el usuario está conectado).
• Login: Mostrar el formulario de inicio de sesión.
• Landing Page: debe mostrar 3 publicaciones en el carrusel, 3 publicaciones en una cuadrícula y 3 productos en la sección de productos.
• Blog: debe mostrar 6 entradas de blog
• Post View: debe mostrar los detalles de la publicación pulsada.

Usando el Context

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://storage.googleapis.com/breathecode-asset-images/26004b86a7c1ff2915ca43328d8774ef6690cfa139ce64fb05cf4a73838b07d5.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://storage.googleapis.com/breathecode-asset-images/55733ee07ada7ebeab108fe67331d409a468e92cf805b66d8ede2d3054ed46a6.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