Hoja de trucos Completa de React JS

React es una biblioteca de JavaScript para crear interfaces de usuario. Esta chuleta está dirigida a las versiones de React 15 y 16.

Componentes

import React from 'react'
import ReactDOM from 'react-dom'
class Hello extends React.Component {
  render () {
    return <div className='message-box'>
      Hello {this.props.name}
    </div>
  }
}
const el = document.body
ReactDOM.render(<Hello name='John' />, el)

Utiliza React.js jsfiddle para comenzar a piratear. (o el jsbin no oficial )

Importar múltiples exportaciones

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
class Hello extends Component {
  ...
}

Propiedades

<Video fullscreen={true} autoplay={false} />
render () {
  this.props.fullscreen
  const { fullscreen, autoplay } = this.props
  ···
}

Usa this.props para acceder a las propiedades pasadas al componente.

Ver: Propiedades

Estados

constructor(props) {
  super(props)
  this.state = { username: undefined }
}
this.setState({ username: 'rstacruz' })
render () {
  this.state.username
  const { username } = this.state
  ···
}

Utiliza estados ( this.state) para administrar datos dinámicos.

Con Babel puede usar campos de clase de propuesta y deshacerse del constructor

class Hello extends Component {
  state = { username: undefined };
  ...
}

Ver: Estados


img

Obtenga el libro: Aplicaciones React optimizadas para el rendimiento


Anidamiento

class Info extends Component {
  render () {
    const { avatar, username } = this.props

    return <div>
      <UserAvatar src={avatar} />
      <UserProfile username={username} />
    </div>
  }
}

A partir de React v16.2.0, los fragmentos se pueden usar para devolver varios hijos sin agregar nodos de envoltura adicionales al DOM.

import React, {
  Component,
  Fragment
} from 'react'

class Info extends Component {
  render () {
    const { avatar, username } = this.props

    return (
      <Fragment>
        <UserAvatar src={avatar} />
        <UserProfile username={username} />
      </Fragment>
    )
  }
}

Anidar componentes para separar preocupaciones.

Ver: Composición de componentes

Hijos

<AlertBox>
  <h1>You have pending notifications</h1>
</AlertBox>
class AlertBox extends Component {
  render () {
    return <div className='alert-box'>
      {this.props.children}
    </div>
  }
}

Los hijos se pasan como propiedades children.

Por defecto

Configuración de accesorios predeterminados

Hello.defaultProps = {
  color: 'blue'
}

Ver: defaultProps

Configuración del estado predeterminado

class Hello extends Component {
  constructor (props) {
    super(props)
    this.state = { visible: true }
  }
}

Establezca el estado predeterminado en constructor().

Y sin constructor usando Babel con campos de clase de propuesta .

class Hello extends Component {
  state = { visible: true }
}

Ver: Configuración del estado predeterminado

Otros componentes

Componentes funcionales

function MyComponent ({ name }) {
  return <div className='message-box'>
    Hello {name}
  </div>
}

Los componentes funcionales no tienen estado. Además, propsse pasan como el primer parámetro de una función.

Ver: Componentes de funciones y clases

Componentes puros

import React, {PureComponent} from 'react'

class MessageBox extends PureComponent {
  ···
}

Versión de rendimiento optimizado de React.Component. No se vuelve a entregar si los accesorios / estado no han cambiado.

Ver: Componentes puros

API de componentes

this.forceUpdate()
this.setState({ ... })
this.setState(state => { ... })
this.state
this.props

Estos métodos y propiedades están disponibles para Componentinstancias.

Ver: API de componentes

Ciclo vital

Montaje

Método Descripción
constructor (accesorios) Antes de renderizar #
componentWillMount() No uses este #
render() Render #
componentDidMount() Después de renderizar (DOM disponible) #
componentWillUnmount() Antes de la eliminación de DOM #
componentDidCatch() Detectar errores (16+) #

Establecer el estado inicial constructor().
Agregue controladores de eventos DOM, temporizadores (etc.) componentDidMount()y luego elimínelos componentWillUnmount().

Actualizando

Método Descripción
componentDidUpdate (prevProps, prevState, instantánea) Úselo setState()aquí, pero recuerde comparar los accesorios
shouldComponentUpdate (newProps, newState) Omite render()si devuelve falso
render() Hacer
componentDidUpdate (prevProps, prevState) Opere en el DOM aquí

Se llama cuando los padres cambian de propiedad y .setState(). Estos no se requieren para renderizados iniciales.

Ver: especificaciones de los componentes

Ganchos (nuevo)

Estado gancho

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

Los Hooks son una nueva adición en React 16.8.

Ver: Ganchos de un vistazo

Declarar múltiples variables de estado

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Gancho de efecto

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);

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

Si está familiarizado con los métodos del ciclo de vida de clase Reaccionar, se puede pensar en useEffectgancho como componentDidMount, componentDidUpdatey componentWillUnmountcombinado.

De forma predeterminada, React ejecuta los efectos después de cada renderizado, incluido el primer renderizado.

Construyendo tus propios ganchos

Definir FriendStatus

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  }, [props.friend.id]);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Los efectos también pueden especificar opcionalmente cómo “limpiar” después de ellos devolviendo una función.

Usar FriendStatus

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Ver: Construyendo sus propios ganchos

Referencia de la API de Hooks

Ver también: Preguntas frecuentes sobre Hooks

Ganchos básicos

Gancho Descripción
useState(estado inicial)
useEffect(() => {…})
useContext(MyContext) valor devuelto por React.createContext

Detalles completos: ganchos básicos

Ganchos adicionales

Gancho Descripción
useReducer(reductor, initialArg, init)
useCallback(() => {…})
useMemo(() => {…})
useRef(valor inicial)
useImperativeHandle(ref, () => {…})
useLayoutEffect idéntico a useEffect, pero se dispara sincrónicamente después de todas las mutaciones DOM
useDebugValue(valor) mostrar una etiqueta para ganchos personalizados en React DevTools

Detalles completos: Ganchos adicionales

Nodos DOM

Referencias

class MyComponent extends Component {
  render () {
    return <div>
      <input ref={el => this.input = el} />
    </div>
  }

  componentDidMount () {
    this.input.focus()
  }
}

Permite el acceso a los nodos DOM.

Ver: Refs y DOM

Eventos DOM

class MyComponent extends Component {
  render () {
    <input type="text"
        value={this.state.value}
        onChange={event => this.onChange(event)} />
  }

  onChange (event) {
    this.setState({ value: event.target.value })
  }
}

Pasar funciones a atributos como onChange.

Ver: Eventos

Otras características

Transferencia de accesorios

<VideoPlayer src="video.mp4" />
class VideoPlayer extends Component {
  render () {
    return <VideoEmbed {...this.props} />
  }
}

Se propaga src="..."hasta el subcomponente.

Ver Transferencia de accesorios

API de nivel superior

React.createClass({ ... })
React.isValidElement(c)
ReactDOM.render(<Component />, domnode, [callback])
ReactDOM.unmountComponentAtNode(domnode)
ReactDOMServer.renderToString(<Component />)
ReactDOMServer.renderToStaticMarkup(<Component />)

Hay más, pero estos son los más comunes.

Ver: Reaccionar API de nivel superior

Patrones JSX

Estilo taquigráfico

const style = { height: 10 }
return <div style={style}></div>
return <div style={{ margin: 0, padding: 0 }}></div>

Ver: estilos en línea

HTML interno

function markdownify() { return "<p>...</p>"; }
<div dangerouslySetInnerHTML={{__html: markdownify()}} />

Consulte: innerHTML configurado peligrosamente

Liza

class TodoList extends Component {
  render () {
    const { items } = this.props

    return <ul>
      {items.map(item =>
        <TodoItem item={item} key={item.key} />)}
    </ul>
  }
}

Siempre proporcione una keypropiedad.

Condicionales

<Fragment>
  {showMyComponent
    ? <MyComponent />
    : <OtherComponent />}
</Fragment>

Evaluación de cortocircuito

<Fragment>
  {showPopup && <Popup />}
  ...
</Fragment>

Nuevas características

Devolviendo múltiples elementos

Puede devolver varios elementos como matrices o fragmentos.

Matrices

render () {
  // Don't forget the keys!
  return [
    <li key="A">First item</li>,
    <li key="B">Second item</li>
  ]
}

Fragmentos

render () {
  // Fragments don't require keys!
  return (
    <Fragment>
      <li>First item</li>
      <li>Second item</li>
    </Fragment>
  )
}

Ver: Fragmentos y cadenas

Devolver cadenas

render() {
  return 'Look ma, no spans!';
}

Puede devolver solo una cadena.

Ver: Fragmentos y cadenas

Errores

class MyComponent extends Component {
  ···
  componentDidCatch (error, info) {
    this.setState({ error })
  }
}

Detectar errores a través de componentDidCatch. (Reaccionar 16+)

Ver: Manejo de errores en React 16

Portales

render () {
  return React.createPortal(
    this.props.children,
    document.getElementById('menu')
  )
}

Esto se procesa this.props.childrenen cualquier ubicación del DOM.

Ver: Portales

Hidratación

const el = document.getElementById('app')
ReactDOM.hydrate(<App />, el)

Úselo en ReactDOM.hydratelugar de usar ReactDOM.rendersi está renderizando sobre la salida de ReactDOMServer .

Ver: Hidratar

Validación de propiedad

PropTypes

import PropTypes from 'prop-types'

Ver: Verificación de tipo con PropTypes

Llave Descripción
any Cualquier cosa

Básico

Llave Descripción
string
number
func Función
bool Verdadero o falso

Enum

Llave Descripción
oneOf(alguna) Tipos de enumeración
oneOfType(tipo matriz) Unión

Formación

Llave Descripción
array
arrayOf(…)

Objeto

Llave Descripción
object
objectOf(…) Objeto con valores de cierto tipo
instanceOf(…) Instancia de una clase
shape(…)

Elementos

Llave Descripción
element Reaccionar elemento
node Nodo DOM

Requerido

Llave Descripción
(···).isRequired Requerido

Tipos basicos

MyComponent.propTypes = {
  email:      PropTypes.string,
  seats:      PropTypes.number,
  callback:   PropTypes.func,
  isClosed:   PropTypes.bool,
  any:        PropTypes.any
}

Tipos requeridos

MyCo.propTypes = {
  name:  PropTypes.string.isRequired
}

Elementos

MyCo.propTypes = {
  // React element
  element: PropTypes.element,

  // num, string, element, or an array of those
  node: PropTypes.node
}

Enumerables (oneOf)

MyCo.propTypes = {
  direction: PropTypes.oneOf([
    'left', 'right'
  ])
}

Matrices y objetos

MyCo.propTypes = {
  list: PropTypes.array,
  ages: PropTypes.arrayOf(PropTypes.number),
  user: PropTypes.object,
  user: PropTypes.objectOf(PropTypes.number),
  message: PropTypes.instanceOf(Message)
}
MyCo.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age:  PropTypes.number
  })
}

Uso .array[Of], .object[Of], .instanceOf, .shape.

Validación personalizada

MyCo.propTypes = {
  customProp: (props, key, componentName) => {
    if (!/matchme/.test(props[key])) {
      return new Error('Validation failed!')
    }
  }
}
Artículos Relacionados
¿Por qué deberías aprender Vue?

En el mercado de los frameworks de Javascript se pueden identificar tres claros líderes obvios entre los frameworks de desarrollo de aplicaciones web: Con Angular, React y Vue a la cabeza de todos los frameworks JS. Si la necesidad de estudiar los dos primeros ¡SEGUIR LEYENDO!

¿Cómo usar la vista de registro de DevTools con Flutter?

A continuación sigue la guía de uso sobre las herramientas de desarrollo para Flutter, en este caso vamos a conocer la vista de registro. ¿Qué es la vista de registro en DevTools? La vista de registro muestra eventos del tiempo de ejecución de Dart, ¡SEGUIR LEYENDO!

React 18 disponible desde npm y novedades

Instalación de React 18 desde npm: npm install react react-dom Instalación de React 18 desde yarn: yarn add react react-dom Actualización de las APIS Leer más sobre las Novedades de React 18

Curso de Programación Apps para Dispositivos Móviles con Flutter

Con este sitio web vas a poder comenzar a iniciarte tanto en Flutter como en la creación de tu primera aplicación con Flutter y Dart. ?‍? ENTRAR AL CURSO DE FLUTTER Estos apuntes han sido creados por el profesor de formación profesional Ángel Fernandez ¡SEGUIR LEYENDO!

Angular e Ionic alimentan las tiendas de aplicaciones y la web

¿Sabías que Ionic y Angular alimentan aproximadamente el 10% de las aplicaciones en iOS y casi el 20% de las aplicaciones en Android? Sí, Angular impulsa una gran cantidad de aplicaciones en las tiendas de aplicaciones. ¿Por qué es útil saber esto? Bueno, si ¡SEGUIR LEYENDO!

¿Cómo usar la vista de memoria de DevTools con Flutter?

A continuación sigue la guía de uso sobre las herramientas de desarrollo para Flutter, en este caso vamos a conocer la vista de memoria. ¿Qué es la vista de memoria de DevTools? Los objetos Dart asignados creados usando un constructor de clase (por ejemplo, ¡SEGUIR LEYENDO!

Flutter 3.3

Flutter sigue creciendo, tanto en su uso como en tamaño del ecosistema. Todos los días, se publican más de 1000 nuevas aplicaciones móviles que usan Flutter en las tiendas de Apple y Google Play, junto con un mayor uso en la web y el ¡SEGUIR LEYENDO!