React Crash Course | #01 – Creating a React App (using Vite)
Welcome to the first installment of our React Crash Course series! In this tutorial, we will walk you through the process of creating a React app using Vite, a next-generation build tool that provides a fast and reliable development experience.
What is Vite?
Vite is a build tool that aims to provide a blazing fast development experience for modern web development. It leverages native ES Module support in modern browsers to serve JavaScript and CSS files directly, without bundling them into a single file during development. This results in significantly faster build times and an improved development experience.
Getting Started
Before we get started, make sure you have Node.js and npm installed on your machine. You can install Vite globally by running the following command:
npm install -g create-viteOnce Vite is installed, you can create a new React app by running the following command:
npx create-vite@latest my-react-app --template reactThis command will create a new directory called “my-react-app” and scaffolds a new React app using Vite as the build tool.
Running the App
Navigate to the newly created directory and run the following command to start the development server:
cd my-react-app
npm run devThis will start the development server and open your new React app in the browser. You can now start developing your app and see your changes live as you make them.
Conclusion
And that’s it! You’ve successfully created a new React app using Vite. In the next installment of our React Crash Course series, we will dive deeper into building components, managing state, and working with data in React. Stay tuned!
(node:29928) Warning: An error event has already been emitted on the socket. Please use the destroy method on the socket while handling a 'clientError' event 🙁 how to fix sir
Hello po, Hingi lang advice sir kase.front-end dev ako pero halos PSD to HTML CSS/bootstrap and Jquery gamit ko. mostly pa ng picture e chatgpt at copy paste sa google. parang hirap kase ko gumawa ng sariling function kahit anung tutorial at practice ko pero naiintindihan ko naman pano gumagana kase naeedit ko. Okay lang po kaya tumalon sa React.js ? Na-stack na po kase ko sa company ko na old school gamit. Nag try na din kase ko mag apply apply kaso puro Framework na ngayon need.
May gc group po ba tau here ? Thank you
Dito nainstall hahah sabi 'the term npm is not recognize' po
failed to load config from C: …
even though my node version is up to date
Lods, I built a website for a client using Vite. Kapag 'open in new tab' yung link nage-error 404. Same din kapag nagclick to an external link then back, error 404 na. Help!!!!!
ask lng po, bat ayaw ma install thru Windows?
salamat…😁
witwit
sir ganto lumalabas saakin pag iinstall ko sya
npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file,
or operable program. Check the spelling of the name, or if a path was included, verify
that the path is correct and try again.
At line:1 char:1
+ npm create vite@latest
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
pano po i-access yung existing project? or halimbawa may multiple projects ka pipili ka ng isa
request po onsite search for website hehe
Nice thank you meron pala nito😍😍
sa wakas dito na ko hahaha
bakit po saakin kapag after ko i-enter ang 'npm install' may lumalabas na '5 moderate severity vulnerabilities'? ignore ko lang po ba to?
Hehehe, natapos ko na yung isang series, pwede na mag proceed sa react. Thank you po!!
wow, nag start akong mag aral ng web dev specially sa React, kaso puro english lang nasa youtube, ito mas maganda dahil tagalog. Hope marami kapang matulungoan…
hehe sir salamat. nainspire ako ulit mag code 🥹 then this will give us a lot of opportunities for career growth
career shifter po, sana may css, js and html huhu thanks po.
Thank you po for this. Looking forward to more videos. Currently working as a laravel developer, will try to learn React 😊
laking help po nito sir. More video pa po.