How to Start a React Project in 2023
- Published on
- Jigar Patel--3 min read
Overview
- How to Start a React Project in 2023
- Introduction
- Context
- REACT WITH VITE
- REACT WITH NEXT
- REACT WITH ASTRO
- How to Choose
- Quick summary
- About the Author
- We're Hiring
- Related Blogs
How to Start a React Project in 2023
Introduction
In this guide, I want to provide a brief overview of starter kits for a new React project. I will reflect on the advantages and disadvantages, the skill level required, and the features offered by each starter project. By the end, you will be familiar with three solutions catering to different requirements.
Context
This guide is written in response to the new React documentation, which has introduced changes in the recommended way to start a React application. The traditional create-react-app (CRA) is being replaced by various starter kits, which have received mixed reactions from the React community.
Continue reading to understand the significance of these changes and explore the recommended React starter projects.
REACT WITH VITE
Vite is positioned as the successor to create-react-app (CRA). It offers familiarity without straying far from CRA. Vite stands out due to its use of esbuild, making it significantly faster compared to CRA's Webpack.
Vite maintains the focus on creating single-page applications (SPAs) with client-side routing/rendering. While SSR is not the primary focus, it's available as an opt-in feature.
Vite's simplicity makes it a seamless migration for those coming from create-react-app (CRA). It allows for easy configuration of TypeScript, ESLint, SVG, and SSR through vite.config.js.
Vite's framework-agnostic approach enables developers to use React without being tied to a specific framework. This encourages a focus on React itself and its core features.
REACT WITH NEXT
Next.js is a mature and popular choice for React developers looking for an opinionated framework environment. It comes with many built-in features, including file-based routing.
Next.js places a strong emphasis on server-side rendering (SSR) as the primary rendering technique. It supports static-site generation (SSG), client-side rendering (CSR), incremental static regeneration (ISR), and React Server Components (RSC).
Next.js, being feature-rich, introduces complexity in terms of choosing and implementing different rendering techniques. However, this complexity can be rewarding for those willing to explore advanced rendering strategies.
REACT WITH ASTRO
Astro is tailored for content-focused websites, offering superior performance and SEO benefits. It leans towards multi-page applications (MPAs) over single-page applications (SPAs), focusing on fast and selective hydration.
Astro is framework-agnostic, allowing the use of its built-in component syntax or other frameworks like React. It excels in scenarios where content production and performance are crucial.
How to Choose
Choose Vite with React for a lightweight and SPA-focused solution, Next.js for a mature framework with various rendering techniques, and Astro with React for content-focused websites.
Quick summary
The React landscape has evolved, introducing new starter kits for building React applications. Each option caters to specific needs and preferences. As a React developer, consider your project's requirements and choose the starter kit that aligns best with your goals.
About the Author
Jigar Patel is a React.js enthusiast and a software developer at JBCodeapp Company. Visit our JBCodeapp to learn more about our work in the React.js ecosystem.
We're Hiring
Are you passionate about React.js development? We're always on the lookout for talented developers to join our team. Check out our careers page for current job openings.