React.js - Yessica54/carrera-front-end GitHub Wiki

Es una librería para el desarrollo de aplicacion multiplataforma, que hace uso de jsx y componentes

Para la creacion de aplicacion de react vamos a instalar la liberia local para esto de ejecuta:

npm install -g create-react-app

Para la crear una nueva aplicacion de react ejecutar el comanado:

create-react-app hello-react

JSX es una extensión de JavaScript creada por Facebook para el uso con la biblioteca React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código generado con React a JavaScript.

JSX tiene su alternativa que es React.createElement pero es preferible JSX porque es mucho más legible y expresivo. Ambos tienen el mismo poder y la misma capacidad.

React.createElement recibe 3 argumentos:

• El tipo de elemento que estamos creando
• sus atributos o props
• y el children que es el contenido. Ejemplo: React.createElement(‘a’, { href: ‘https://platzi.com’ }, ‘Ir a Platzi’);

En JSX se utilizan las llaves para introducir variables o expresiones de Javascript. Lo que sea que esté adentro se va a evaluar y su resultado se mostrará en pantalla.

Las expresiones pueden ser llamadas a otras funciones, cálculos matemáticos, etc. Si las expresiones son false, 0, null, undefined, entre otros, no se verán.

Los componentes en React son bloques de construcción. Las aplicaciones hechas con React son como figuras de Lego. Junta varias piezas (componentes) y puedes construir un website tan pequeño o tan grande como quieras. Los componentes serán barras de búsquedas, enlaces, encabezados, el header, etc.

”Componente” vs “elemento Un elemento es a un objeto como un componente es a una clase. Si el elemento fuera una casa, el componente serían los planos para hacer esa casa.

Identificación de componentes Para identificarlos debes hacerte las siguientes preguntas:

• ¿Qué elementos se repiten? Estos son los elementos en una lista o los que comparten aspecto visual y su funcionalidad
• ¿Qué elementos cumplen una función muy específica? Estos sirven para encapsular la lógica y permiten juntar muchos comportamientos y aspectos visuales en un solo lugar.

Props son atributos de nuestro componentes, pueden se parámetros de entrada ejemplo

const {
            firstName,
            lastName,
            avatarUrl,
            jobTitle,
            twitter
            } = this.props;

• React dispone de eventos. Cada vez que se recibe información en un input se obtiene un evento onChange y se maneja con un método de la clase this.handleChange
• Los elementos button también tienen un evento que es onClick.
• Cuando hay un botón dentro de un formulario, este automáticamente será de tipo submit. Si no queremos que pase así hay dos maneras de evitarlo: especificando que su valor es de tipo button o manejándolo desde el formulario cuando ocurre el evento onSubmit.

Hasta esta clase todos los componentes han obtenido su información a través de props que vienen desde afuera (otros componentes) pero hay otra manera en la que los componentes pueden producir su propia información y guardarla para ser consumida o pasada a otros componentes a través de sus props. La clave está en que la información del state a otros componentes pasará en una sola dirección y podrá ser consumida pero no modificada.

• Para guardar la información en el estado se usa una función de la clase component llamada setState a la cual se le debe pasar un objeto con la información que se quiere guardar.
• Aunque no se ve, la información está siendo guardada en dos sitios. Cada input guarda su propio valor y al tiempo la está guardando en setState, lo cual no es ideal. Para solucionarlo hay que modificar los inputs de un estado de no controlados a controlados.

Levantar el estado es una técnica de React que pone el estado en una localización donde se le pueda pasar como props a los componentes. Lo ideal es poner el estado en el lugar más cercano a todos los componentes que quieren compartir esa información.

Algo interesante que le da el nombre a React es su parte de “reactivo” ya que cada vez que hay un cambio en el estado o en los props que recibe un componente se vuelve a renderizar todo el componente y todos sus descendientes.

Las aplicaciones que se trabajan en React son llamadas single page apps. Esto es posible gracias a React Router que es una librería Open Source.

Multi Page Apps: Cada página implica una petición al servidor. La respuesta usualmente tiene todo el contenido de la página.

Single Page Apps (SPA): Aplicaciones que cargan una sola página de HTML y cualquier actualización la hacen re-escribiendo el HTML que ya tenían.

React Router (v4): Nos da las herramientas para poder hacer SPA fácilmente. Usaremos 4 componentes:

• BrowserRouter: es un componente que debe estar siempre lo más arriba de la aplicación. Todo lo que esté adentro funcionará como una SPA.
• Route: Cuando hay un match con el path, se hace render del component. El component va a recibir tres props: match, history, location.
• Switch: Dentro de Switch solamente van elementos de Route. Switch se asegura que solamente un Route se renderize.
• Link: Toma el lugar del elemento , evita que se recargue la página completamente y actualiza la URL.

Para instalar React Router lo hacemos desde la terminal con npm install react-router-dom. Como es importante usar exactamente la misma versión, del package.json en “dependencies” se quita lo que está delante del 4.

Link internamente tiene un elemento pero va a interceptar el clic para navegar de manera interna sin refrescar toda la página.

Para generar las rutas es necesario crear un componente en donde instanciemos las rutas:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import BadgeNew from '../pages/BadgeNew';
import Badges from '../pages/Badges';

function App(){
    return (
        <BrowserRouter>
            <Switch> // Solo renderiza una ruta
                <Route exact path="/" component={Badges}/> // Se indica exact para que no haga macht con las las rutas que contengan
                <Route exact path="/badges/new" component={BadgeNew}/>
            </Switch>
        </BrowserRouter>
    );
}

export default App;

En el index.js debemos renderizar a APP

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './global.css';
import App from './component/App';

const container = document.getElementById('app');

// ReactDOM.render(__qué__, __dónde__);
ReactDOM.render(<App />, container);

Para hacer los link en vez de usar la etiqueta utilizaremos la etiqueta

<Link to="/badges/new" className="btn btn-primary">
    New Badge
</Link>

Cuando React renderiza los componentes decimos que entran en escena, cuando su estado cambia o recibe unos props diferentes se actualizan y cuando cambiamos de página se dice que se desmontan.

Montaje:

• Representa el momento donde se inserta el código del componente en el DOM.
• Se llaman tres métodos: constructor, render, componentDidMount.

Actualización:

• Ocurre cuando los props o el estado del componente cambian.
• Se llaman dos métodos: render, componentDidUpdate.

Desmontaje:

• Nos da la oportunidad de hacer limpieza de nuestro componente.
• Se llama un método: componentWillUnmount.

Las llamadas a una API siguen un patrón similar siempre que las hacemos, cada llamada consta de tres estados:

• Loading: cuando la petición se envía y estamos esperando.
• Error: se debe dejar un mensaje para el usuario para arreglar el error o volver a intentarlo.
• Data: los datos nos pueden llegar de dos formas, o en error o con los datos requeridos.

Hay momentos en los que queremos renderizar un modal, un tooltip, etc. Esto puede volverse algo complicado ya sea por la presencia de un z-index o un overflow hidden.

En estos casos lo ideal será renderizar en un nodo completamente aparte y para esto React tiene una herramienta llamada Portales que funcionan parecido a ReactDOM.render; se les dice qué se desea renderizar y dónde, con la diferencia de que ese dónde puede ser fuera de la aplicación.

Ejemplo

import ReactDOM from 'react-dom';
...

{ReactDOM.createPortal(
    <h1>Hola, realmente no estoy aquí</h1>, 
    document.getElementById('modal')
)} //ReactDOM.createPortal(que, donde)

Se debe crear crear un div en el index.html para meter el contenedor del portal

La técnica de usar componentes genéricos para crear uno nuevo especializado se llama composición y es una herramienta que todo buen programador debe saber utilizar.

Las funciones no tienen un estado propio que manejar como ciclos de vida a los que deben suscribirse, mientras tanto las clases sí cuentan con ello.

React tiene un feature llamado **Hooks **que permite que las funciones también tengan features que solamente tienen las clases.

Hooks: Permiten a los componentes funcionales tener características que solo las clases tienen:

• useState: Para manejo de estado.
• useEffect: Para suscribir el componente a su ciclo de vida.
• useReducer: Ejecutar un efecto basado en una acción.

Custom Hooks: Usamos los hooks fundamentales para crear nuevos hooks custom. Estos hooks irán en su propia función y su nombre comenzará con la palabra use. Otra de sus características es que no pueden ser ejecutados condicionalmente (if).

• useState regresa un arreglo de dos argumentos.

Los Hook solo funcionan en clases funcionales

ejemplo Hook React

const [count, setCount] = React.useState(0);

...

<button onClick={() => {
   setCount(count+1);
}}> {count} </button>

ejemplo Hook Custom

function userIncreaseCount(max){
  const [count, setCount] = React.useState(0);
  if(count > max){
   setCount(0)
  }

  return [count, setCount];

}
...
const [count, setCount] = userIncreaseCount(4);

...

<button onClick={() => {
   setCount(count+1);
}}> {count} </button>

Ejemplo useMemo

const [query, setQuery] = React.useState(''); 
const [filteredBadges , setfilteredBadges ] = React.useState(badges); 
... 
// Este valida si badges o query cambian es cuando ejecuta la funcion pasada en el primer argunmento 
React.useMemo(() => {
   const resutl = badges.filter(x=> x.fristName.ToLowerCase().includes(query.toLowerCase()));
   setfilteredBadges(resutl);
}, [badges, query]);