Better ways to create a React app

Introduction:

As a newcomer to web development, learning React.js is an exciting endeavor. However, the recommended approach of using Create React App (CRA) might not always be the best choice. In this article, we will explore the reasons behind the growing concerns about CRA and discuss seven alternative ways to create a React app without relying on it. By understanding the trade-offs and strengths of these alternatives, you can choose the optimal tool for your specific application needs.

npx create-react-app my-app
cd my-app
npm start

1. Instant Development Environments: StackBlitz and CodeSandbox For experimentation and initial learning, web-based tools like StackBlitz and CodeSandbox provide instant development environments. These tools allow you to run React in the browser without setting up dependencies on your system. With just a click, you can start building a React app. These environments are easily shareable and eliminate the hassle of managing complex setups, making them ideal for learning and prototyping.

2. Vite: A Fast and Modern Build Tool Vite has gained popularity as a faster alternative to CRA. It leverages native ES modules and ESBuild for on-demand building, resulting in improved development speed. Additionally, Vite offers a TypeScript template out of the box and supports modern libraries. While it primarily focuses on single-page applications, Vite also provides a low-level API for server rendering, making it suitable for advanced setups.

npm create vite@latest
or
npm create vite@latest my-vue-app -- --template vue

yarn create vite

3. NX: Scalable React Apps and More NX, known for building monorepos, can also create standalone React apps. It offers flexibility by allowing you to choose your preferred bundler, such as Vite or Webpack. NX excels at scaling complexity with features like task caching and cloud-based caching for distributed teams. It also includes useful tools like generators for adding dependencies and visualizing code relationships. NX can be used with other React frameworks as well.

npx create-nx-workspace@latest
npx nx serve first-project

4. Next.js: React Rendering Framework for Multi-Page Applications Next.js is a popular React rendering framework that specializes in building multi-page applications. It provides a special directory structure for routing and supports server-side rendering for improved performance and search engine optimization. Next.js also features react-server-components for server-side data fetching and offers various optimization capabilities. Remix is another similar framework worth considering

We suggest using create-next-app to effortlessly set up a new Next.js app. This tool automates the entire process for you. To create your project, simply execute the following command:

npx create-next-app@latest

On installation, you’ll see the following prompts:

Choose as per your needs

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

5. Gatsby: GraphQL-Powered React Framework Gatsby, recently acquired by Netlify, is recognized for building content-heavy statically generated sites. With its focus on GraphQL, Gatsby provides a data layer for your application through its Walhalla content hub. It seamlessly integrates with various data sources and CMS platforms, making it an excellent choice for migrating content-driven apps to React. Gatsby supports server-side rendering, similar to Next.js and Remix.

To begin your journey with Gatsby, follow these steps:

Create a new site by using the following command:

npm init gatsby

During this process, you will be prompted to provide a site title and choose a name for the project’s directory. Additionally, you’ll have the opportunity to select your preferred language (JavaScript or TypeScript), CMS, styling tools, and other desired features.

2. Once the necessary files are downloaded, you’ll receive instructions on how to access your site and run it locally. The CLI will create a new folder with the name you specified in step 1.

3. Navigate to the newly created directory by executing the command:

cd my-gatsby-site

4. Start the local development server with the following command:

cd my-gatsby-site

Gatsby will initiate a hot-reloading development environment, which can be accessed by default at http://localhost:8000.

6.Astro: Highly Performant React Framework for Static Content Astro stands out by enabling React, Vue, and Solid to coexist in a single project. It emphasizes static content rendering, allowing you to leverage its templating language for most of the static content. This architecture results in significant performance gains and faster website loading times. Astro 2.0 introduces content collections, enhancing scalability for content-heavy websites

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

THE CONCLUSION

While Create React App has been a widely recommended starting point for React development, it’s important to consider alternative tools based on your project’s requirements. In this article, we explored seven viable alternatives, including instant development environments, Vite, NX, Next.js, Gatsby, and Astro. Each tool offers distinct benefits and trade-offs. By evaluating these options, you can select the most suitable tool to kickstart your React journey and build robust applications in the modern web ecosystem.