How to start a React project

Motivation

Even though React is not the best technology out there, it sure is still one of the most widely used frameworks in the frontend developer world. It uses a concept called virtual DOM which in simple terms calculates what changes are to be done before doing the actual changing of the DOM.

React is a JavaScript framework. This means, that there will be code in your application that solely exists, because of your choice of tool.So unless you either really like React or you have to learn it, I recommend to switch to a compiler based “framework” like Svelte.

Create React App

Create React App might be the most common way to start up your project. That’s for a good reason. It has everything you might need and you don’t have to configure it yourself. That’s all you have to do:

bash
npx create-react-app my-app

After usually a few minutes you will have a React application ready for development. In the meantime, you can go and make a coffee/tea. There is a lot of stuff you might not need though. Just remove what you don’t need and you can move on.

One thing that a lot of people are a little afraid of is the build process itself. This is why tools like these even exist. If you run npm run eject you will see a huge amount of file that are only relevant for the build process. You wont understand all of this easily, if you’ve never build Webpack based processes yourself. But the thought might strike you: “Is all of this really necessary?“.

The short answer: No, it isn’t.

Most of the time you don’t need a Service Worker, so why is there Workbox in your build setup? There is not even TypeScript support in the default. You’d have to either add it yourself or you have to specify the used template on project initialization. If you need a specific plugin and you have to eject the build process. How should you be able to maintain the software afterwards? Hell, it’s so much code, where do you even start?

Simply said, there is a lot of overhead you might not know of, that slows you down and which you don’t even need.

Using Vite

A much faster alternative would be ViteJS. Starting a React project using vite is as easy as it is with create react app

bash
npm init @vitejs/app my-app && cd my-app && npm i

At the time of writing you will be asked what framework you would like to use. As you can see there’re quite a few choices. You can also go for TypeScript, if you like to do so. Afterwards, you will be as ready to run your initial application as you would be using create react app. There are arguably two downsides compared to create react app though. One is that you don’t have some files like a robots.txt or a webmanifest created out of the box. You would need to create them yourself if you need them. The other is, that you don’t have time for a coffee, while setting up the base application.

Great about this setup is, that there is not much to it. It’s much less code, you don’t feel overwhelmed. The config file is just

js
// vite.config.ts
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()]
})

For a lot of projects you don’t even need to care. It’s the same as with Webpack, which you get with create react app.

ViteJS is a lot faster while developing compared to Webpack, because it doesn’t need to rebuild all of the code if you change a single character. Make developing feel a lot nicer.

Wrapping up

Of course you can always build a setup from scratch and I highly recommend you to get some knowledge regarding build tools. For a quick setup though, ready made scripts are awesome. Be it create-react-app or ViteJS. Just try each of them out and stick with the one you fancy most.