Taller de React

¿Qué vamos a ver?

  1. Teoría:
    1. React
    2. JSX
    3. Componentes
    4. Estado
    5. Hooks
    6. Tipos de componentes
  2. Práctica: aplicación estilo Instagram
  3. Dudas y comentarios

Henar

Sonia

Quiénes somos

@HenarMendiola

@Yune__vk

React

Una biblioteca de JavaScript creada para facilitarnos la tarea de desarrollar interfaces de usuario.

¿Qué es React?

🚀 Declarativo

📦 Basado en componentes

📱 Escríbelo una vez, ejecútalo donde sea

Principios

👶 Creado en 2013 por Facebook

⭐️ 142k stars en GitHub

🪐 Ecosistema completo: Redux, Gatsby, GraphQL, React Native, Next.Js, Enzyme (testing-AirBnB), Flow...

👩🏻‍💻 +1k contributors

React-facts

JSX

const element = <h1>Hello, world!</h1>;

🤔 ¿String?

🤔  ¿HTML?

JSX

Es una extensión de la sintaxis de JavaScript que “produce elementos” de React.

¿Qué es JSX?

Podemos usar comillas para especificar strings literales como atributos.

const element = <div tabIndex="0"></div>;

También podemos usar llaves para insertar una expresión JavaScript en un atributo.

const element = <img src={user.avatarUrl}></img>;

Atributos en JSX

JSX es más cercano a JavaScript que a HTML, usamos la nomenclatura camelCase en vez de nombres de atributos HTML.

class 👉 className

tabindex 👉 tabIndex

¡Advertencia!

Componentes

Son entidades que nos permiten separar la interfaz en piezas independientes y reutilizables.

 

Conceptualmente son como las funciones. Aceptan atributos (llamadas “props”) y devuelven elementos de React.

¿Qué es un componente?

const Welcome = props => {
  return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Componentes funcionales

Basados en clases

Es la acción que realiza el navegador para convertir nuestro código en algo que podemos ver.

¿Qué es renderizar?

const element = (
  <div>
    <h1>Hello, world!</h1>
    <h2>It is {new Date().toLocaleTimeString()}.</h2>
  </div>
);

Podemos pasar atributos a otros componentes. Estos se reciben como un objeto que se suele llamar “props”.

const Welcome = props => {
  return <h1>Hello, {props.name}</h1>;
}

const App = () => {
  return (
    <div>
      <Welcome name="Irene" />
      <Welcome name="Sandra" />
    </div>
  );
}

Props (properties)

Todos los componentes de React deben actuar como funciones puras respecto a sus props, no tratan de cambiar lo que reciben.

Si queremos hacer nuestras interfaces dinámicas debemos usar estados.

Las props son de solo lectura

const Welcome = props => {
  return <h1>Hello, {props.name}</h1>;
}

const App = () => {
  return (
    <div>
      <Welcome name="Irene" />
      <Welcome name="Sandra" />
    </div>
  );
}

Composición de componentes

Podemos combinar componentes para crear nuevos componentes más complejos. ¡No tengas miedo de dividir en componentes más pequeños!

const App = () => {
  return (
    <Welcome name="Irene" />
    <Welcome name="Sandra" />
  );
}

¡Cuidado!

Debes devolver siempre un único nodo. Si tenemos varios elementos, se deben englobar dentro de uno solo.

const App = () => {
  return (
    <div>
      <Welcome name="Irene" />
      <Welcome name="Sandra" />
    </div>
  );
}

🚫

✅

React Fragments

Si quieres agrupar elementos sin añadir nodos extra al DOM, puedes usar los fragmentos de React (<></> o <React.Fragment></React.Fragment>.

const App = () => {
  return (
    <>
      <Welcome name="Irene" />
      <Welcome name="Sandra" />
    </>
  );
}

Estado

Los componentes con estado almacenan datos locales al componente que pueden variar variar a lo largo del tiempo bajo diversas circunstancias, por ejemplo por la interacción del usuario con el componente.

¿Qué es el estado?

Las props y el estado son objetos planos. Ambos contienen información, pero son diferentes:

Props vs estado

👉 props se pasa al componente (como los parámetros de una función).

👉 El estado se gestiona dentro del componente (como las variables declaradas dentro de una función).

Componentes funcionales 👉 Hooks

¿Cómo gestionar el estado?

Componentes de clase 👉 setState()

Cada vez que actualicemos el estado interno de nuestro componente, este se vuelve a renderizar para mostrar los cambios que se han producido.

 

Debemos tener esto muy en cuenta porque podemos tener problemas con loops infinitos, como veremos más adelante.

Cambios de estado y render

Hooks

Funciones especiales que permiten “conectarte” a características de React.

 

Son una nueva incorporación que te permiten usar estado y otras características de React sin clases.

¿Qué son los hooks?

Con useState gestionamos el estado declarando "variables de estado"

import React, { useState } from 'react';

const Example = () => {
  // Declaración de una variable de estado que llamaremos "count"
  const [count, setCount] = useState(0);

useState

<p>You clicked {count} times</p>

Leyendo el estado

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

Actualizando el estado

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Resumen

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `Has pulsado ${count} veces`
  })

useEffect

Con useEffect añadimos "efectos" que se ejecutan cada vez que nuestro componente se renderiza. Es útil para crear eventos y hacer consultas a APIs.

¡Cuidado con loops infinitos!

useEffect se ejecuta cada vez que se renderiza el componente.

 

Si definimos un efecto que actualiza el estado de nuestro componente cada vez que se ejecuta podemos crear un loop infinito.

import React, { useState, useEffect } from 'react';
import Profile from "./Profile"

function Home() {
  const [user, setUser] = useState({});
  
  useEffect(() => {
    fetch(`https://myapi.com/api/user/${name}`)
      .then(res => res.json())
      .then(user => {
        setUser(user)
      })
  })
  
  return (
    <Profile username={user.name} image={user.image} />
  );
}

¡Cuidado con loops infinitos!

¡Cuidado con loops infinitos!

Para arreglar esto pasamos como segundo parámetro a useEffect una la lista de parámetros de los que depende el efecto.

 

Así conseguimos que cuando dichos parámetros no cambien no vuelva a ejecutar el efecto.

¡Cuidado con loops infinitos!

import React, { useState, useEffect } from 'react';
import Profile from "./Profile"

function Home() {
  const [user, setUser] = useState({});
  
  useEffect(() => {
    fetch(`https://myapi.com/api/user/${name}`)
      .then(res => res.json())
      .then(user => {
        setUser(user)
      })
  }, [user])
  
  return (
    <Profile username={user.name} image={user.image} />
  );
}

¡Cuidado con loops infinitos!

useEffect(() => {
  fetch(`https://myapi.com/api/user/${name}`)
    .then(res => res.json())
    .then(user => {
      setUser(user)
    })
}, [])

Si le pasamos un array vacío indicamos que no depende de ningún valor y que solo debe ejecutarse al montarse y desmontarse nuestro componente.

¿Montar? ¿Desmontar?

Decimos que un componente se ha montado cuando se añade al DOM por primera vez.

 

Por el contrario, cuando un componente se ha eliminado del DOM, decimos que se ha desmontado.

Tipos de componentes

También llamados presentational o stateless. Se encargan solo de pintar elementos en base a las props recibidas.

const Profile = props => {
  return (
    <article>
        <img src={props.image} />
    	<p>{props.username}!</p>
    </article>
  );
}

Dumb Components

Establecen la lógica y el funcionamiento de nuestra aplicación a través de la gestión del estado.

const Home = props => {
  const [user, setUser] = useState({
    name: "NodeGirl", 
    image: "nodegirl.jpg"
  });
  
  return (
    <Profile username={user.name} image={user.image} />
  );
}

Container components

  1. Separación de responsabilidades: puedes diferenciar la lógica de tu aplicación de la UI.
  2. Reutilización: te permite tener más componentes reutilizables.
  3. Hace que tu código sea más fácil de entender, testear y mantener.

Ventajas

Conoce más

Amplía información

📚 Documentación

          reactjs.org/docs/getting-started.html

🎣 Introducing Hooks

          reactjs.org/docs/hooks-intro.html

⚛️ Awesome React

          github.com/enaqx/awesome-react

⛩ React Patterns

          reactpatterns.com

Time to party!

github.com/node-girls/react-hooks-workshop

Made with Slides.com