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 и на React с Vite. Так можно увидеть одну и ту же архитектуру, применённую к разным инструментам.
Почему автор создал это, а не просто выбрал готовый фреймворк?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