Cuándo usar React.js

Si React es tu primera libería de JavaScript, debes saber que muchas de las librerías están basadas en componentes, pero… ¿Realmente qué significa un “componente”? Si ya has tomado el Curso Básico de Web Components con JavaScript pues el concepto es prácticamente el mismo, pero aplicados a React. Pero si es la primera vez que escuchas sobre componentes…
.
☝ Básicamente un componente es un pedacito de tu página web, es decir, puede ser una sección específica de tu página web, o puede ser algún elemento que se repita múltiples veces en la misma. Lo importante a tener en cuenta es que, un componente es una parte específica de tu página, es algo que cumple una acción simple 👀.
.
¿El header de mi página puede ser un componente? ¡Sí!
¿El sidebar puede ser un componente? ¡Por su puesto!
Y si tengo varios articulos en mi página… ¿Puedo convertirlos a componentes? ¡Por su pollo! 😄
.
Recuerda que todo puede ser un componente, y esto nos permite modularizar nuestro código. Es decir, podemos dividir y “aislar” cada parte de nuestra página. Si por alguna razón necesitaramos actualizar nuestro header (por ejemplo), bastaría con entrar al componente header modificar una pequeña línea y listo! Ya no tendríamos que buscar el header dentro de tooooodo nuestro HTML UwU.
.
👀 Otra ventaja de los componentes es que son reutilizables, es decir, puedes usarlos cuantas veces quieras. Por ejemplo, si tuvieras un sitio web sobre blogs, ya sabes que muchos blogs suelen tener una imagen, un título y una descripción. Entonces podríamos crear un componente con la estructura de nuestro blogpost y únicamente mandarle la información que necesitemos por cada blogpost y cada uno se crearía automáticamente!!

Me gusta mucho que expliquen el proyecto antes de desarrollarlo 👌 Así voy pensando en las cosas que necesitaré. A veces en otros cursos simplemente van creando todo sin saber hacia donde vamos a terminar.

Considero que esta imagen define muy bien qué son los componentes. Cada componente representa un pedazo de código que cumple con una función y renderiza(muestra) una sección de lo que observamos como contenido total.

¿Cuántos estaban esperando este curso? 😎

2.-Cuándo usar React.js

Hay dos flujos de trabajo para crear aplicaciones web

Modelo en cascada:

Cuando cada equipo tiene un tiempo para hacer todo su respectivo trabajo para construir una app. Por ejemplo: el equipo de diseño diseña la aplicación, el de desarrollo programa todo lo diseñado y finalmente se lanza la app recogiendo el feedback de los usuarios y se vuelve a empezar tomando en cuenta lo dicho por los usuarios. Es problemático porque el esfuerzo puede ser en vano porque no se tiene un feedback hasta que se termina de construir la app.

Modelo del ciclo imperativo:

Se refiere a que cada equipo se enfocará en ciclos pequeños para construir partes más pequeñas de una app que en conjunto se puedan ir ensamblando para hacer la app completa. Resuelve el problema del modelo anterior, aquí se recibe el feedback al terminar cada pequeño ciclo, recibiendo así el feedback de manera más inmediata que antes.

MVP’s o :

Se refiere a construir funcionalidades pequeñas que sean completas para que podamos lanzarla y medir su impacto y decidir si seguir ese camino o probar otra cosa.

Hay que escoger el problema más crucial que debe resolver la app.

Análisis: Componentes y comportamientos

Componentes: Son la forma de estructurar las piezas de nuestra página web para hacerlas escalables, nos ahorran tiempo y esfuerzo. Son abstracciones de los elementos de nuestra página web para ser reusados las veces que necesitemos. Trabajan de manera independiente a los demás. Con react todos los componentes tienen una conexión con el resto de componentes de la app para que en conjunto reaccionen a los comportamientos del usuario.

Comportamiento: Las interacciones de los usuarios.

React es muy bueno cuando queremos construir rápidamente la primera versión funcional de una app web sin sacrificar su escalabilidad. Si no queremos escalarla después, no usar react, podemos usar JS simple.

puff, a ver si le aguanto al muchacho hasta el final del curso. Me cansa su exagerado entusiasmo.

Mi pequeña aportación sobre componentes (reutilizables). 😁

Minimum viable product oriented to functionalities

Make a modular development (component-based) so that users can interact and developers receive feedback, in short development cycles. NOTE: this means to develop complete modular FUNCTIONALITIES NOT single components.

(Minimum viable product oriented to functionalities in order to allow the user to use them and return us feedback)

React works pretty well with Analysis of Components and Behaviors

Prerequisites:

• HTML and CSS
• DOM manipulation with JavaScript
• Practical JavaScript
• ECMAScript6+
• Closures y Scope
• Asynchronous JavaScript

Software requirements

• Node.js
• Code Editors
• NPM o Yarn

Me acabo de dar cuenta que tiene una chaqueta de capitan america xD ❤️

este profe habla como un payaso jajaja
pero enseña bien !!
Jajaj

Desarrollo iterativo + Mínimo Producto Viable = Scrum

Mi conclusión sobre componentes y comportamientos:
Componentes: son las partes en las cuales se divide nuestra aplicación, cabe destacar que estas pueden estar comunicadas entre sí, de esta manera permite escalar de una manera muy fácil nuestra app.
Comportamientos: son las acciones que un componente puede realizar, al igual que los componentes estos pueden estar conectados entre sí.

Si no estoy mal este proyecto vendría siendo un CRUD, que es el acrónimo de "Crear, Leer, Actualizar y Borrar"
Excelente proyecto para empezar aprender ReactJs! ⚛️

La clave es desarrollar pequeños experimentos con el código, crear un PMV e irlo escalando desde el núcleo. Me identifico con esta metodología.

Existen dos formas o flujos de trabajo para crear aplicaciones web profesionales.

El primero es el modelo en cascada, cada parte del equipo toma por completo su area, se recoje el feedback y se vuelve a empezar

Problema es que en el feedback es que los usuarios pueden usar solo el 10% de la aplicación.

Modelo del ciclo mvpterativo

Cada equipo va a tener ciclos pequeños para construir parte pequeñas que en conjunto va ensamblando una aplicación grande

Acá podemos monitoriar mejor el impact de nuestra aplicación

mvp. funcionalidades que aunque sean pequeñas son completas

Se crea cada parte de la aplicación para que funcione completamente bien.

Mvp siginifica “Mínimos productos viables” Se trata de escoger el problema más crucial que debe resolver la aplicación para desarrollar la solución.

Componentes y comportamientos

1. Los componentes son abstracciones de los elementos de nuestra página web para que se pueda reutilizar.

Cada componente tiene relación con todos los componentes para que en conjunto puedan reaccionar entre todos a los comportamientos del usuario

1. El comportamiento es la manera de interacción con el usuario gracias al DOM.

2. Todo lo que se hace en react se puede hacer en javascript.

La ventaja de usar react es aue nos da herramientas para trabajar de manera más fácil y organizado usando componentes y hacer que reaccionen con el usuario.

¿Cuándo usar react?

• Cuándo no usarlo* Es útil cuando tenemos que empezar a construir una aplicación funcional pero no afectar su escalabilidad en el futuro. Es decir que si no se va actualizar, no hay que usar react

• Cuándo usarlo: Cuándo nuestra aplicación si escala

React es bien fuerte cuando se usa en modelo mpviterativo

Pregunta de examen:
¿Qué significa el “ecosistema de React”?

Me encanta la actitud del profe, jaja

Los cursos no deberian ser tan largos, nunca me han gustado los cursos ni de leonidas esteban ni de el, se dedican a hacer mas coshitas y hablar lindito que ir directo al grano, pueden mejorar esto? como que este curso debe durar 14 minutos? cuando los novatos vayan a hacer el examen perderan todo el conocimiento asi sea que escriban.

Chale, no sabia cuanto necesitaba esta clase.
Creo que estoy usando React mal :v

Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.

Suena muy interesante el proyecto 😉

me parece que pierde el tiempo hablando, tendrias que empesar con el proyecto e ir explicando conforme lo que vas haciendo, todos sus cursos iguales, habla mucho.

Vamos con React.js 😃

Un curso introductorio bastante bueno. Nos vemos al final de este contenido

Flujos de trabajo para crear Apps

Modelo en Cascada.

En este modelo cada equipo tiene un tiempo designado para realizar todo su trabajo para realizar la app.

<aside>
💡 Puede ser no lo mejor ya que no se podrá testear el resultado sinó hasta el final de la creación de la aplicación.

Puede que haya partes de tu app que realmente no necesitas, y no lo sabrás hasta que tus usuarios testen, hasta el final.

</aside>

El modelo de MVP Interativo

Cada equipo tendrá ciclos pequeños para trabajar en funcionalidades más pequeñas de la aplicación (partes completas)

<aside>
💡 Con este modelo puedes testear qué partes de la aplicación da mejor o peor impacto.

</aside>

Análisis: componentes y comportamientos.

A la hora de desarrollar un sitio o aplicación web, les programadores pros podrán generar una abstracción del requerimiento en componentes y comportamiento.

Componentes

Los Componentes permiten separar la interfaz del usuario en partes independientes, reutilizables y permiten pensar en ellas de manera aislada.

Se puede pensar en un componente como una pieza de Lego. Estás tienen diferentes formas, colores y tamaños. Dependiendo de lo que vayas a crear puedes usar un mismo componente en varios tipos de construcciones.

Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas “props”) y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Estas propiedades se almacenan en un objeto, que por convención lo llamamos “props”.

Comportamientos

Las interacciones de los usuarios.

<aside>
💡 React es perfecto, para crear MVP escalables.

</aside>

Muy buen profesor!

Excelente explicacion, haces la clase mas interactiva, no se tu forma de explicar me da animo 😁

When use React.js?

There are two workflows to create professional web applications.

1. Cascade Model

Every team make their part of the project in the cycle to create.

2. Iterative Cycle Model

Little cycles to create little parts of the project and get feedback faster. It is about create little functionalities, but make it complete (MVP - Minimum Valuable Products).

We have to analyze the components and behaviors of the project and work in it.

React.js is it worth when we want to support the project in the future.

**Comentario compañero - RetaxMaster**

Si React es tu primera librería de JavaScript, debes saber que muchas de las librerías están basadas en componentes, pero… ¿Realmente qué significa un “componente”? Si ya has tomado el

Curso Básico de Web Components con JavaScript

pues el concepto es prácticamente el mismo, pero aplicados a React. Pero si es la primera vez que escuchas sobre componentes…

.

☝ Básicamente un componente es un pedacito de tu página web, es decir, puede ser una sección específica de tu página web, o puede ser algún elemento que se repita múltiples veces en la misma. Lo importante a tener en cuenta es que, un componente es una parte específica de tu página, es algo que cumple una acción simple 👀.

.

¿El header de mi página puede ser un componente?

¡Sí!

¿El sidebar puede ser un componente?

¡Por su puesto!

Y si tengo varios artículos en mi página…

¿Puedo convertirlos a componentes? ¡Por su pollo!

😄

.

Recuerda que todo puede ser un componente, y esto nos permite modularizar nuestro código. Es decir, podemos dividir y “aislar” cada parte de nuestra página. Si por alguna razón necesitamos actualizar nuestro header (por ejemplo), bastaría con entrar al componente header modificar una pequeña línea y listo! Ya no tendríamos que buscar el header dentro de tooooodo nuestro HTML UwU.

.

👀 Otra ventaja de los componentes es que son re-utilizables, es decir, puedes usarlos cuantas veces quieras. Por ejemplo, si tuvieras un sitio web sobre blogs, ya sabes que muchos blogs suelen tener una imagen, un título y una descripción. Entonces podríamos crear un componente con la estructura de nuestro blog-post y únicamente mandarle la información que necesitemos por cada blog-post y cada uno se crearía automáticamente!!

Brigittenikoll

un poco más sobre las
metodologías del desarrollo de software

El proyecto se ve muy interesante, normal mente los primeros cursos sobre una tecnologia son teoricos en platzi, esto es muy interensante. Vamoooo

Desarrolladora o desarrollador se dice profe, esta plataforma no tiene lugar para quejas?

Hola, Juan…
Creo que en los recursos te refieres es a iterativo, (no imperativo, como aparece), ya que hace referencia a que itera varias veces.

este curso debería estar en la ruta de la escuela de js

bueno vamo a darle

Muy buena introducción tanto a React, como al proyecto.

No se si lo expliquen mas adelante, pero después de haber aprendido el concepto de componentes (En esta misma clase Retax tiene una muy buena definición) debemos comprender la composición de componentes no es mas que juntar varios componentes y hacer un componente más grande, por poner un ejemplo a la izquierda de este mismo curso esta el numero de las clases de curso, cada clase puede ser un componente (classComponent) y la composición de las clases ya con el scroll y agrandar o hacer chico puede ser otro componente (sideBarComponent) en el cual se encontraran los classComponent, es un ejemplo sencillo pero espero sirva de ayuda 😃

El ecosistema React

Entendí que React nos ayuda a manejar de mejor manera la reutilización de código para que nuestra aplicación sea más efectiva.

Componentes Presentaciones y Funcionale :v

Hola Platzi! ¿Cómo va? Estoy armando una carpeta de Google Docs con la toma de notas de todos los cursos que voy realizando para que entre todos podamos aportar!

Los invito a participar!
https://drive.google.com/drive/folders/1SWGMgTMPbwgasbzcivcpcnIudc2vk_v0?usp=sharing

Excelente curso

Considero que para toda esta introducción hubiera sido necesario menos tiempo. El profesor enseña muy bien, pero no puedo negar que suele ser gracioso

¿React ayuda a crear aplicaciones con web components? Pero…

¿Qué es un web component?
Una pieza de la aplicación web, por ejemplo un menu, un boton, un input, un card, etc.

¿Cómo identificó un web component?
Si algo de lo que ves en tu pantalla se repite muchas veces en la interfaz o tiene una funcionalidad en especifico, puedes volverlo un web component.