Section 3: React Basics & Working With Components

Question 1

¿Qué es React?

Answer 1

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.

Question 2

¿Qué son los componentes?

Answer 2

Una combinación de HTML, CSS y Javascript.

Question 3

¿Por qué React usa componentes?

Answer 3

Por su reusabilidad y porque permite la “separación de preocupaciones/ separation of concerns” (permite mantener el code base pequeña y administrable)

Question 4

Declarative Approach

Answer 4

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.

Question 5

Rendering:

Answer 5

distintas funciones transforman el código del proyecto agregando las funcionalidades “faltantes”, antes de que se muestre en el browser.

Question 6

ReactDOM

Answer 6

ReactDOM importa objetos tipo React DOM desde la librería React-Dom.

Question 7

La librería React

Answer 7

La librería React está dividida en dos packages (react-dom y react-scripts)

Question 8

El método Render()

Answer 8

El método Render() que se usa con el objeto ReactDOM, toma dos argumentos:
1- Un componente.
2- Un Default Javascript DOM API

Question 9

Single Page Application (SPA)

Answer 9

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.

Question 10

JSX

Answer 10

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

Question 11

¿Cómo funciona React?

Answer 11

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)

Question 12

ROOT COMPONENT

Answer 12

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.

Question 13

Components Tree

Answer 13

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.

Question 14

Componentes

Answer 14

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.

Question 15

Regla React y HTML

Answer 15

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

Question 16

Regla React y JSX

Answer 16

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>

Question 17

toISOString()

Answer 17

es un método disponible para Date Objects que los convierte en strings.

Question 18

Props

Answer 18

(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).

Question 19

toLocaleString()

Answer 19

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

Question 20

Lógica de Componentes

Answer 20

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.

Question 21

Composition

Answer 21

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.

Question 22

Props.children

Answer 22

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.

Question 23

Component wrapers

Answer 23

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.