How to Start & Setup a React project in 2024 (7 Different Ways Based on Use Cases)
Tags: webdev, javascript, react, beginners
Published: 2024-05-22 13:40:36

This article is a summarized version of the [original version in devaradise.com](https://devaradise.com/how-to-start-react-app/)

As a library, React doesn't provide a built-in setup to create a React app. They let us decide how we want to set up our React app. As a result, new developers are often confused about how they are supposed to set up their projects.

There are 3 use cases that we will cover in this post. Feel free to jump into the use case that is relevant to your project.

## Building Single Page Application / Client-side Rendering App 

Single page application is run entirely on the client side. Sometimes it is also called a Client-side application. It is best used for web applications such as:

1. An internal dashboard application
2. A website that doesn't care about SEO
3. A web application that requires real-time data updates (Stock app, chat/messaging app, etc)

### 1. React with Vite

Vite is currently the best build tool for bundling Front-end applications. It's so fast because it uses [esbuild](https://esbuild.github.io/) under the hood. Vite hot reload is the fastest among other development tools I have used.

#### How to Start React with Vite

Here is the command to start and set up your React app with Vite:

```sh
# npm 7+, extra double-dash is needed:
npm create vite@latest my-react-app -- --template react-ts

# yarn
yarn create vite my-react-app --template react-ts

# pnpm
pnpm create vite my-react-app --template react-ts
```

The above commands will generate a react project in `my-react-app` folder with typescript support (which I recommended using). But, If you want to remove typescript support, change `react-ts` to `react`. 

You can see all [create-vite templates](https://github.com/vitejs/vite/tree/main/packages/create-vite) for other libraries. You can also learn more about vite in its [documentation website](https://vitejs.dev/).

#### React with Vite advantages

- Very fast and lightweight
- Built to prioritize SPA/CSR application
- Unopinionated
- Good comunity support
- Easy to Learn

#### React with Vite disadvantages

- No framework setup, so you need to set up project structure and libraries on your own
- Little support for SSR

### 2. Create React App

Before Vite becomes popular, Create React App is the most used way to start a React project. It was like the default way to setup a React app.

#### How to Start React App with CRA

Here is the command to start and set up your React app with CRA:

```sh
# npx, comes in npm 5.2+
npx create-react-app my-react-app

# npm, available in npm 6+
npm init react-app my-react-app

# yarn, available in Yarn 0.25+
yarn create react-app my-react-app

```

For typescript support, just add `--template typescript` after the folder name.

```sh
npx create-react-app my-react-app --template typescript
```

You can learn more about Create-React-App on its [documentation website](https://create-react-app.dev/).

#### React with CRA advantages

- Stable and large community support
- Built to prioritize SPA/CSR application
- Easy to Learn

#### React with CRA disadvantages

- Slower build speed
- No framework setup, so you need to set up the project structure and libraries on your own
- No support for SSR

## Building Full-stack Website

Full stack website with SSR is best for building medium to large website applications such as:

1. E-commerce website
2. Subscription-based website
3. Large multi-user website
4. SaaS website
5. Progressive Web Application (PWA)

### 1. Next.js

Next.js is a javascript framework built on top of React.js to build a full-stack web application. Next.js handles application routing, component rendering, session management, and data fetching so you can focus on creating your components with React. 

#### How to Start React project with Next.js

You can start Next.js project with the following command:

```sh
npx create-next-app@latest
```

Upon running this command, there will be some questions about project options prompted.

```sh
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
```

Next.js will set the project structure and some libraries for you. You can learn about it on [its documentation website](https://nextjs.org/docs)

#### Next.js Advantages

- Excellent performance
- Zero config
- Automatic code-splitting
- Faster time to market for Startup
- Support both SSR and SSG
- Great for SEO
- Large community support

#### Next.js Disadvantages

- Opinionated
- Steep learning curve
- SSR Complexity that might cause overhead

### 2. Remix

Remix is built on top of [React router](https://reactrouter.com/), the most popular React routing library since the early days of React. Remix also uses Vite for the development server, making it fast and developer-friendly.

#### How to Start a React Project with Remix

You can install remix with a batteries-included project with

```sh
npx create-remix@latest
```

But if you still learning, it is recommended to do the manual installation so you can understand every piece of libraries that make up a Remix project

```sh
mkdir my-remix-app
cd my-remix-app
npm init -y

# install runtime dependencies
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

# install dev dependencies
npm i -D @remix-run/dev vite
```

You can learn more about Remix on [its documentation website](https://remix.run/)

#### Remix Advantages

- Fast and Excellent performance
- Advanced routes management
- Great for SEO
- Developer-friendly (Some said better than Next.js)
- Relatively gentle learning curve

#### Remix Disadvantages

- Less popular, so less community support
- SSR only

## Building Content-based Website

The frameworks that we are going to discuss are best used to build websites such as:

- Blogs
- Portfolio websites
- Company profiles
- Landing pages/marketing websites
- Documentations

### 1. Astro

Astro pioneered and popularized a frontend architecture called [Islands architecture](https://docs.astro.build/en/concepts/islands/). An architecture that allows you to strip all unused and non-essential JavaScript from the page automatically. It makes Astro build a lightweight and fast web page.


#### How to start Astro + React project

You can create a new Astro project with this command:

```sh
# create a new project with npm
npm create astro@latest

# then add react integration
npx astro add react
```

It will prompt some configuration options for your project.

You can also start Astro project with a template. Astro community provides templates for common projects like blogs, portfolios, docs, and landing pages.

```sh
# create a new project with an official example
npm create astro@latest -- --template <example-name>

# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template <github-username>/<github-repo>
```

You can explore astro templates in [themes page](https://astro.build/themes/) or search in Github.

#### Astro Advantages

- Lighting-fast performance
- Great for SEO
- Fully featured, but flexible
- Gentle learning curve
- Framework agnostic

#### Astro Disadvantages

- Less interactive because zero-javascript by nature
- Community support is not mature yet

### 2. Gatsby

Gatsby is one of the pioneers of Static site generator frameworks. It's built on top of React, and it's also still recommended by [react official documentation](https://react.dev/learn/start-a-new-react-project#gatsby) for building a content-based app in React.

#### How to start a React project with Gatsby

You can create a Gatsby project in one command:

```sh
npm init gatsby
```

It will prompt you to define the project name, description, preferred language (JS or TS), CMS, styling tools, and other additional features.

You can also create a Fatsby project from [starter templates](https://www.gatsbyjs.com/starters/).

```sh
npx gatsby new starter-template-name <starter-template-github-repo>
```

You can learn more about Gatsby from [its official documentation](https://www.gatsbyjs.com/)

#### Gatsby Advantages

- Fast
- SEO friendly
- Large community supports
- Extensive plugins and starters
- Rich data integration with Graphql, markdown, and Rest API

#### Gatsby Disadvantages

- Decreasing popularity
- Fairly high learning curve

### 3. Docusaurus

Docusaurus is a static site generator built on top of React to build a fully-featured documentation website in no time. It's built specifically to build a static documentation website. But in reality, you can also build blog and portfolio websites using Docusaurus.

#### How to start a React project with Docusaurus

You can create a Docusaurus project with this command

```sh
npx create-docusaurus@latest my-docusaurus-app classic --typescript
```

You can remove `--typescript` if you want to remove typescript support. `classic` is a recommended starter template for Docusaurus.

Learn more about Docusaurus in [its official documentaton](https://docusaurus.io/)

#### Docusaurus Advantages

- Fully-featured for docs and blog website
- Large community support
- Flexible and Customizable

#### Docusaurus Disadvantages

- Too specific use case
- Less option for CMS / Content editing, because it only supports markdown.

## Conclusion

All the frameworks above are built for different use cases. So it is best to understand your project use case first before choosing the framework. Dont choose a framework because everyone uses it, but choose it because you need it :grin:

Do you have more react setups to share? 
If you do, please share with me in the comment below :smile: