Skip to content

Latest commit

 

History

History
755 lines (503 loc) · 42.4 KB

README.md

File metadata and controls

755 lines (503 loc) · 42.4 KB

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, ensúciate (está bien).

Otros idiomas

🇬🇧 English

🇨🇳 简体中文

Comienzo

Hay mucho que aprender, pero si se desglosa, hay algunos conceptos clave en los que enfocarse. JSX, elementos React, Componentes, Métodos de ciclo de vida, Propiedades y Estado. Los siguientes artículos te iniciarán en el camino hacia el aprendizaje de React.

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

La documentación oficial de React es un gran recurso

Información adicional para empezar

Contenido

Historia

Creando un Proyecto con React

¿Cómo creo un nuevo Proyecto con React?

Depende de lo que estás buscando. Con/sin configuración, server-rendering etc... aquí hay algunos a considerar. Obviamente, también puedes configurar React desde cero.

Ver también estos proyectos projects

¿Dónde puedo encontrar videos de como usar 'React Create App'?

React Create App + Express @sprjrx @ladyleet

¿Dónde 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 te 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?

Se reduce a pocos factores... uno de los principales es decidir lo que un componente debe hacer. Ver: Some Thoughts on Function Components in React from A. Sharif @sharifsbeat for some help deciding.

También:

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

¿Cómo puedo pasar Propiedades?

¿Cómo paso valores Booleanos?

¿Debo usar import, props o context en React?

Tipos de Propiedades

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

¿Qué son los Tipos de Propiedades?

¿Por qué son importantes los Tipos de Propiedades en React?

¿Cómo puedo validar los Tipos de 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?

Vengo de jQuery... ¿cómo puedo adaptarme mentalmente para trabajar con React / Estado?

I heard you can pass a function to setState when should do that? Escuché que se puede pasar una función a setState ¿cuándo debería hacer eso?

Children API

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 String 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?

Puedes utilizar CSS simple o cualquier preprocesador (Sass, Less etc ...) con React. React genera marcado HTML estándar, así técnicamente puedes seguir haciendo lo que has estado haciendo hasta ahora.

El uso de CSS para diseñar nuestro contenido de React es muy sencillo. Debido a que React termina generando las etiquetas HTML habituales, todos los trucos CSS que has aprendido a lo largo de los años para dar estilo al HTML siguen aplicándose. - kirupa

¿Puedo Utilizar Bootstrap con React?

Dando estilos a nivel de Componente

Existen varios enfoques para React que nos permiten dar estilos a nivel de componente. - survivejs.com

¿Qué repositorios debo revisar para dar estilo a nivel de componentes?

Nota: ver también - Styled components o Glamor?

Cual es la diferencia entre "estilos en línea" y “CSS-in-JS”?

Solo necesito dar unos estilos en línea simples... ¿Cuál es la manera más sencilla de utilizar para dar estilos en línea en React?

¿Qué recursos están disponibles para ver los pros y los contras de los estilos en línea y CSS en JS?

¿Qué hay sobre CSS Modules para dar estilos?

Hay demasiadas opciones sobre CSS en JS ¿Como puedo compararlas?

¿Cómo puedo diseñar un componente que sea muy reutilizable y personalizable?

Testing

Contribuyendo a React JS

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

Universal React

Profundizando en React

React Fiber

¿Qué, por qué y cómo?

¿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?

Ver también Videos de Conferencias

Accesibilidad (A11Y)

¿Qué pasa con la accesibilidad?


¿Cómo manejo la accesibilidad en React?

Charlas

Cursos

¿Dónde puedo tener cursos 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

Herramientas

¿Qué herramientas para desarrolladores hay disponibles para React?

Renderizado desde el servidor

¿Necesito renderizado desde el servidor (Server-Side Rendering)?