React JS es una forma muy popular de crear aplicaciones web. Esta librería desarrollada por Facebook es una de las más populares hoy en día y una de las más solicitadas por las empresas en todo el mundo. Aprender React JS tiene sus propios desafíos, pero para comenzar debes aprender a crear tu primer proyecto, es lo que aprenderemos en este artículo. También te dejo un vídeo donde lo explico de forma visual.
Para comenzar debemos saber que existen algunos requisitos previos. Una aplicación en React Js está construida completamente en Javascript, por lo que si queremos correr un servidor en nuestro computador necesitaremos instalar Node JS. Además es muy recomendable tener instalado Git.
Requisitos previos para usar React JS
Node JS: Está es la herramienta que ha venido a cambiar como funciona el mundo del desarrollo web. Desde que se puede usar Javascript fuera del navegador las tecnologías de desarrollo web han evolucionado mucho. Es importante tener instalado Node JS en tu computador para poder ejecutar los comandos de isntalación y ejecución de React JS.
Git: Un sistema de control de versiones que te permite controlar y llevar un historial de los cambios de tu proyecto. Tener instalado Git te ayudará a ser mejor programador en general, los grandes equipos de desarrollo de software lo utilizan y tu sin duda deberías.
Ahora que tienes los requisitos instalados, ya podemos comenzar a crear nuestras aplicaciones en React JS. Como el título lo dice, aprenderemos 3 formas de hacerlo.
Podría interesarte: ¿Qué es React JS y para qué se usa?
1. Agregar manualmente React JS a un proyecto estático de HTML
Este es un método que no suele ser muy común. Principalmente a que las otras opciones ofrecen configuraciones que son muy tediosas de hacer de forma manual. Además de estar optimizadas. Sin embargo, es bueno saber como funciona React JS en su versión más pura.
Para agregar React JS a un archivo HTML deben hacerse la importaciones desde un CDN. Deben importarse varios archivos, react, react-dom y también babel.
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
Una vez que estos archivos sean importados ya podremos usar código React JS en nuestro archivos dentro de la etiquita script. Aquí el ejemplo del archivo completo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Manual</title>
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hola Mundo</h1>
}
}
const root = document.getElementById('root');
ReactDOM.render(<App />, root);
</script>
</body>
</html>
El componente renderizado únicamente muestra un texto que dice «Hola Mundo». Es un ejemplo con clase, pero perfectamente podría usarse un componente funcional.
2. Usando create-react-app
Otra forma de crear una aplicación en React JS es usando el comando create-react-app con npm o yarn. Cuando instalamos Node JS en nuestro computador se instala además NPM (manejador de paquetes de Node). Abriendo una consola y navegando hasta la carpeta donde deseamos crear el proyecto y ejecutando el siguiente comando:
npx create-react-app nombreProyecto
Este comando va a comenzar un proceso donde se crearán los archivos necesarios para comenzar a trabajar en el proyecto. Además de instalarás dependencias necesarias para correr un proyecto de Node JS. Este proceso llevará un tiempo, pero después de eso ya se podrá ejecutar el comando para correr el proyecto.
cd nombreProyecto npm start
Con el primer comando navega a la carpeta del proyecto. Ya estando ubicados en la carpeta del proyecto ya podemos usar el segundo comando para correr el servidor y poder ver la aplicación en el navegador.
Esta es la forma más común de crear aplicaciones, la forma que React JS recomendó desde hace años, aunque en los últimos años se han presentados mejores opciones.
3. Usando Vite.js
Esta es mi forma favorita de trabajar con React JS. La forma de crear aplicaciones con Vite.js es similar a la usada en el punto anterior. Abrimos una terminal y navegamos a la carpeta donde queremos crear nuestro proyecto.
npm create vite@latest
Cuando se ejecuta este comando, en consola veremos algunas opciones. Solo debemos elegir lo que queremos, primero escribimos el nombre de nuestra aplicación. Luego elegimos el tipo de proyecto que queremos crear, usando las flechas de navegación del teclado elegimos React y luego Javascript.
A diferencia de create-react-app este comando no instala las dependencias que se necesitan para el proyecto de Node JS. Así que debemos navegar a la carpeta e instalarlos para luego correr el proyecto usando los siguientes comandos.
cd nombreProyecto npm install npm run dev
Ejecutando esos comandos ya podremos ver nuestro proyecto corriendo en nuestro navegador. Si realizas el proceso te darás cuenta que está 3 opción es la más rápida de todas. Y no solo me refiero al momento de crearla, una vez que se está trabajando en el proyecto, la carga y recarga es mucho más rápida.
Esto sería suficiente para poder crear nuestra primera aplicación con React JS. Puedes dejar en los comentarios cual crees que es la mejor forma de hacerlo, recomiendo que pruebes las 3 formas y elijas tu favorita. Deja en los comentarios si tienes algún problema y con gusto te ayudaré a resolverlo.