Introducción al marco React

Introducción

React es una biblioteca JavaScript de código abierto para crear interfaces de usuario, a menudo para aplicaciones web de una sola página. Es mantenido por Facebook y una comunidad de desarrolladores individuales y empresas.

Paso 1: Instalación

En primer lugar, debe tener Node.js y npm (administrador de paquetes de nodos) instalados en su computadora. Puede descargarlos desde el sitio oficial de Node.js.

Una vez instalado, puede crear un nuevo proyecto React con el comando:

npx create-react-app mio-progetto

Donde mio-progetto es el nombre de su proyecto.

Paso 2: Estructura del proyecto

Navegue hasta el directorio de su proyecto con cd mio-progetto y abra el código en un editor de su elección. Verá una estructura de carpetas como esta:

• node_modules/
• público/
• índice.html
• origen/
• Aplicación.js
• índice.js
• paquete.json

El código de React normalmente va en la carpeta src/.

Paso 3: Crear un componente

En React, todo es un componente. Un componente es básicamente una parte de la interfaz de usuario. Puede crear un nuevo componente creando un nuevo archivo en la carpeta src/. Por ejemplo, src/MioComponente.js.

En este archivo, es posible que tenga algo como esto:

import React from 'react';

 class MioComponente extends React.Component {
 render() {
 return <h1>Ciao, mondo!</h1>;
 }
 }

 export default MioComponente;

Luego, puede usar este componente en otros componentes al importarlo.

Paso 4: renderizar el componente

Para representar su propio componente, deberá agregarlo al archivo src/App.js.

import React from 'react';
 import MioComponente from './MioComponente';

 class App extends React.Component {
 render() {
 return (
 <div className="App">
 <MioComponente />
 </div>
 );
 }
 }

 export default App;

Paso 5: Inicie la aplicación

Finalmente, para iniciar la aplicación, use el comando npm start en la raíz de su proyecto. Debería ver el inicio de la aplicación y su componente representado en el navegador.

Conclusión

React es una poderosa biblioteca para crear interfaces de usuario interactivas con facilidad. Este tutorial es solo la punta del iceberg de lo que es posible con React. ¡Feliz programación!