This is just for myself trying to build a demo project following React best practices with different tools

1. yarn
2. yarn start

27/02/2018 - Enable CSS Modules by yarn eject

28/02/2018 - Add prop-types modules for prop validation

15/03/2018 - Improve performance by preventing unnecessary rendering using shouldComponentUpdate

04/04/2018 - Integrate axios with Google Firebase

06/04/2018 - Global error handler using HOC (higher order component)

11/04/2018 - Prevent memory leak by unmounting unnecessary instances in componentWillUnmount life cycle

15/04/2018 - Integrate React router dom for multiple page routing

21/04/2018 - Add Contact Form, validate manually and save submitted data to Firebase db

04/05/2018 - Add Redux and React-Redux store and reducer

07/05/2018 - Add Enzyme and adapter with Jest. Unit test integration

12/05/2018 - Add redux thunk middleware for REST API call from redux

13/05/2018 - Improve reducers by separting action, action types, multiple reducers for specific cases, satisfy test cases

1. Component tree / Component Structure
2. Application State (Data)
3. Dumb / stateless component vs stateful Container

App | |___ Layout | |__ Toolbar | Drawer Toggle | Logo | Nav item |__ SideDrawer | Drawer Toggle | Logo | Nav item | |__ Backdrop | |__ {props.children} | |__ Different Pages Buger Builder | |__ Build Controls | Ingredient add / remove control | Ingredient add / remove control | * | OrderButton |__ Burger | Ingredient | Ingredient | * |__ Modal {props.children} 

Basic State for Burger builder page

Ingredients | |__ 1: meat, 2: cheese etc Purchased: true / false TotalPrice: 12.45 

Burger Builder is a stateful component Rest of the component can be dumb / state less component

This project was bootstrapped with Create React App.