In this article we will see how to create React applications with Vite, which allows us to develop modern applications with features such as HMR, among others.
Building React applications with Vite and TypeScript
First of all, it is worth highlighting that the conventional tool “create-react-app” for developing React applications has been discontinued (the last update is from April 2022 according to the repository on GitHub ), that is, it is important to know how we can create new React applications with contemporary tools in use at the moment.
Currently, in the React documentation , there is a suggestion to start your React applications using some framework, where the use of Next.js , Remix or Gatsby is recommended . However, it is possible to use React without frameworks , in which case the documentation suggests the use of tools such as Vite or Parcel .
Vite is a tool developed for front-end projects, thus, it brings modern resources for the construction of new applications, improving the compilation process, changes reflected instantly in the browser, optimizing linkedin data the development flow, among others that can be consulted in the Vite documentation.
Creating a React application with Vite
First of all, we need to have Node.js installed on our computer, so let's go to the node.org website and install it according to your operating system. You can access our article on installing Node.js on Windows, Mac and Linux to see the step-by-step guide. It is important to note that Vite requires at least version 18 of Node.js.
After you install or update Node.js, we can create an application using npm with the following command:
Copy
npm create vite@latest
Next we will have to make some configurations through the terminal:
First, we name the project, choose which technology we will use and finally choose to develop with TypeScript (you can select pure JavaScript if you prefer).
This way our React project with Vite and TypeScript is working, as we can see when accessing
React Application with Vite
Another interesting point is to test Hot Module Replacement (HMR). HMR allows us to update the code and this update will be reflected on the page without the need for a “refresh”.
Testing HMR
Finally, we updated the text by adding “TreinaWeb” and the page was automatically updated, so our React application was configured and is working correctly with Vite and TypeScript.
Conclusion
In conclusion, using Vite to build React applications offers a modern and efficient approach to front-end development. With features like optimized compilation, instant browser-reflected changes via HMR, and more, Vite simplifies the process of building React applications, enabling a smoother and more productive development experience. By adopting this tool, developers can take full advantage of React’s capabilities while also benefiting from the advantages provided by Vite.
If you want to delve deeper into your front-end career, especially in React development, we have training for Functional React Developers , which will help you become a much better developer. There are 14h17 of videos with a lot of content and a total of 59 exercises .