Cómo crear tu proyecto de ReactJS desde cero con ViteJS
ReactJS es una biblioteca de JavaScript muy popular utilizada para construir interfaces de usuario interactivas y reutilizables. En este artículo, aprenderemos cómo crear un proyecto de ReactJS desde cero utilizando ViteJS como nuestro entorno de desarrollo.
Requisitos previos
- Tener Node.js instalado en tu computadora
- Conocimientos básicos de HTML, CSS y JavaScript
- Tener Visual Studio Code (VS Code) instalado
Paso 1: Crear una nueva carpeta
Abre tu línea de comandos y crea una nueva carpeta donde deseas almacenar tu proyecto de ReactJS. Puedes usar el siguiente comando:
mkdir mi-proyecto-react
cd mi-proyecto-reactPaso 2: Iniciar un nuevo proyecto de ReactJS
En tu línea de comandos dentro de la carpeta de tu proyecto, ejecuta el siguiente comando para iniciar un nuevo proyecto de ReactJS con ViteJS:
npx create-vite@latest mi-proyecto-react --template reactPaso 3: Instalar dependencias adicionales
Una vez que el proceso de creación del proyecto se haya completado, ve al directorio del proyecto:
cd mi-proyecto-reactLuego, instala las dependencias adicionales ejecutando el siguiente comando:
npm installPaso 4: Ejecutar el proyecto
Finalmente, ejecuta el proyecto en tu navegador utilizando el siguiente comando:
npm run devExtensiones recomendadas de VS Code
Utilizar Visual Studio Code (VS Code) como tu entorno de desarrollo puede ayudarte a ser más productivo. Aquí hay algunas extensiones recomendadas para trabajar con proyectos de ReactJS:
- ESLint: te ayuda a mantener un código limpio y evitar errores comunes.
- Prettier: formatea automáticamente tu código según las reglas de estilo definidas.
- React Developer Tools: proporciona una interfaz para inspeccionar y depurar tus componentes de ReactJS.
- Live Server: te permite ejecutar tu proyecto ReactJS en un servidor local para una mejor experiencia de desarrollo.
Conclusión
Crear un proyecto de ReactJS desde cero utilizando ViteJS es fácil y rápido. Con las extensiones recomendadas de VS Code, puedes mejorar aún más tu flujo de trabajo y productividad. Ahora estás listo para desarrollar increíbles aplicaciones web con ReactJS.
excelente video, muchas gracias!!!
Hola! Me gustaría ver un video donde pueda descargar templates de los que se encuentran normalmente en la web pero usando React instalado con Vite. He buscado en google y youtube y no encuentro como guiarme.
De lo mejor vite, y sumado a yarn espectacular, el desarrollo web actualmente con react esta en un punto muy alto, yo personalmente tengo mi primer trabajo serio gracias a eso, y a mi parecer no gano para nada mal, y aun no termino de sacar mi titulo xd
Que tal, que framewrok para testing recomiendas con Vite? He leido que Jest no es totalmente compatible con Vite, por ende se debe usar Vitest, pero no estoy tan seguro de implementarlo…
Excelentes herramientas yo agregaría uno más Alan… husky, que son hooks de git entonces puedes decirle cuando haga un commit se ejecute un pre commit que revise que prettier se haya aplicado correctamente con las reglas que tenemos, que se ejecuten los test de jest para saber que no hemos roto nada, que revise las reglas de eslint que no hayamos dejado nada por ahí suelto, etc lo que tú quieras hacer en ese pre commit con husky es buenísimo o un pre push, pre pull, etc, va a la par con otro que se llama lint-staged (se instala cuando instalas husky ahi van todas las reglas de los hooks en tu package.json). Yo la manera que lo utilizo es así: prettier -> eslint -> jest. Y es una maravilla porque no importa si tu editor tiene una reglas de trabajo y tus compañeros otra, siempre va a aplicar las reglas que dejemos en el proyecto
¿Que opinas de React Query?
Quien es ese muchacho?
Hola yo uso "editor.defaultFormatter": "esbenp.prettier-vscode","prettier.jsxSingleQuote": true, "prettier.singleQuote": true,
Nice, justo estaba x probar vite en un proyecto personal 🙌
He tenido problemas con Vite a la hora de usar las variables de entorno (el process.env…. no funciona), trate de leer la documentación oficial y.no la comprendo je
y éste lampiño quién es? me confundí de canal me parece, estoy buscando un mustache que sabe mucha data de programación
Falto jsconfig o tsconfig para las rutas y considero que configurar git sería genial como te organizas
al finn un video que habla y lo explica bien la ptmreee lo que costaba encontrar uno ehhhh toma mi like buen señor
Muy bien, 👏
Ya que YouTube me sigue borrando los comments, respondo por aquí a @Rodrigo Moyano que pregunta :
– "Has probado stylelint? Es una de las mejores herramientas que he usado para css"
La verdad que no ! pero ya mismo voy a probarlo 😀
Para mi el tema esencial es el Kurisu en the doki theme extension jujuju junto con mi sticker e imagen de fondo respectiva de zero two