Cómo instalar reactjs en 2024 Paso a paso con Vite

Actualizado : 2023-11-06

Aprende a instalar ReactJS en 2024 con este tutorial paso a paso. Empieza a desarrollar tus proyectos con la tecnología más actualizada.

Nota Importante

Los pasos a seguir en este tutorial sirven para instalar e iniciar un proyecto en react tanto en windows, mac como en linux.

Verifica que estén instalados nodejs y npm

Para poder llevar a cabo satisfactoriamente la instalación de un proyecto de react debemos tener instalado node, Para este tutorial necesitaremos una versión de node superior a 8.10 y de npm superior a la 6 ya que usaremos la herramienta de ejecución de paquetes npx.

bash

node -v

## debería retornar algo como v13.12.0

npm -v

## 6.14.4

¿Qué hacer si nodejs no esta instalado?

En caso de que el comando anterior no regrese una versión valida de nodejs, necesitaremos instalar node para proceder con la instalación de react.

Nota importante

Anteriormente para iniciar un proyecto de react usábamos el comando npx create-react-app, pero desde marzo de 2023 en la nueva documentación no se recomienda usar este método de instalación.

A continuación aprenderás a instalar react para iniciar una nueva aplicación.

Instalar React con vite

Ejecuta el siguiente comando para iniciar un proyecto con vite js

bash

npm create  vite@latest

A continuación asigna un nombre al proyecto y selecciona react como el framework que deseas instalar la aplicación

bash

Need to  install  the  following  packages:

[email protected]

Ok to  proceed? (y) y

✔ Project  name:  …  vite-react

? Select a framework: › - Use arrow-keys. Return to submit.

  Vanilla
  Vue
❯ React
  Preact
  Lit
  Svelte
  Others

Selecciona el lenguaje con el que deseas usar React

? Select a variant: › - Use arrow-keys. Return to submit.
  ❯ JavaScript
    TypeScript

Con los pasos anteriores ya tienes la configuración del proyecto ahora navega hasta la carpeta creada y ejecuta el comando npm install para instalar las dependencias de tu proyecto.

bash

cd  vite-react

npm install

npm run  dev

Luego ejecuta npm run dev para levantar tu aplicación react ve al navegador y abre el puerto http://localhost:5173/ para ver tu app de react

bash

VITE v4.2.1  ready  in  560  ms

➜ Local:  http://localhost:5173/

➜ Network:  use  --host  to  expose

➜ press  h  to  show  help

Recomendaciones para proyectos de react de producción

En la nueva documentación de react para iniciar un proyecto se se recomienda el uso de frameworks Como nextJs, Remix o gatsby.

Para una aplicación que se va a utilizar en la vida real como un ecommerce o un blog lo mejor es usar directamente un framework, pero si solo necesitas probar, estudiar y aprender a utilizar react basta con instalar react usando vite como hicimos anteriormente.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi