This article is a summarized version of the original version in devaradise.com
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:
- An internal dashboard application
- A website that doesn't care about SEO
- 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 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:
# 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 for other libraries. You can also learn more about vite in its documentation website.
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:
# 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.
npx create-react-app my-react-app --template typescript
You can learn more about Create-React-App on its documentation website.
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:
- E-commerce website
- Subscription-based website
- Large multi-user website
- SaaS website
- 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:
npx create-next-app@latest
Upon running this command, there will be some questions about project options prompted.
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
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, 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
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
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
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. 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:
# 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.
# 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 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 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:
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.
npx gatsby new starter-template-name <starter-template-github-repo>
You can learn more about Gatsby from its official documentation
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
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
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 😁
Do you have more react setups to share?
If you do, please share with me in the comment below 😄
Top comments (6)
Thank you for sharing 🌹
No problem, happy to help
👍
This is a great article. Just yesterday I was wondering about Create React App and if it's still available. React now a days is so heavily tied to Next we can't tell the difference anymore.
Great post, thanks for the info!
Thanks for the insights