Template repository for React Monorepo projects Initially built by following: Advanced React for Enterprise Applications: react for Senior Engineers (udemy) Improved by following:
- Monorepo's - A Beginner's Guide (udemy)
- The Complete Github Actions & Workflows Guide (udemy)
- Master the Core Concepts of React and Storybook (udemy)
- React & TypeScript - The Practical Guide
The project comprises multiple packages as sub-projects, with dependencies between them. The monorepo structure is managed using Yarn and Lerna. The following sections provide a detailed breakdown of the project structure, technologies used, and the configuration of various tools and libraries to ensure consistency, quality, and automated workflows across the project.
- Monorepo Management: Yarn and Lerna are used to manage the monorepo, ensuring consistent dependency versions and streamlined project scripts across packages.
- Atomic Design: Used to organize components into atoms, molecules, organisms, templates, and pages.
- Node.js: 18.17.1
- Yarn: 1.22.10
- Lerna: 7.3.0
- React Components Library (frontend/components/react-cmp-lib): A library of reusable React components with a custom build system using Rollup.
- Design System Playground (frontend/ds-playgrounds/*): A playground for testing components, with a custom build using Parcel.
- Foundation (shared/foundation): A collection of utilities written in TypeScript, packaged separately.
- Storybook (frontend/ds-storybook): A separate package for documenting and visually testing components in isolation.
- Living Style Guide - Generic Styles (frontend/lsg-design-system): A collections of SCSS variables, mixins, and functions, and component styles packaged separately.
- Front-end: React.js, TypeScript, SCSS
- React.js - for building user interfaces and component-based architecture.
- TypeScript - for extended JavaScript functionality, string type checking, and code consistency - catch and fix type related error before runtime - sometimes that comes with the expense of having to define complex types.
- Testing: Jest for unit testing, Storybook and Chromatic for visual testing.
- Linting and Formatting: Prettier, ESLint, and Stylelint.
- Version Control: Git, with Husky for git hooks, Commit Lint, and Commitzen for structured commit messages.
- Component Development: Storybook for developing and documenting components in an isolated environment.
- Build Systems: Custom build setups using Rollup for the component library and Parcel for the playground.
- GitHub Actions: Set up to automate testing, building, and deployment workflows.
- Chromatic Deployment: Automatic deployment to Chromatic for visual regression testing and Storybook hosting.
- Unit Testing: Jest is used for unit testing components and utility functions.
- Visual Testing: Storybook and Chromatic are used for visual testing of components.
- Linting and Formatting: Prettier, ESLint, and Stylelint are configured to ensure code consistency and quality.
- Git Hooks: Husky is configured to enforce linting and testing before commits and pushes.
- Commit Conventions: Commit Lint and Commitzen are used to ensure structured and meaningful commit messages.
npm install -g yarn
- install yarn globallyyarn install
- install dependenciesyarn build:dev
- build all packages for developmentyarn build:prod
- build all packages for productionyarn test
- run all testsyarn lint
- run all lintersyarn formats:check
- check all formatsyarn formats:write
- fix all formatsyarn start
- start and watch all packages in development modeyarn nx graph
- show dependency graph using NXyarn commit
- commit changes using Commitizenyarn lerna version
- bump version of all packages using Lerna
- Organized - fixed code structure
- No specificity issues
- Atomic Design principles applied
- Easy to understand (comments, variables, etc)
- Reusable across teams / projects
- implement semantic release
- refactor CI build for better performance (use CI for better performance)
- lint, formats and test
- - run locally on committing for development branches
- - run in CI for master branch and on pull requests to release branches
- visual regression testing run locally on feature and bug branches and remote on develop branch
- lint, formats and test
on:
yarn lerna publish
Logs:
lerna notice cli v7.3.0
lerna info versioning independent
lerna WARN Yarn's registry proxy is broken, replacing with public npm registry
lerna WARN If you don't have an npm token, you should exit and run `npm login`
lerna info Assuming all packages changed
... some logs ...
lerna WARN notice Package failed to publish: @wbk--reactjs-playground--typescript/shared-foundation
lerna ERR! E404 Not found
lerna ERR! errno "undefined" is not a valid exit code - exiting with code 1
lerna WARN notice Package failed to publish: @wbk--reactjs-playground--typescript/lsg
lerna ERR! E404 Not found
lerna ERR! errno "undefined" is not a valid exit code - exiting with code 1
error Command failed with exit code 1.
Both versions of your CartContextProvider
in React serve to manage a shopping cart's state and provide that state along with some functions (addItem
, updateItemQuantity
) to components in your application. However, they use different state management approaches, each with its own advantages and trade-offs.
- State Management: This version uses the
useState
hook for state management. It's straightforward and easy to understand, especially for simpler state logic. - State Updating: It directly manipulates the state based on the given actions (adding an item, updating quantity). This is more intuitive for simple state updates.
- Best Suited For: Smaller applications or components where state changes are minimal and not complex.
- State Management: This version uses the
useReducer
hook, which is more suited for complex state logic that involves multiple sub-values or when the next state depends on the previous one. - State Updating: Actions and reducers handle state updates, making it more structured and predictable, especially beneficial for complex state logic.
- Dispatch Method: Actions are dispatched rather than setting the state directly. This is helpful for debugging and logging state changes.
- Best Suited For: Larger applications or components with complex state interactions or when the state logic might grow in complexity over time.
- Complexity and Scalability:
useReducer
provides more scalability and is better for managing complex state logic.useState
is simpler and more straightforward for basic state management. - Predictability:
useReducer
makes state updates more predictable and organized, which is advantageous in large applications. - Debugging: With
useReducer
, it's easier to track dispatched actions, which can aid in debugging.
- If your application's state logic is simple and unlikely to become complex, the
useState
approach might be more suitable. - If you anticipate more complex interactions or the state logic becoming more intricate over time, or if you prefer a more structured approach to state management,
useReducer
would be the better choice.
Both are valid in the React ecosystem, and the choice largely depends on the specific needs and complexity of your application.