Reaccionar componentes
Los componentes son como funciones que devuelven elementos HTML.
Reaccionar componentes
Los componentes son bits de código independientes y reutilizables. Tienen el mismo propósito que las funciones de JavaScript, pero funcionan de forma aislada y devuelven HTML.
Los componentes vienen en dos tipos, componentes de Clase y componentes de Función, en este tutorial nos concentraremos en los componentes de Función.
En las bases de código React más antiguas, puede encontrar componentes de clase que se utilizan principalmente. Ahora se sugiere usar componentes de función junto con ganchos, que se agregaron en React 16.8. Hay una sección opcional sobre los componentes de Clase para su referencia.
Cree su primer componente
Al crear un componente React, el nombre del componente DEBE comenzar con una letra mayúscula.
Componente de clase
Un componente de clase debe incluir la extends React.Componentdeclaración. Esta declaración crea una herencia para React.Component y le da a su componente acceso a las funciones de React.Component.
El componente también requiere un render()método, este método devuelve HTML.
Ejemplo
Cree un componente de Clase llamado Car
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Componente de función
Este es el mismo ejemplo que el anterior, pero creado usando un componente de función en su lugar.
Un componente de función también devuelve HTML y se comporta de la misma manera que un componente de clase, pero los componentes de función se pueden escribir usando mucho menos código, son más fáciles de entender y serán los preferidos en este tutorial.
Ejemplo
Cree un componente de función llamado Car
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
¡Obtener la certificación!
$95 INSCRÍBETE
Renderizar un componente
Ahora su aplicación React tiene un componente llamado Car, que devuelve un
<h2>elemento.
Para usar este componente en su aplicación, use una sintaxis similar a la de HTML normal:
<Car />
Ejemplo
Muestre el Carcomponente en el elemento "raíz":
ReactDOM.render(<Car />, document.getElementById('root'));
Accesorios
Los componentes se pueden pasar como props, que significa propiedades.
Los accesorios son como argumentos de función y los envía al componente como atributos.
Aprenderá más propsen el próximo capítulo.
Ejemplo
Use un atributo para pasar un color al componente Car y utilícelo en la función render():
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Componentes en Componentes
Podemos referirnos a componentes dentro de otros componentes:
Ejemplo
Utilice el componente Coche dentro del componente Garaje:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Componentes en archivos
React tiene que ver con la reutilización del código, y se recomienda dividir sus componentes en archivos separados.
Para hacer eso, cree un nuevo archivo con una .js
extensión de archivo y coloque el código dentro:
Tenga en cuenta que el nombre del archivo debe comenzar con un carácter en mayúscula.
Ejemplo
Este es el nuevo archivo, lo llamamos "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Para poder utilizar el componente Car, debe importar el archivo en su aplicación.
Ejemplo
Ahora importamos el archivo "Car.js" en la aplicación, y podemos usar el
Car
componente como si se hubiera creado aquí.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));