Reaccionar componentes

Una breve introducción a los componentes de React

Un componente es una pieza aislada de interfaz. Por ejemplo, en una página de inicio de blog típica, puede encontrar el componente de barra lateral y el componente de lista de publicaciones de blog. A su vez, se componen de componentes en sí mismos, por lo que podría tener una lista de componentes de publicación de blog, cada uno para cada publicación de blog, y cada uno con sus propias propiedades peculiares.

A react component

React lo hace muy simple: todo es un componente.

Incluso las etiquetas HTML simples son componentes por sí solas y se agregan de forma predeterminada.

Las siguientes 2 líneas son equivalentes, hacen lo mismo. Uno conJSX, uno sin, inyectando<h1>Hello World!</h1>en un elemento con idapp.

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById(‘app’))

ReactDOM.render( React.createElement(‘h1’, null, ‘Hello World!’), document.getElementById(‘app’) )

Ver,React.createElementnos expuso una API para crear elh1componente. Cambiar el primer parámetro de ese método le permite crear diferentes etiquetas. El segundo parámetro es un objeto de props, en este caso no necesitamos ninguno, así que pasamosnull.

Así es como podemos usar React para trabajar con los componentes HTML integrados, pero los superará rápidamente. En lo que sobresale React es en permitirnos componer una interfaz de usuario componiendo componentes personalizados.

Componentes personalizados

Hay 2 formas de definir un componente en React.

Un componente de función:

const BlogPostExcerpt = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

Un componente de clase:

import React, { Component } from 'react'

class BlogPostExcerpt extends Component { render() { return ( <div> <h1>Title</h1> <p>Description</p> </div> ) } }

Hasta hace poco, los componentes de clase eran la única forma de definir un componente que tenía su propio estado y podía acceder a los métodos del ciclo de vida para que pudiera hacer cosas cuando el componente se procesó, actualizó o eliminó por primera vez.

React Hooks cambió esto, por lo que nuestros componentes de función ahora son mucho más poderosos que nunca y creo que veremos cada vez menos componentes de clase en el futuro, aunque seguirá siendo una forma perfectamente válida de crear componentes.

También hay una tercera sintaxis que usa laES5sintaxis, sin las clases:

import React from 'react'

React.createClass({ render() { return ( <div> <h1>Title</h1> <p>Description</p> </div> ) } })

Rara vez verá esto en la moderna,> ES6bases de código.

Descarga mi gratisReact Handbook


Más tutoriales de react: