01-Project.md

Project

Project stack description:

• React as frontend app framework
• Redux as state container
• Webpack as build tool
• SCSS as CSS extension language
• BEM methodology for style organization

File structure:

Magento 2 theme related folder and files:

Because this application is compiled to a valid Magento 2 theme, it must follow Magento theme structure.

?> Note: initially Magento_Theme folder is empty. You have to compile the application (please read instructions for our bundler). Or direct to (Quick start instructions)[./05-Quick-Start.md].

• etc – Magento 2 Theme dir configuration
• Magento_Theme – Magento 2 Theme dir Compiled assets
  • templates
    • root.phtml – _Magento 2 Theme root template Compiled from src/public/index.html
  • web
    • assets – Compiled from src/public/assets
    • *.(js|css) – Compiled JS and CSS assets
• media –Magento 2 Theme dir For theme preview picture in admin
• theme.xml - Magento 2 Theme file Theme registration file
• registration.php - Magento 2 Theme file Theme registration file

React Theme

• node_modules – Installed NodeJS dependencies (.gitignore)
• src – _ReactJS Theme_ Source files
  • app – Application root
    • index.js – Application entry-point
    • util – Application wise (utilities) helpers
      • UtilGroupName – Utility grouped by functional
        • *.js – Utility name
        • index.js – Webpack alias file
      • type – React PropTypes declaration
        • PropTypeGroup.js – React PropType declaration grouped by source
      • query – Queries for GraphQL requests
        • QueryName.query.js – Query source file
        • index.js – Webpack alias file – contains collection of queries
      • component – ReactJS components
        • ComponentName – Component root
          • ComponentName.component.js – HTML template and render related logic
          • ComponentName.container.js – Component business logic & Redux connection
          • ComponentName.test.js – Component unit tests
          • ComponentName.style.scss – Component styles
          • index.js – Webpack alias file - exports Container (if exists), otherwise exports Component.
      • route – ReactJS route collection
        • RouteName – Route root
          • RouteName.js – Route related business logic
          • RouteName.scss – Route specific styles
          • index.js – Webpack alias file
        • index.js – Router initialization
      • store – Redux store configuration
        • StoreModifierName – Redux modifier root
          • StoreModifierName.reducer.js – Modifier action handler
          • StoreModifierName.dispatcher.js – Modifier action dispatcher (for async executions)
          • StoreModifierName.action.js – Modifier action declaration
          • index.js – Alias file - exports Reducer, Dispatcher, Action.
        • index.js – Reducer combination, Redux initialization
      • style – Application wise styles read more about styles
        • abstract – Virtual SASS functions, mixins (non compilable) will be injected into every component style
          • _abstract.scss – File which imports all abstract functions in right order
          • _*.scss – Abstract functional implementations
        • base – Styles to native HTML5 elements
          • _reset.scss – CSS reset
          • _root.scss – :root styles (CSS custom variables declaration)
          • _*.scss – Native element style
  • config – Project configuration
  • public – Files shared as is.
    • static – Static assets
    • index.html – Template for root.phtml.

How to start?

Read the quick introduction to the project.

Coding standards

This project has defined coding standard.

Debugging

Learn more about debugging in the project here