An Opinionated React Guide 2024 — Project Setup

This is the first of several articles covering an opinionated, hassle-free approach to creating and developing React apps.

In this article we cover basic tasks like installing Node.js, choosing Yarn as our package manager and creating a project using Vite.

Let’s Install Node.js

There are several ways to install and maintain Node.js versions. You can use the package manager of your operating system or use some curl | sh command. In this guide we’ll use a tool specifically designed to install and maintain Node.js versions. At the time of writing we can mainly choose between the following tools:

nvm — Node Version Manager
n — Interactively Manage Your Node.js Versions
Volta — Hassle-Free JavaScript Tool Manager

If you already use one of the above options you should stick with it. If you don’t, we recommend Volta. Volta is easy to install, has a simple CLI and is very fast.

Install Volta with the following command:

curl https://get.volta.sh | bash

Or use the installer as described in the Volta docs if you’re on Windows.

Now open a new terminal (as recommended by the installation script) and install the latest node version:

volta install node@latest

You can check installed versions with volta list. Different versions can be installed in parallel with volta install node@<version>. If you want to use a specific version you can do this with the same volta install command.

Choosing a Package Manager

Again, there are three main choices for a node package manager:

npm — Node Package Manager
Yarn — Yet Another Resource Negotiator
pnpm — Performant Node Package Manager

We recommend Yarn with Plug’n’Play because it’s the fastest option. But pnpm is a good alternative. Just don’t use npm because it’s really slow compared to the other options.

Install the latest version of Yarn with Volta:

volta install yarn@latest

Create the Project

We use a Vite template to create a new project. Vite is a build tool for your javascript sources. It provides a development server with hot module reloading and can bundle your code for production deployment.

We think you shouldn’t even consider Webpack for new projects because it’s so dead simple to create and maintain projects with Vite.

We use the react-swc-ts project template because you never start a new project without Typescript (the ts-suffix) and because SWC (the -swc- part) is a faster transpiler than Babel which produces smaller outputs.

So let’s create the project:

yarn create vite the-bestest-react-guide --template react-swc-ts

The next steps are already printed to your terminal:

Done. Now run:
 cd the-bestest-react-guide
 yarn
 yarn dev

If you navigate to http://localhost:5173 you can already see a placeholder screen for your new React app (which we will replace later).

Before you go on, you should add another line to the .gitignorefile generated by Vite to ignore an additional file created by Yarn to track installed packages:

echo .yarn/install-state.gz >> .gitignore

Pin Node.js & Yarn Version

By pinning the Node.js and Yarn versions for our project using Volta we can ensure that the correct versions are automatically downloaded and used by anyone working on the project.

Assuming you’re still inside the project directory, run:

volta pin node@latest
volta pin yarn@latest

Now every time someone runs node or yarn inside our project directory, Volta will automatically install and use the correct version.

Commit

The project has successfully been set up 🥳. Let’s create a git repository, add all the files and commit.

Assuming you’re still inside the project directory, run:

git init && git add -A && git commit -m "Project Setup Completed! 🚀"

Now push the repository to your favourite hub like Github or Gitlab.

Feel free to check out our version of the repository.

⏭ Next Up

In our next article we’ll cover setting up code formatting and linting rules for the repository and enforcing them with git hooks to keep our codebase nice and clean. We’ll also open our project in Visual Studio Code and get ourselves ready to add some functionality to our app.

Later — Private Task & Todo Management for Jira

Later is a Jira cloud app that allows you to effortlessly track your tasks & todos privately within your own personal workspace.

And you know what? It’s completely free! 🥳

Create Private Todos on your Jira Issues 🔗

You can easily link tasks to your Jira issues to stay properly organized. The todos are completely private to you. No need to worry about what others might think of your quick and dirty notes.

Complete Overview over all your Todos 🏠

Of course, you don’t have to assign your task to an issue if that is not needed. You can create an manage tasks completely independently of any Jira issue. And yet, within Jira.

Later provides a complete overview over all your tasks, whether they are assigned to an issue or not. You can create and delete tasks and prioritize with drag & drop.

Feature rich text editor 💰

Later provides a feature rich text editor, so you can go into more depth when taking notes, adding some more details and examples to your tasks, and even structure your notes nicely.

It is equipped with tooling for basic text formatting, headings, lists, code highlighting and even undo & redo functionality.
And the best part — It also supports common Markdown shortcuts giving you that extra productivity boost that you need! 🚀

Promo video 🎥

Still not convinced? Then check out our promo video! 🍿

Get it now for FREE 🛒

Later — Private Task & Todo Management for Jira is completely free! It is available in the Atlassian marketplace. Install it now and power up your workflow! 💪

You can find all of our Atlassian apps right here.

Developed by rappicode. ❤️