Section 3: React Basics & Working With Components Flashcards
¿Qué es React?
React es una librería de Javascript basada en componentes, que hace simple el desarrollo, interactivo y reactivo de user interfaces complejas.
Todas las UIs están hechas a base de componentes.
¿Qué son los componentes?
Una combinación de HTML, CSS y Javascript.
¿Por qué React usa componentes?
Por su reusabilidad y porque permite la “separación de preocupaciones/ separation of concerns” (permite mantener el code base pequeña y administrable)
Declarative Approach
Se trata sobre definir el estado objetivo, y permitir que React detecte las instrucciones Javascript para el DOM.
“Construimos nuestros propios elementos HTML especiales” y los combinamos para crear una User Interface.
Rendering:
distintas funciones transforman el código del proyecto agregando las funcionalidades “faltantes”, antes de que se muestre en el browser.
ReactDOM
ReactDOM importa objetos tipo React DOM desde la librería React-Dom.
La librería React
La librería React está dividida en dos packages (react-dom y react-scripts)
El método Render()
El método Render() que se usa con el objeto ReactDOM, toma dos argumentos:
1- Un componente.
2- Un Default Javascript DOM API
Single Page Application (SPA)
Significa que en todo el proyecto React, tenemos solo un archivo HTML renderizado por el browser pero en el que importamos el código final de nuestro React App.
JSX
JSX significa Javascript XML y funciona en la librería React gracias a que por los procesos que llevan a cabo distintos packages cuando ejecuto NPM START
¿Cómo funciona React?
Con React construimos nuestros Elementos HTML Personalizados (Components) a través del Declarative Approach y React se encarga de correr las instrucciones necesarias en el DOM para mostrar lo que se hace visible.
A diferencia de Javascript que usa un Imperative Approach en el que debo declarar cada instrucción. En React usamos un Declarative Approach en el que simplemente declaramos el end state (cómo queremos que se vea el elemento) y luego React se encarga de correr las instrucciones del DOM tras bambalinas (Renderizar)
ROOT COMPONENT
APP.JS también es conocido como nuestro ROOT COMPONENT. Eso significa que este es el primer componente que se renderiza en nuestros archivos iniciales (en index.js) y todos nuestros componentes estarán alojados en APP.JS o uno dentro de otro.
Components Tree
Al final, con React creamos un Components Tree en el que APP component está en el tope, y debajo están cualquier otro tipo de Custom HTML Elements, que al final almacenan todas las demás piezas de el UI.
Solo los componentes del top serán renderizados directamente en el HTML, gracias al método ReactDOM.render(). Todos los demás componentes no serán renderizados con este método, pero en consecuencia serán utilizados como Elementos HTML Regulares dentro de nuestro código HTML, que estará dentro nuestro HTML.
Componentes
Un componente en React es solo una función tipo Javascript que devuelve código HTML.
Para poder usar este componente hay que exportarlo y generalmente se usa el keyword EXPORT junto a DEFAULT para indicar que nuestro componente será el único elemento a exportar.
Luego de importar nuestro componente, podemos usarlo como si fuera un HTML TAG cualquiera con el nombre exacto del componente.
Regla React y HTML
Una de las reglas simples que sigue React es que los elementos HTML que comienzan con lowercase (minúscula) son HTML NORMAL, pero aquellos que empiezan con Uppercase (mayúscula) son CUSTOM HTML
Regla React y JSX
JSX sigue una REGLA que dicta que solo se puede tener un ROOT ELEMENT por cada RETURN. Ej: no puedo tener dos tags de <div> en el return de mi componente, a menos que estén contenidas en otro elemento (como un mismo div). Si almaceno todos los elementos en un DIV se podría renderizar sin problema.
Esa es la forma más sencilla de cumplir con esta regla, envolver (wrap) los elementos en un contenedor.</div>
toISOString()
es un método disponible para Date Objects que los convierte en strings.
Props
(properties) son los atributos definidos para nuestro CUSTOM HTML en React, que hacen la función de parámetros y nos permiten pasar data. Podemos definir propiedades para nuestros propios CUSTOM COMPONENTS.
React se encargará de que obtengamos un parámetro en cada componente que usemos como componente y ese parámetro será un objeto que recibe todos los atributos como propiedades y en consecuencia se le conoce como PROPS y aunque se puede nombrar como uno lo desee, se le denomina props para dejar claro que es el parámetro que guarda todas los atributos del objeto.Para ser más precisos, a través de este parámetro obtenemos pares de key-values. Key (el nombre del atributo) y value (su valor).
toLocaleString()
Nos ayuda a mostrar la fecha en un formato legible por el humano. Toma dos argumentos:
El lenguaje en el que será configurado.
Un objeto donde configuro que tan específico será el formato de la fecha
Lógica de Componentes
No hay una regla clara sobre cuándo crear un nuevo componente, pero la lógica de usar componentes en React trata sobre tener distintas partes pequeñas y administrables cada una con una función específica.
Composition
Todo esto se trata de componentes y props para configurarlos al pasarles data.
El approach de crear una UI partiendo de pequeños bloques se conoce como COMPOSITION. La idea detrás de todo componente es la de tener bloques de construcción para evitar duplicación.
Props.children
Props.children es una propiedad que viene predefinida en React. Children es un nombre reservado y el valor de este special children, siempre será el contenido entre las etiquetas de apertura y cierre de mi Custom Component.
Component wrapers
Los Component Wrapers son un tipo especial de componentes que me ayudan a evitar mucha duplicación de código y a mantener todo mi otro código limpio.
Podemos tener componentes sin configuración a través de props, sino que actúen como un contenedor alrededor de elementos, para eso usamos props.children.
