∙・◦◎◦・∙

Table Of Content

• 1. Expenses App - an app to track user expenses with a filter by year feature and conduct a simple spending column chart. Those following concepts are used to built this Expense App:
• 2. Styling React Components - this folder is used to practice:
• 3. Debugging React App
  • ▸▸▸ 3.1 - Understanding Error Message
  • ▸▸▸ 3.2 - Debugging and Analyzing React Apps
  • ▸▸▸ 3.3 - Working with break point
  • ▸▸▸ 3.4 - Using React DevTools
• 4. UserData App - the goal of this project is to utilize all the concepts and skills learned from section 1, 2 and 3
• 5. Effects - Reducers - Context
  • ▷ useEffect
  • ▸▸▸ 5.1 - What is "Side Effects" and introducing "useEffect" hook

∙・◦⏤◦・∙

1. Expenses App - an app to track user expenses with a filter by year feature and conduct a simple spending column chart. Those following concepts are used to built this Expense App:

• Props
• Working with Events
• Two-way Blinding
• useState hook
• Lifting State Up
• Rendering Lists & Conditional Content

---

2. Styling React Components - this folder is used to practice:

• CSS Classes Dynamically
• Styled Component Library
• Media Queries
• CSS modules

---

3. Debugging React App

• Understanding Error Message
• Debugging and Analyzing React Apps
• Working with break point
• Using React DevTools

▸▸▸ 3.1 - Understanding Error Message

1. Parsing error: jsx must be wrapped in an enclosing tag

   • Wrap your whole component in 1 root element, use the fragment tag <></>

2. "addGoadsHandler" is not defined: Typo in function name, it should be addGoalsHandler

3. Case sensitive, for example <div> not <Div>, onClick not onclick

▸▸▸ 3.2 - Debugging and Analyzing React Apps

• When there are no error message output on console and the the app compile normally, where would we be looking for bug to debug?
• Look for where is the issue on browser, trace back to which function trigger it, maybe you hard-coded it while developing and forgot to remove it?
• Look for chains of event

▸▸▸ 3.3 - Working with break point

• In devtool, go to source > go to the file that might contains the bug

• Once add breakpoint, run the code again, then use Step Into Next Function Call button

▸▸▸ 3.4 - Using React DevTools

Look at components tree in React DevTools - Components tab

---

4. UserData App - the goal of this project is to utilize all the concepts and skills learned from section 1, 2 and 3

---

5. Effects - Reducers - Context

• Working with (Side) Effects
• Managing more Complex State with Reducers
• Managing App-Wide or Component-Wide State with Context

▷ useEffect

▸▸▸ 5.1 - What is "Side Effects" and introducing "useEffect" hook

Side Effects are:

• Store data in Browser Storage
• Send HTTP requests to Backend Servers, Fetch Data
• Set and Manage Timers, setInterval, setTimeout
• ...

=> These tasks must happen outside of the normal component evaluation and render cycle - especially they might block/delay rendering (eg. HTTP requests)

useEffect (() =>{ ... }, [ dependencies array ]);