Instalación de React y React DOM

El DOM es un término que se utiliza para referirse a todos los elementos que cargan dentro de la página web cuando la previsualizan los usuarios y está renderizada.

En este caso, React se refiere a una biblioteca de código abierto de JavaScript que genera interfaces de usuario con distintos componentes y funciona desde el React DOM, que es una interfaz independiente donde se pueden aplicar la estructura y el contenido de una plataforma.

Pasos para instalar React y React DOM

A continuación conocerás los pasos para iniciar tu proyecto en React y crear distintos componentes de UI.

1. Crea la carpeta de trabajo

Vas a comenzar generando la carpeta de tu proyecto y puedes lograrlo de dos maneras, con el comando “MKdir” desde la consola al generarla en un entorno visual o puedes activar desde Visual Code la consola con los comandos (Ctrl+shift+ñ) para acceder al proyecto.

mkdir react-shop
cd react-shop

2. Asegura la inicialización del proyecto

Inicializa repo - git init de la siguiente manera: npm init y configura el proyecto.

git init
npm init
// colocamos datos relevantes al momento de inicializar con git
// name: react-shop
// description: react-eshop
// entry point: src/index.js
// author: nombre <correo>
// license: MIT 

3. Instala dependencias

En este punto es crucial que instales las dependencias del proyecto de React.

npm intall react react-dom
// luego, abrir el proyecto en vscode

4. Genera la estructura de carpetas del proyecto

Ahora crea la Carpeta SRC donde se creará el código, también crea la carpeta “public” donde se almacenarán los archivos públicos y luego dentro de public y scr crea index.js.

• Dentro de components crea el archivo App.jsx

mkdir public
cd public 
touch index.html
cd ..
mkdir src
cd src
touch index.js
mkdir components
cd components
touch App.jsx

5. Importa el react y crea los componentes básicos

// en index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render( <App />, document.getElementById('app')); 

// en App.jsx
import React from 'react';

const App = () => {
    return (
        <h1>Hola Mundo!</h1>
    );
}

export default App;

Contribución creada con los aportes de: Braulio Rivas y Blas Rodríguez.