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

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/