How To Create React Project Using Vite: 2 Possible Ways

React is a popular JavaScript library that focuses mainly on building user interfaces and was developed by Facebook. It helps developers to create interactive and dynamic web applications comfortably. React follows a component-based architecture, So the UI is structured into reusable components, making application maintenance and scalability easier. To create React project we need to have some basic knowledge before.

So to create React project we need some tools, but don’t worry, React means Web development is not platform-dependent, that’s no matter whether we use Linux, Mac or Windows. Just we need a code editor where we write React code and a browser where our code runs easily. You can use your preferred code editor but we always recommend using VS Code because it’s the best free code editor. Also, we need Node Js, We know you have a question about “why we need Node Js?”. JavaScript usually runs into a browser but if we use Node Js it will give us an environment to interpret React code.

Step 1: Install the Necessary Tools

Before creating a React project, ensure you have the following tools installed:

VS Code: Download and install Visual Studio Code if you haven’t already. It’s a lightweight but powerful code editor available for all major platforms.
Node.js: Install Node.js, which includes npm, the Node.js package manager. You’ll need Node.js to run JavaScript on the server side.

Step 2: Create React Project

Open VS Code and create a new directory for your project. Inside this directory create a React project using node by running the following command in the terminal:

Enter the following code in your project folder’s terminal. Vite requires Node.js version 18+. 20+. To work, please upgrade if your package manager warns about it.

npm create vite@latest

Also if you use Vite for the first time you will get these messages, so don’t worry just type “y” and then press enter.

Need to install the following packages:
create-vite@5.1.0
Ok to proceed?

Then you have to give a project name for your new project.

? Project name:

Now you have to select react by using the arrow key.

? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

Now you have to select JavaScript by using the arrow key.

? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
>   JavaScript
    JavaScript + SWC

Done! You have successfully created your React app. But the node module is not installed, To install the node module go through those commands described below, First go to the project folder by run this.

cd Your-Project-name

Then run this command.

npm install

Well done, you have successfully created your React project. Now if you want to start a server run this command.

npm run dev

Using the Vite create React project offers a smooth and well-organized development experience. Developers can quickly create and optimize modern web apps by enhancing Vite’s fast-build tooling and React’s component-based architecture. Vite’s support for hot module replacement (HMR) enables concurrent updates during development, improving productiveness. Furthermore, The React-Vite integration allows for easy deployment of highly optimized production builds for high-performance web applications. In conclusion, combining React with Vite empowers developers to build scalable, interactive, and performant web projects easily. For more information you can visit – https://v3.vitejs.dev/guide/

Create React Project Using 'npx' another old-school option

Don’t worry, we have another old-school option to create React project using npx(Node Package eXecute). For this process to create React project first you have to install the node as mentioned above then open VS Code and create a new directory for your project. Inside this directory create a React project using npx by running the following command in the terminal:

npx create-react-app your-app-name

Done! You have successfully created your React app. First, you have to go to the project folder to start a server.

cd your-app-name

Well done, you have successfully created your React project. Now if you want to start a server run this command.

npm start

Great job! dear Now that your React project is set up, you can start building your application by creating components, defining routes, managing state, and adding styling. Don’t forget to explore the features and capabilities of React, such as JSX syntax, React hooks, and component lifecycle methods, to create dynamic and interactive user interfaces. If you encounter any challenges along the way, you can visit https://create-react-app.dev/docs/getting-started.

We hope it will be helpful towards your journey to build your react application, Happy coding!

Read more related posts:- http://bytelure.in/category/code-hub