Facebook y su comunidad. Esta está escrita en javascript y es orientada a componentes y paradigma funcional, pero también soporta clases, react nos permitirá escribir elementos node con la sintaxis html desde javascript con su librería JSX, gracias al virtual dom nos permitirá realizar cambios y actualización del DOM solo en los nodos donde cambie la información y de esta manera será más óptima.
Con React podremos crear aplicaciones web, paginas
web , aplicaciones móviles con react native y también aplicaciones de escritorio usando la sintaxis de react.
https://es.reactjs.org/
2 Instalando React y react developer tools
Crearemos nuestro primer proyecto de React, utilizando create-react-app, este paquete nos ayuda a instalar todas las dependencias necesarias para construir nuestra aplicación. https://create-react-app.dev/
Para controlar el cambio de valores de los componentes y hacer debugging instalaremos React Developer tools. Esta es una herramienta oficial de facebook.
3 Qué es el virtual dom?
El virtual DOM es un patrón que implementa React para no renderizar el
DOM completamente, a través de VDOM solo se actualizara los atributos o propiedades que han cambiado. Se realiza esta acción ya que al manipular directamente el DOM, este renderiza todo el árbol y el coste computacional será mayor, a comparación del VDOM que solo modificara las partes diferentes a través del algoritmo de comparación o reconciliación.
El VDOM es una copia , una representación virtual del DOM, cada vez que se modifica un valor el DOM virtual se actualiza en lugar del DOM.
Cada vez que se hace un cambio en los valores se creará una nueva copia de dom virtual, estas se comparan entre sí y la mejor será la que reemplace esa parte en el DOM real
Toda esta implementación se logra en React a través de React.render,
este escuchara los cambios y renderiza las partes que cambien. 4 ReactDom.render
A través de reactDom.render podremos renderizar los elementos creados con react. Este método recibe 2 argumentos, el primero el elemento a renderizar y el segundo donde renderizar. reactDom.render sera el encargado de agregar los cambios generados por la reconciliación del vdom.
5 JSX y createElement
JSX es una extensión de la sintaxis de javascript, a través de JSX podremos definir elementos node dom como si estuviéramos escribiendo HTML , a traves de JSX podremos unir logica javascript con el manejo de plantillas y a traves esto podremos crear componentes. JSX no es un requisito para usar react, pero es una manera sencilla de crear interfaces. JSX es azúcar sintáctico para llamar a React.createElement, pero usando React.createElement la definición se vuelve más compleja.
6 Expresiones con JSX
Usando JSX podremos agregar expresiones y operaciones, estas tendrán que definirse dentro de las llaves {} para que sean evaluadas.
7 Pensando en componentes y qué es?
Un componente es una pieza reutilizable,
encapsulada, que recibe propiedades y se adapta según los valores que reciba, este está formado por codigo CSS, codigo JS y código HTML. El framework React tiene una arquitectura orientada a componentes, esto quiere decir que cada una de sus partes será un componente. Los componentes son funciones constructora de elementos (objetos). Cuando creemos un proyecto tendremos que pensar en cada parte de este como un componente, la recomendación de construir componentes es cuando un elemento se repite más de una vez o cuando queramos desacoplar y encapsular una parte del sistema.
8 Componentes y propiedades
Dentro de react existen 2 tipos de componentes,
componentes con estado y sin estado. Esto se pueden trabajar a través funciones declarativas o el uso de clases.
Aprenderemos a crear un componente sin estado, para
definir uno sin estado simplemente definiremos una función que retorna la estructura del componente usando JSX , este recibirá propiedades a traves del objeto props.
La definición de un componente por convención se
realiza a través de pascal Case, esto quiere decir que la primera letra será mayúscula. Cuando invocamos a un componente éste será un elemento que sera un objeto creado. Recuerden que también podremos invocar componentes dentro de otro componente a esto se le llama composición de componentes. 9 Renderizado condicional
Podremos crear condiciones para mostrar renderizar un
componente o no renderizarlo, podremos hacerlo a través de : ● If, if else ● operador ternario ● Circuito corto ● Condicionales anidadas
10 Registrando eventos
Podremos definir eventos directamente en las etiquetas
JSX, estas se definirán usando camelCase, en vez de minúsculas, simplemente pasaras una función dentro de las llaves.
Otra diferencia es que en React no puedes retornar false
para prevenir el comportamiento por defecto. Debes, explícitamente, llamar preventDefault.
A tus manejadores de eventos se les pasarán instancias
de SyntheticEvent, un contenedor agnóstico al navegador alrededor del evento nativo del navegador. Tiene la misma interfaz que el evento nativo del navegador, incluyendo stopPropagation() y preventDefault(), excepto que los eventos funcionan de manera idéntica en todos los navegadores. 11 Listas y Keys
Podremos recorrer colecciones de datos a traves del
metodo map.
Cada elemento de una colección tiene que tener la
propiedad key, con un valor único, esta es una buena práctica para el performance.
Podremos agregar condicionales a nuestros
componentes usando operador ternario, if, else.
12 Estilos en react
Podremos implementar estilos a través de la
importación del archivo sea en formato css o formato sass. También podremos agregar estilos de manera inline a través de objetos.
También podremos implementar lógica para
agregar o quitar estilos o clases.
Podremos agregar CSS Modules, esto significa
que podremos encapsular los estilos en un componente y este no podrá sobreescribir otras partes.
13 Ejercicio
Construir los componentes del siguiente diseño, estos son
Componente : ● header ● main ● footer ● card ● counter ● button ● input ● List
Estos componentes deben recibir propiedades y en base a estas cambiar su estructura o estilos
Referencia de diseño: https://www.figma.com/file/mgaLIqB1VQzkoucWVSAzdp/SHOPING-CAR?node-id=0%3A1 14
