/react-faq

Colección de enlaces que te ayudarán a responder tus preguntas sobre React.js

React - Preguntas Frecuentes

Esta guía pretende reunir contenido de calidad sobre los conceptos básicos de React en un solo sitio para tener una referencia rápida.

Recuerda que todos estamos aprendiendo. Lea, haz pruebas, ensucie (está bien).

Otros idiomas

🇬🇧 English

Contenido

#Comienzo

No sé nada de React, ¿que debería ver / leer antes de empezar?

#Historia

#Creando un Proyecto con React

¿Como creo un nuevo Proyecto con React?

¿Donde puedo encontrar videos de como usar 'React Create App'?

React Create App + Express @sprjrx @ladyleet

¿Donde puedo probar React Online?

#¿Porque usar React?

  • Componentes Componibles
  • Fácil uso en proyectos existentes
  • Declarativo
  • Funcional / Inmutable

Es rápido?

¿Entonces que hace tan bueno a React?

#JSX ¿Qué es JSX?

JSX es un preprocesador que añade sintaxis XML a JavaScript. Puedes perfectamente usar React sin JSX, pero JSX hace React mucho más elegante. - http://buildwithreact.com

¿Qué hace React realmente por mí?

Este es el tipo de cosas que JSX evita que tengas que administrar Jonny Buchanan ‏@jbscript

#El 'Virtual DOM'

El DOM virtual proporciona una implementación ligera del DOM y del sistema de eventos. En lugar de tratar con el navegador, manipula una versión en memoria del DOM.

¿Qué es el Virtual DOM?

¿Todo sobre el Virtual DOM es por la velocidad?

No

Ver :

https://twitter.com/dan_abramov/status/790326092582252544 https://twitter.com/acdlite/status/779693791607336960

I wonder if we can reclaim the VDOM term to mean "Value DOM", as in Value Type, instead of "Virtual DOM"...? More accurate. @sebmarkbage

> It doesn't improve perf over hand written DOM code but it's hard to write on scale. React scales well. **@dan_abramov**
> React ultimately has to call browser APIs at some point, it can't possibly be faster than writing the same exact calls by hand **@dan_abramov**
>React will not do anything that you cannot. By definition everything it does can be reproduced (and some people have with other libraries/frameworks that follow similar conventions). The point is not that React does something that you can't, but rather that by introducing React to your application you are relieved of having to worry about manually handling your DOM, manually determining how to update it efficiently, minimizing traversals, etc. - [Sean Grogg](https://www.quora.com/Is-ReactJS-faster-than-direct-DOM-manipulation-with-JavaScript-or-jQuery)

Key Takeaway:

React keeps your product reasonably fast without you having to think about it all the time, or to jump through the hoops @dan_abramov

#Elementos React

Los elementos son los bloques de construcción más pequeños en las aplicaciones React. Los Elementos son los componentes que están "hechos de ..." — Documentación de React

#Componentes

Los Componentes te permiten dividir la interfaz en piezas independientes y reutilizables, y pensar en cada pieza de forma aislada. Conceptualmente, los componentes son como funciones de JavaScript. - Documentación de React

¿Cuáles son las mejores prácticas al trabajar con componentes?

  • Keep it (F)ocused. (Mantenlo enFocado)
  • Keep it (I)ndependent. (Mantenlo Independiente)
  • Keep it (R)eusable. (Mantenlo Reutilizable)
  • Keep it (S)mall. (Mantenlo Pequeño)
  • Keep it (T)estable. (Mantenlo Testeable)
  • en definitiva, FIRST.

— Addy Osmani https://addyosmani.com/first

Ver : https://twitter.com/mxstbr/status/790084862954864640 Max Stoiber @mxstbr

#Métodos del Ciclo de Vida

Los componentes tienen varios "métodos de ciclo de vida" que le permiten anular / ejecutar código en momentos concretos.

¿Qué son los métodos del ciclo de vida?

#Tipos de Componentes

Hay dos tipos principales de componentes: funcionales y de clase

// Componente Funcional
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Componente de Clase

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

Los componentes se pueden utilizar (compuestos) de muchas maneras, ver los siguientes enlaces para patrones e ideas para la creación de componentes.

¿Cómo decido qué tipo de Componente utilizar?

Funciones sin Estado <Código />

Presentational and Container Components <Código />

Higher-Order Components <Código />

Función como Componente hijo <Código />

¿Qué tipos de Componentes hay?

#Buscando Componentes

¿Dónde hay buenos sitios para encontrar componentes?

#Propiedades

¿Qué son las Propiedades?

props (abreviatura de propiedades) son la configuración de un Componente, sus opciones si es posible. Son recibidos desde arriba y son inmutables en lo que respecta al Componente que los recibe. - react-guide

Ver : props vs state

¿Como puedo pasar Propiedades?

¿Como paso valores Booleanos?

¿Debo usar import, props o context en React?

#Prototipos

Los Prototipos (PropTypes) son esencialmente un diccionario en el que se definen qué propiedades necesita su componente y de que tipo(s) deben ser. - Niels Gerritsen

¿Qué son los Prototipos?

¿Por qué son importantes los Prototipos en React?

¿Cómo puedo validar Propiedades?

#Estado

En un sentido, "estado" significa la representación visual actual de la aplicación en la pantalla... En el sentido React, el "estado" es un objeto que representa las partes de la aplicación que pueden cambiar. Cada componente puede mantener su propio estado, que vive en un objeto llamado this.state. - Dave Ceddia

¿Qué es el Estado en React?

¿Cómo manejo el estado?

¿Cómo puedo desacoplar el estado y la interfaz de usuario?

#Binding

El método bind de JavaScript tiene varios usos. Normalmente, se utiliza para preservar el contexto de ejecución de una función que se ejecuta en otro contexto.

¿Qué debe usar para conectar métodos en Clases React?

¿Qué es eso del "Binding"?

#Eventos

¿Cómo funciona el sistema de eventos en React?

#Renderizado

¿Qué debe ir en la función de render?

#Claves

React utiliza las Claves (keys) para ayudar con la reconciliación (es decir, cómo calcula la diferencia del DOM para cada procesamiento).

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

¿Por qué no puedo poner la key en las propiedades (o definir el valor predeterminado en otro lugar)?

¿Qué debo utilizar para una key?

¿Cuáles son algunos ejemplos en los que debería cambiar manualmente una key?

#Referencias

El atributo ref permite guardar una referencia a un elemento React específico o a un componente devuelto por la función render(). Esto puede ser valioso cuando se necesita una referencia, desde dentro de un componente, a algún elemento o componente contenido en la función render(). - reactenlightenment.com

¿Qué son las Referencias (refs) y porqué las Referencias de tipo Sring son malas?

#Contexto ⚠️ El contexto es una característica avanzada y experimental. Es probable que la API cambie en futuras versiones. Los rumores de su existencia son verdaderos pero ten cuidado!

#Formularios

¿Cómo puedo crear formularios con React?

¿Cómo puedo validar la entrada de formularios?

#Controlled Components

What is a controlled component?

Via Loren Stewart @lorenstewart111 React.js Forms: Controlled Components

A controlled component has two aspects:

  1. Controlled components have functions to govern the data going into them on every onChange event, rather than grabbing the data only once, e.g. when a user clicks a submit button. This 'governed' data is then saved to state (in this case, the parent/container component's state).

  2. Data displayed by a controlled component is received through props passed down from it's parent/container component.

This is a one-way loop – from (1) child component input (2) to parent component state and (3) back down to the child component via props – is what is meant by unidirectional data flow in React.js application architecture.

#Ajax en React

¿Cuál es la mejor práctica para obtener datos de servidor en los componentes React?

Depende! Ver: React AJAX Best Practices Andrew H Farmer @ahfarmer

#Patrones

#Gotchas

¿Qué son los Gotchas en React?

#PATENTES

¿Qué es todo eso que escucho sobre la cláusula de PATENTES de Facebook?

#Mixins

¿Por qué los Mixins se consideran perjudiciales?

#Internacionalización

¿Cómo debo manejar la internacionalización?

¿Qué repositorios existen para la internacionalización?

#Librerías de terceros

¿Cómo utilizo Librerías de terceros?

#Rendimiento

¿Cómo puedo hacer que mi aplicación sea más rápida?

#Animaciones

¿Cómo animo cosas en React?

¿Hay alguna API declarativa para animaciones?

¿Cómo puedo animar las transiciones de página?

¿Cuáles son algunos de los mejores repositorios sobre animación en React?

#SVG y React

¿Cómo trabajo con SVG en React?

#Guías de estilo para React

¿Dónde puedo encontrar buenas guías de estilo para React?

#Redux y Mobx

¿Qué es (Redux/Mobx)?

¿Necesito usar (Redux/Mobx)?

¿Cómo escalar aplicaciones React-Redux?

#Añadir React a una Aplicación existente

¿Cómo empiezo a integrar React en una aplicación existente?

#CSS y React

¿Qué pasa con los estilos en React?

¿Hay alguna herramienta disponible para convertir 'CSS' a 'CSS en JS'?

#Testeo

#Vídeos de Conferencias

#Contribuyendo a React JS

¿Dónde puedo aprender sobre como contribuir a React JS?

#Universal React

#Pronfundizando en React

#React Fiber

¿Qué es React Fiber?

¿Está listo React Fiber?

¿Cómo puedo contribuir a Fiber?

#Cursos en Video

¿Hay buenos recursos de video/cursos para aprender React?

#Accesibilidad (A11Y)

¿Qué pasa con la accesibilidad?

¿Cómo manejo la accesibilidad en React?

#Charlas

#Entrenamiento

¿Dónde puedo obtener entrenamiento sobre React?

Micheal Jackson @mjackson & Ryan Florence @ryanflorence

*Brian Holt* @holtbt

#Libros

¿Dónde puedo encontrar buenos libros sobre React?

#Listas de Correo

¿Dónde puedo encontrar listas de correo sobre React?

#Preguntas de entrevistas