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:
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
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:
4. Start the local development server with the following command:
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
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.