Let’s start with React by creating our first project. For that, we will use Vite, which is the official recommendation.
Vite a modern build tool for web projects that provides an extremely fast development experience.
Previously used create-react-app has become obsolete. It is no longer the recommended option for creating React projects.
Prerequisites
Before we dive into React, it is necessary to have these basic requirements:
- Node.js and NPM: To manage dependencies and run scripts.
- Code editors: Like Visual Studio Code
That is, more or less the usual tools for any web development. But, in case you are not familiar with any, here are some links 👇.
If you want to know more, check out
Creating a React Project
If we have everything installed, we can now create our React project. Open your terminal and run the following command:
npm create vite@latest my-app --template reactmy-appis the name of the project (you can change it to whatever you want).--template reactindicates that the project will use React.
An assistant with options will appear. Select React
Then, you can select a variant (TypeScript or JavaScript). For this tutorial, select JavaScript.
Finally, navigate to the project directory and install the necessary dependencies:
cd my-app
npm installCongratulations, you have successfully initialized your project 🎉.
If at any point you need to install Vite in an existing project, you just need to add these two packages.
npm install -D react react-dom @vitejs/plugin-reactStarting the Development Server
Now, to work on our project, we need to be able to see it (it would be nice, yes, indeed). For that, we can start the development server.
Navigate to the project folder (if you are not there yet) and start the development server by running:
npm run devThis command will start a development server and provide you with the URL (usually http://localhost:5173) where your application is running.
The terminal will show you a link similar to this:
VITE vX.X.X ready in Xms
Local: http://localhost:5173/Now open your browser and visit http://localhost:5173/ to see your application running. 🚀
It may not be the best app in the world but hey! It means everything is working correctly for you 😉.
Vite has Hot Reload. This means that the changes you make in the code are shown instantly in this “preview,” and it’s a great help for development.
Build and Deployment
When you have finished programming your application (in many many days), at some point we will need to build the final application.
To generate an optimized version of your application, use:
npm run buildThis will create a dist/ folder with the files ready to be deployed on a server or service.