Template React project with full TypeScript and SSR support. This project is a compilation of different approaches in React development that allows not only to start a new project quickly, but to learn how it works under the hood. Issue Every new React developer knows that React is a library, not a complete framework. Thus, it provides maximum flexibility. However, a lot of knowledge is required to create a fully functional web application powered with React. That is why there exist such a famous framework as Next.js as well as a tool Create React App (CRA). Despite the advantages that such tools have, there are some cons that their user may face: Lack of understanding how exactly certain solutions work and why they are applied; Lack of flexibility: applied solutions are difficult to fine-tune to your needs; The complexity of the codebase of these tools. As a result, novice React developers have two options for action: Simply apply these tools and frameworks to get the product without going into the nuances of their implementation; Independently collect bit by bit information on how to implement certain functions in React ecosystem. Thus, the goal of this project is to collect in one place all the most common methods of working with the React ecosystem without being tied to a specific framework or tool like CRA. What's Inside Core: React 18+ (Preact 10+ as an option, see comparison below) webpack 5+ (with optional SWC support and SSR or static build) TypeScript (with strict rules, including webpack configuration) SSR: Express (with render to stream option including helmet data and initial state pushing) State: Redux 4+ Router: React Router Code Splitting: Loadable Components (SSR compatible) API: RTK Query Styles: (S)CSS modules (with TypeScript support) Linters: ESLint Stylelint (including rules order) Tests: Jest 29+ React Testing Library Utility for Redux Testing One example of integration test of a component with user event and Redux Other: API request caching (powered by RTK Query) Data prefetching on server side Hot reload (including state, style and server code hot reloading) VSCode support with error highlight and on save fixes Script for fast component creation Optional Service worker and offline status detector Webpack Bundle Analyzer The App This boilerplate includes a simple application with: Several screen/pages with their own routes Local counter Global counter One of the components is dynamically loaded API requests Loading spinner Theme switcher (light and dark) Offline detector Live preview: https://react-proto.onrender.com/ (due to free hosting, a cold start could be slow)
Explore By Topic