{"id":15579,"date":"2023-01-27T07:33:40","date_gmt":"2023-01-27T13:33:40","guid":{"rendered":"https:\/\/upmostly.com\/?p=15579"},"modified":"2023-01-27T07:33:42","modified_gmt":"2023-01-27T13:33:42","slug":"how-to-set-up-a-react-application-using-vite","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/how-to-set-up-a-react-application-using-vite","title":{"rendered":"How to set up a React application using Vite"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

React is a popular JavaScript library for building user interfaces used by many developers worldwide. One of the tools that can help developers build React applications more efficiently is a build tool.<\/p>\n\n\n\n

What is a Build tool?<\/h3>\n\n\n\n

A build tool is a software that helps automate the process of building, testing, and deploying an application.<\/strong><\/p>\n\n\n\n

Several build tools are available for React, including Webpack<\/a><\/strong>, Parcel<\/a><\/strong>, and Rollup<\/a><\/strong>.<\/p>\n\n\n\n

However, a newer build tool called Vite<\/a><\/strong> has recently gained attention for its unique approach to building React applications.<\/p>\n\n\n\n

What is Vite?<\/h2>\n\n\n\n

Vite<\/strong>, or “Vite Is the Template Engine<\/strong>“, is a build tool designed explicitly for building modern web applications. It was developed by Evan You<\/strong>, the creator of Vue.js<\/a><\/strong>, and was released in June 2020.<\/p>\n\n\n\n

Vite aims to be a fast and lightweight build tool that is easy to use and configure.<\/strong><\/p>\n\n\n\n

What makes Vite stand out from other build tools?<\/h2>\n\n\n\n

There are several ways in which Vite differs from other build tools for React. Here are some of the main differences:<\/p>\n\n\n\n

Native ESM imports<\/h3>\n\n\n\n

As mentioned earlier, Vite uses native ESM imports to bypass the bundling step. This means that Vite can serve the source files directly to the browser<\/strong>, resulting in faster build times and smaller bundle size.<\/p>\n\n\n\n

On the other hand, other build tools like Webpack and Parcel use a bundling process to compile the source code into a single bundle file. This can take longer, especially for large applications, and results in a larger bundle size.<\/p>\n\n\n\n

Development server with hot module reloading<\/h3>\n\n\n\n

Vite includes a development server that automatically reloads the application when changes are made to the source code. This is known as Hot-Module Reloading<\/strong>, or Hot-Reloading<\/strong>, allowing developers to see their changes in real time without needing to refresh the browser manually.<\/p>\n\n\n\n

Other build tools like Webpack and Parcel also have hot module reloading, but it is not built-in and requires additional configuration.<\/p>\n\n\n\n

JSX and TypeScript Support<\/h3>\n\n\n\n

Vite supports JSX<\/strong>, the syntax extension used by React to write components out of the box. This means developers can use JSX in their React applications without additional configuration.<\/p>\n\n\n\n

It does also support TypeScript, a popular programming language that adds optional static types to JavaScript. This makes it easier for developers to catch errors and prevent bugs in their code.<\/p>\n\n\n\n

Webpack and Parcel also support JSX and TypeScript; however, they require additional configuration to enable these features.<\/p>\n\n\n\n

If you haven’t yet worked with TypeScript in React, you shall not worry; we have an article that will walk you through the required steps in order to set up your React application using React. You can check it out here<\/a><\/strong>.<\/em><\/p>\n\n\n\n

Straightforward configuration<\/h3>\n\n\n\n

Vite has a more straightforward configuration than other build tools like Webpack and Parcel. This is because it uses native ESM imports and includes a development server with hot module reloading, so developers don’t have to configure these features separately.<\/p>\n\n\n\n

In comparison, Webpack and Parcel require more complex configurations to enable features like hot module reloading and support for JSX and TypeScript. This can be a drawback for developers who are new to building tools or want a simple and easy-to-use tool.<\/p>\n\n\n\n

Using Vite with React<\/h2>\n\n\n\n

Now that we have a better understanding of what Vite is and how it differs from other build tools, let’s take a look at how we can set up our new React application.<\/p>\n\n\n\n

To use it with React, we first need to install the package using npm or yarn:<\/p>\n\n\n\n

    \n
  • npm<\/strong>: npm install -g vite<\/code><\/li>\n<\/ul>\n\n\n\n
      \n
    • yarn<\/strong>: yarn global add vite<\/code><\/li>\n<\/ul>\n\n\n\n

      Next, we can create a new Vite project by running the following command:<\/p>\n\n\n\n

      vite create my-project<\/code><\/p>\n\n\n\n

      This will create a new project folder called my-project<\/code> with the basic files and configuration needed to start a new Vite project.<\/p>\n\n\n\n

      Once the project is created, we can install the dependencies needed for a React application by running the following command:<\/p>\n\n\n\n

        \n
      • npm<\/strong>: npm install react react-dom<\/code><\/li>\n\n\n\n
      • yarn<\/strong>: yarn add react react-dom<\/code><\/li>\n<\/ul>\n\n\n\n

        Next, we can create a new React component by creating a file called App.js<\/code> in the src<\/code> directory and add the following code:<\/p>\n\n\n\n

        import React from 'react';\n\nconst App = () => {\n  return (\n    <div>\n      Hello, world!\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
        Finally, we can update the index.html<\/code> file in the public<\/code> directory to include our React component by adding the following code:<\/p>\n\n\n\n
        <body>\n  <div id=\"app\"><\/div>\n  <script type=\"module\" src=\"\/src\/App.js\"><\/script>\n<\/body><\/code><\/pre>\n\n\n\n
        Now, we can start the Vite development server by running the following command:<\/p>\n\n\n\n
        vite<\/code><\/p>\n\n\n\n
        This will start the development server and open the application in the browser.<\/p>\n\n\n\n
        Any changes we make to the source code will be automatically reloaded in the browser thanks to Vite’s hot module reloading feature<\/strong>.<\/p>\n\n\n\n
        Conclusion<\/h2>\n\n\n\n
        Vite is a fast and lightweight build tool specifically designed for building modern web applications. Its use of native ESM imports and a built-in development server with hot module reloading makes it a unique and efficient tool for building React applications.<\/p>\n\n\n\n
        While it may not have all the features of other build tools like Webpack and Parcel, its simplicity and ease of use make it an excellent option for developers who want a quick and easy way to build React applications.<\/p>\n\n\n\n
        I hope you\u2019ve enjoyed the read and it helped you gain some insight into how to setup a new React application using Vite, as well as the benefits of doing so.<\/p>\n\n\n\n
        I’m looking forward to hearing your thoughts on this article, so feel free to leave a comment below.<\/p>\n\n\n\n
        Cheers!<\/p>\n","protected":false},"excerpt":{"rendered":"
        Introduction React is a popular JavaScript library for building user interfaces used by many developers worldwide. One of the tools that can help developers build React applications more efficiently is a build tool. What is a Build tool? A build tool is a software that helps automate the process of building, testing, and deploying an […]<\/p>\n","protected":false},"author":126,"featured_media":16149,"comment_status":"open","ping_status":"open","sticky":false,"template":"post-tutorial-new.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-15579","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/15579","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/126"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=15579"}],"version-history":[{"count":5,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/15579\/revisions"}],"predecessor-version":[{"id":16155,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/15579\/revisions\/16155"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/16149"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=15579"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=15579"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=15579"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}