React Architecture

00-react-architecture.md

React Architecture

Starter

• Create React App
• React
• Webpack

Preprocessors

• TypeScript
• Sass
• TSX

CSS architecture

• CSS modules
• Sass guidelines
• Atomic design

CSS layout

• Flexbox
• CSS Grid

UI Components

• Library: Material UI
• Explorer: Storybook

JavaScript standard library

• Utility library: Lodash
• Async: RxJS
• Polyfills: CoreJS
• RxJS

Router

• React router

State

• State management: Redux
• State mutation: Immer

Ajax

• RxJS.ajax
• Interceptors
• Redux Observable

Business rules

• Custom Hooks

Code quality

• Editorconfig
• Code formatter: Prettier
• Linter: ESLint
• Git hooks: Husky

Unit testing

• Jest
• Marble testing

Backend

• Rest API: Express
• Database: LowDB
• API documentation: Swagger

CI / CD

• Gitflow
• Docker
• Github pages
• Travis CI / Circle CI / Github actions

01-folder-structure.md

React Architecture - Folder Structure

v1 - Create React App

• https://create-react-app.dev/docs/folder-structure
• TypeScript
• VS Code settings
• EditorConfig
• Storybook

my-app/
 |- .storybook/
 |- .vscode/
 |- node_modules/
 |- public/
 |   |- index.html
 |   |- favicon.ico
 |- src/
 |   |- stories/
 |   |- App.module.scss
 |   |- App.test.tsx
 |   |- App.tsx
 |   |- index.scss
 |   |- index.tsx
 |   |- react-app-env.d.ts
 |   |- setupTests.ts
 |- .editorconfig
 |- .gitignore
 |- package.json
 |- package-lock.json
 |- README.md
 |- tsconfig.json

v2 - Grouping by features or routes

• https://es.reactjs.org/docs/faq-structure.html
• https://dev.to/pcofilada/simple-react-folder-structure-31lj
• https://medium.com/@ger86/reactjs-the-folder-structure-i-feel-most-comfortable-with-694edaed0065

my-app/
 |- .storybook/
 |- .vscode/
 |- build/
 |- node_modules/
 |- public/
 |   |- index.html
 |   |- favicon.ico
 |- src/
 |   |- core/
 |   |   |- components/
 |   |   |   |- button/
 |   |   |   |   |- button.module.scss
 |   |   |   |   |- button.stories.scss
 |   |   |   |   |- button.tsx
 |   |   |   |- text-input/
 |   |- layout/
 |   |   |- components/
 |   |   |   |- header/
 |   |   |   |   |- header.module.scss
 |   |   |   |   |- header.stories.scss
 |   |   |   |   |- header.tsx
 |   |   |   |- sidebar/
 |   |   |- layout.tsx
 |   |- router/
 |   |   |- views/
 |   |   |   |- landing/
 |   |   |   |   |- landing.module.scss
 |   |   |   |   |- landing.stories.scss
 |   |   |   |   |- landing.tsx
 |   |   |   |- page-not-found/
 |   |   |- router.tsx
 |   |- routes/
 |   |   |- <route>/
 |   |   |   |- components/
 |   |   |   |- hooks/
 |   |   |   |- views/
 |   |   |   |- <route>.api.ts
 |   |   |   |- <route>.model.ts
 |   |   |   |- <route>.router.tsx
 |   |- styles/
 |   |   |- reset.scss
 |   |   |- theme.scss
 |   |- app.tsx
 |   |- index.scss
 |   |- index.tsx
 |   |- react-app-env.d.ts
 |   |- setupTests.ts
 |- .editorconfig
 |- .gitignore
 |- package.json
 |- package-lock.json
 |- README.md
 |- tsconfig.json

Id generation (client vs server):

• https://stackoverflow.com/questions/59966008/generating-ids-server-vs-client-side

React + TypeScript

Patterns

• https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets

Type aliases vs interfaces:

• https://medium.com/@koss_lebedev/type-aliases-vs-interfaces-in-typescript-based-react-apps-e77c9a1d5fd0

React services:

• https://medium.com/the-guild/injectable-services-in-react-de0136b6d476

State management

Custom hook for shared state

• https://medium.com/javascript-in-plain-english/state-management-with-react-hooks-no-redux-or-context-api-8b3035ceecf8
• https://medium.com/javascript-in-plain-english/react-context-patterns-with-usecontext-hook-62085b90c7eb

useReducer+ useContext

• https://medium.com/@seantheurgel/react-hooks-as-state-management-usecontext-useeffect-usereducer-a75472a862fe
• https://hswolff.com/blog/how-to-usecontext-with-usereducer/
• https://swizec.com/blog/usereducer-usecontext-for-easy-global-state-without-libraries/
• https://blog.bitsrc.io/build-our-own-react-redux-using-usereducer-and-usecontext-hooks-a5574b526475
• https://blog.logrocket.com/use-hooks-and-context-not-react-and-redux/
• Unstated
• Unstated Next

Meiosis pattern

• Meiosis
• https://medium.com/@foxdonut00/you-dont-need-redux-mobx-rxjs-cerebral-6a735b150a02

Redux

• Redux
• Redux Sauce
• Rematch

MobX

• MobX

Fetch data with custom hooks:

• https://reactjs.org/docs/hooks-custom.html
• https://www.smashingmagazine.com/2020/07/custom-react-hook-fetch-cache-data/

Absolute imports:

• https://create-react-app.dev/docs/importing-a-component/#absolute-imports

Event handlers naming:

• https://jaketrent.com/post/naming-event-handlers-react/

Create React App

npx create-react-app my-app

CLI options

• --use-npm: CRA uses yarn by default
• --typescript

Recipes

• https://www.telerik.com/blogs/5-things-i-didnt-know-about-create-react-app
• https://medium.com/curated-by-versett/dont-eject-your-create-react-app-b123c5247741
• https://medium.com/@vaniusharamrez/how-to-create-react-app-with-github-pages-deploy-the-easiest-way-in-9-steps-28ac41a8ef77

Conditional rendering:

• https://reactjs.org/docs/conditional-rendering.html
• https://medium.com/@cowi4030/optimizing-conditional-rendering-in-react-3fee6b197a20
• https://hackernoon.com/conditional-rendering-on-react-57a864c2d04d
• https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications
• https://blog.logrocket.com/conditional-rendering-in-react-c6b0e5af381e/

Input with regex:

• https://dev.to/anilsingh/allow-only-numbers-in-input-in-react-2m71
• https://github.com/pfraces-labs/react-input-pattern

Hooks vs HOCs:

• https://medium.com/javascript-scene/do-react-hooks-replace-higher-order-components-hocs-7ae4a08b7b58

Form libraries:

• Redux Forms
• Formik
  • Yup
• React Hook Form
• React Final Form
  • Final Form
• React JSON Schema Forms
  • JSON Forms

Comparison:

• https://blog.logrocket.com/react-hook-form-vs-formik-a-technical-and-performance-comparison/