bulletproof-react README

The project's README from github.com/alan2207/bulletproof-react. As one markdown file: README.md.

Bulletproof React Logo

Bulletproof React 🛡️ ⚛️

MIT License Next.js App CI Next.js Pages CI React Vite CI

A simple, scalable, and powerful architecture for building production ready React applications.

Introduction

React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that developers can follow, it often leads to a messy, inconsistent, and over-complicated codebase.

This repo attempts to present a way of creating React applications using some of the best tools in the ecosystem with a good project structure that scales very well. Based on my experience working with a lot of different codebases, this architecture turns out to be the most effective.

The goal here is to serve as a collection of resources and best practices when developing React applications. It is supposed to showcase solving most of the real-world problems of an application in a practical way and help developers write better applications.

Feel free to explore the sample app codebase to get the most value out of the repo.

🤝 Looking for help implementing these patterns at your company? Get in touch

What makes a React application "bulletproof"?

This repo doesn't aim to be a silver bullet for all React applications as there are many different use cases, but it tries to provide a solid foundation for building applications based on the following principles:

Disclaimer:

This is not supposed to be a template, boilerplate or a framework. It is an opinionated guide that shows how to do some things in a certain way. You are not forced to do everything exactly as it is shown here, decide what works best for you and your team and stay consistent with your style.

To get most out of it, do not get limited by the technologies used in this sample app, but rather focus on the principles and the concepts that are being presented here. The tools and libraries used here are just a suggestion, you can always replace them with something that fits your needs better. Sometimes, your project might require a slightly different approach, and that's totally fine.

Table Of Contents:

Contributing

Contributions are always welcome! If you have any ideas, suggestions, fixes, feel free to contribute. You can do that by going through the following steps:

  1. Clone this repo
  2. Create a branch: git checkout -b your-feature
  3. Execute the yarn prepare script.
  4. Make some changes
  5. Test your changes
  6. Push your branch and open a Pull Request

License

MIT

bulletproof-react (alan2207/bulletproof-react)

Searching Database…

36K ·GitHub
Bulletproof-react
这是什么？一份面向生产环境的 React 应用参考架构与最佳实践指南，通过一个示例应用展示如何组织、测试、保障安全并扩展真实项目的代码库。
这是可以克隆下来在此基础上开发的脚手架或起始模板吗？不是。作者明确说明，它不是模板、脚手架或框架。它是一份有主见的指南，展示解决常见问题的一种方式，适合参考和改造，而不是照搬使用。
如何在实践中探索这些模式？克隆仓库并运行 'yarn prepare' 脚本，它会为位于 apps/nextjs-app、apps/nextjs-pages 和 apps/react-vite 下的三个示例应用安装依赖，方便你运行并查看每一个应用。
深入之前，我需要先了解 React 和 TypeScript 吗？需要。项目及其示例应用完全使用 TypeScript 编写，并默认你已熟悉 React；包管理器使用 yarn。
我应该完全照搬这套架构，不做任何例外吗？不必。作者强调它并非适用于所有场景的银弹；请把其中的具体工具和库当作可替换的建议，并保持与你团队行之有效的风格一致。
这份指南实际涵盖哪些主题？内容依次包括项目结构、组件与样式、API 层、状态管理、测试、错误处理、安全、性能和部署。每个主题都是独立的章节，并有示例应用中的代码作为支撑。
示例应用展示了哪些 React 搭建方式？提供了同一示例应用的三个版本：Next.js App Router 应用、Next.js Pages Router 应用，以及基于 Vite 的 React 应用，让你看到同一套架构如何应用于不同的工具链。
作者为什么要自己做这个，而不是直接选一个框架？React 给予了极大的自由，却没有规定架构，因此代码库在团队之间很容易变得混乱、不一致。本项目汇集了作者在众多真实代码库中积累下来、他认为最有效的模式。
What are similar projects?blog, domain-driven-hexagon, go-patterns, awesome-ddd, professional-programming, nodebestpractices, awesome-software-architecture, go-clean-arch
Which topics is it in?software-architecture, design-patterns, state-management, deployment, architecture, best-practices, monorepo, vite, nextjs, testing, guide, web-development
Creator
alan2207
Size
2.2 MB
Stars
36K
Updated
CommitMay 14
Age
5y
Commits · 90 Days