Create React app with Vite

React.js Apps are very complex

Setting up React application is very complex. There is ton of configuration and moving parts in the backstage. If you were to create React app from scratch, you would have to setup JSX compiling, SASS setup, TypeScript support, many other build tools etc..

And to be honest, it is no joke to setup all the tools needed for fully fledged React project. That is why people in React team came up with Create React App tool which bootstraps all of this for us. So that is one option to go with. But we will use Vite to create our React app.

Vite - Next Generation Frontend Tooling?

Vite is awesome tool for bootstrapping front-end applications. We will not go into too much detail on Vite, if you want to go more in depth on Vite, read this thorough Guide on Vite.

In this article we will go through basic setup with Vite and get to Hello World on our screen! How awesome!

Creating React app with Vite

All we need to create new React app with Vite, is NPM and Node.js which every developer should have installed already. If not look at 5 ways you can install Node on your machine.

We can create different types of apps with Vite. Svelte, Vue, React and other. To create React app we use following command in our shell in folder where we want to create the app:

Different version of NPM requires different Vite command. You can check what version of NPM you have by following shell command: "npm --version"

# npm 6.x
npm create vite@latest my-react-app --template react

# npm 7+, extra double-dash is needed:

npm create vite@latest my-react-app -- --template react

React app

We will not go into details of the app structure and other configurations. When we open the newly created my-react-app in VS Code, straight away we delete everything from src folder, to start with a clean slate.

Now we create 2 new files. First one main.jsx and second MyApp.jsx, with the following code:

import ReactDOM from 'react-dom/client'
import MyApp from './MyApp'

ReactDOM.createRoot(document.getElementById('root')).render(<MyApp />)

import React from 'react'

class MyApp extends React.Component {
  render() {
    return <h1>Hello from MyApp component</h1>
  }
}

export default MyApp

Running our app

With these 2 files we are ready to run our app and we should see "Hello from MyApp component" in the browser.

To run our app, we run the usual NPM command:

npm run dev

# vite v2.9.9 dev server running at:

# > Local: http://localhost:3000/
# > Network: use \`--host\` to expose

# ready in 102ms.

Now our app should be running on the http://localhost:3000 as Vite writes in our Terminal. Going there, we see the h1 tag.

Awesome!

That's it for this quick and simple Vite start.

Keep learning and see you in the next one!