Continuamos con el curso de Javascript, y en esta ocasión vamos a empezar con React.

¿Qué es react?

React es una librería de código abierto y la más popular en el mundo hasta la fecha. Aunque también existen otras muy buenas como el caso de vue.js o Angular.

React nos permite crear aplicaciones mediante algo llamado componentes, que básicamente consiste en funciones (o clases) que nos devuelven código HTML dinámico; encapsulado, flexible y reutilizable.

Estos componentes son independientes y a su vez pueden interactuar con otros.

NPM

Para usar react debemos utilizar el comando npm, muy útil para instalar otras tecnologías como por node.js.

Para eso vamos a ir a su página y a descargarlo:

Instalar Node.js

Cuando finalice el proceso vamos a probar en una terminal si todo salió bien. En mi caso que tengo windows podemos hacerlo mediante símbolo de sistemas.

Una vez dentro vamos a escribir lo siguiente:

npm -info

Si nos devuelve un resultado con la lista de comandos, vamos bien. Si en cambio nos dice que npm no es reconocido o un mensaje por el estilo, tendremos que verificar que hayamos instalado node.js.

A continuación vamos a instalar nuestro primer proyecto.

Instalar proyecto React

Vamos a crear un directorio en alguna parte de nuestro sistema, por ejemplo el que usamos para los proyecto del curso de javascript.

Yo en en mi caso voy a crearlo dentro de C:\javascript

Ingresamos con cd:

cd C:\javascript

Podemos crear nuestro primer proyecto con next.js como hacen en la página oficial de react:

Instalación de react

En mi caso, yo lo haré mediante vite:

npm create vite@latest mi-primer-proyecto-react

(mi-primer-proyecto-react puede cambiarse por el nombre que prefieras)

Seguramente nos mostrará una lista de tecnologías a instalar:

• Vanilla
• Vue
• React
• Preact
• Lit
• Svelte
• Solid
• Qwik
• Others

Obviamente elegimos React.

También nos va a indicar si preferimos instalar Javascript o TypeScript:

• TypeScript
• TypeScript + SWC
• JavaScript
• JavaScript + SWC
• Remix

En este último caso seleccionamos JavaScript + SWC

Una vez que finalice nos sugiere que ingresemos dentro del proyecto, instalemos las dependencias e iniciemos el servidor.

Vamos a hacerle caso:

cd mi-primer-proyecto-react

npm install

npm run dev

(Este último comando vamos a tener que ejecutarlo de ahora en adelante cada vez que queramos iniciar la aplicación)

Una vez finalizado el proceso nos debería devolver un mensaje como:

Local:   http://127.0.0.1:5173/

Vamos a ingresar a esa URL: http://127.0.0.1:5173/

Deberíamos ver un mensaje como:

¡Nada puede malir sal!