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


imgObtenga 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étodoDescripció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étodoDescripció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

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

Detalles completos: ganchos básicos

Ganchos adicionales

GanchoDescripción
useReducer(reductor, initialArg, init)
useCallback(() => {…})
useMemo(() => {…})
useRef(valor inicial)
useImperativeHandle(ref, () => {…})
useLayoutEffectidé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

LlaveDescripción
anyCualquier cosa

Básico

LlaveDescripción
string
number
funcFunción
boolVerdadero o falso

Enum

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

Formación

LlaveDescripción
array
arrayOf(…)

Objeto

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

Elementos

LlaveDescripción
elementReaccionar elemento
nodeNodo DOM

Requerido

LlaveDescripción
(···).isRequiredRequerido

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!')
    }
  }
}

Relacionado

Arquitectura de un Proyecto de React, por Ezran Bayantemur

En el siguiente artículo vas a poder ver como un desarrollor soluciona los posibles problemas que se afrontan a la hora de implementar una arquitectura con el framework de React. Si algún código pudiese no funcionar o estar dudoso, no dudes en consultar el artículo original ¡SEGUIR LEYENDO!

¿Por qué deberías aprender React?

React es excelente para hacer demostraciones rápidas que se pueden transformar en aplicaciones enormes, por lo que es enormemente escalable , flexible y extenso. React es muy fácil siempre y cuando ya conozcas JavaScript bastante bien, si es así, vas a poder aprender React en cuestión ¡SEGUIR LEYENDO!

10 Mejores Frameworks de JavaScript para un Desarrollador Web

Javascript es un es un lenguaje de múltiples paradigmas que admite estilos de programación funcionales, imperativos y basados en eventos (incluidos los basados en prototipos y orientados a objetos). JavaScript se usó inicialmente solo para el lado del cliente, sin embargo, en los días que corren ¡SEGUIR LEYENDO!

Agrippa: Nueva CLI para desarrolladores de React

Agrippa es una CLI humilde cuyo propósito es ayudar a los desarrolladores de React a crear componentes sin el modelo estándar. Vas a poder generar fácilmente plantillas para componentes de React de diferentes composiciones (soluciones de estilo, validaciones de accesorios, etc.) y en diferentes entornos. Características ¡SEGUIR LEYENDO!

10 Mejores cursos de React (framework Javascript) en Coursera

Desarrollo web completo con React de la Universidad de Ciencia y Tecnología de Hong Kong Desarrollo web front-end con React de la Universidad de Ciencia y Tecnología de Hong Kong Desarrollador full stack en la nube de IBM Crea tu primer sitio web React de Coursera ¡SEGUIR LEYENDO!