TanStack Offers A Fantastic Replacement For Create React App

Key Concepts

• Create React App (CRA) deprecation
• create-ts-router-app (CTA) as a replacement
• Vite as a build tool
• TanStack Router for routing
• Code-level routing
• File-based routing
• TanStack Start for server-side rendering, API routes, and static site generation
• Loader model for data fetching
• TanStack Store for state management
• Vite Test for testing

1. Introduction: CRA Deprecation and the Need for a Replacement

• Create React App (CRA) is being deprecated, prompting the need for a modern alternative for building React applications.
• CRA is considered an "architectural dead end" for larger Single Page Applications (SPAs) beyond simple bootstrapping.
• TanStack offers create-ts-router-app (CTA) as a replacement, providing a similar starting point but with Vite and TanStack Router under the hood.

2. Familiarizing with Create React App (CRA)

• Demonstration of creating a CRA application using npx create-react-app my-cra-app.
• Starting the application with npm start.
• Highlighting the ease of making changes to app.js and seeing immediate updates.
• Emphasizing CRA's role as a beginner-friendly tool for learning React.

3. Introducing create-ts-router-app (CTA)

• Using create-ts-router-app as a direct replacement for CRA.
• Command: npm create-ts-router-app my-cta-app.
• Starting the application with npm start.
• Demonstrating live reloading and easy modifications, similar to CRA.
• CTA leverages Vite and TanStack Router for improved performance and routing capabilities.

4. Code-Level Routing with CTA

• CTA supports code-level routing using TanStack Router.
• Example: Creating an "about" route by modifying the main.tsx file.
• Adding a new route definition within the routing children array.
• Navigating to the new route (/about) to display the corresponding component.
• This demonstrates the ease of setting up basic routing within the application.

5. Transitioning to File-Based Routing

• To create a file-based routing application, use the command: npm create-ts-router-app my-cta-frr --template file-router.
• This sets up the project with a file-based routing structure.
• Routes are defined by creating files within the src/routes directory.
• Example: Modifying src/routes/index.tsx to change the homepage content.
• Creating a new route by adding a new file in the src/routes directory.
• File-based routing enables automatic bundle splitting.

6. Moving to Server-Side Rendering and API Routes with TanStack Start

• For more advanced features like API routes, server-side rendering (SSR), and static site generation (SSG), TanStack Start is recommended.
• Transitioning from file-based routing to TanStack Start requires adding a dependency and a few configuration files.
• This approach avoids the "architectural dead end" associated with ejecting from CRA.

7. Additional Features and Configuration

• The generated project includes an extensive README with information on testing, styling, routing, and data fetching.
• Vite Test is integrated for testing.
• Styling can be configured using CSS or Tailwind CSS (specified during project initialization).
• The README provides guidance on adding routes, links, and layouts.

8. Data Fetching with the Loader Model and TanStack Query

• CTA supports the loader model for data fetching, ensuring data is loaded before the route is rendered.
• Loader functions are defined for each route, and the data is accessed within the component using useLoaderData.
• This prevents "flash of content" issues.
• TanStack Query can also be used for data fetching, with setup instructions provided in the README.

9. State Management with TanStack Store

• TanStack Store is a simple and robust state management solution.
• Installation and usage instructions are available in the README, with a link to the TanStack Store documentation.

10. Conclusion

• create-ts-router-app offers a smooth transition from CRA, providing a modern and flexible platform for building React applications.
• It avoids the limitations of CRA and provides a clear path for scaling applications with features like file-based routing, server-side rendering, and API routes.
• The comprehensive documentation and integrated tools make it a compelling choice for React developers.