Ashenafi: Component Based Design, 3 chapters

[ashenafykebede]

progress

• [x] 🥚Write elements with JSX syntax

🥚functional React components: you can ...

• [x] Create a React function component (both function definition and arrow function styles)
• [x] Import/export components between files 🥚 Render data: you can
• [x] Use interpolation ({}) to insert JavaScript expressions into JSX
• [x] Render a list using the .map method 🥚 Components and props : you can ...
• [x] create a reusable pieces of components
• [x] how to pass props into React components 🥚 Create reusable components: you can ...
• [x] Nest components within other components
  • one folder with a main component
  • sub-components for your convenience (not part of public contract)
• 🐣deeper look in hooks:
• [x] make your own counter hook
• [x] useState not shared between components
• [ ] useEffect (any side-effect)
• 🐣 create components that manage internal state and emit custom events
• [x] handling events
• [x] build reusable components that take functions as arguments
• [ ] child components communicating with parent components
• [x] passing functions as props
• [ ] 🐥 splitting components with logic in mind
  • why create dumb components when hooks can be anywhere?
• [ ] re-render cycles (all children)
  • why putting state at lower levels is efficient
  • why not to use everything in global state
• [ ] 🐥 fetch and use API data in components
• [ ] async useEffect callbacks
• [ ] 🐔react router
• 🐔being careful about what you put in useContext
  • [ ] only move data to context when it's necessary
  • [ ] store and manage global app state shared between components
• 🐔useContext
  • [ ] other state management systems/strategies exist

[ashenafykebede]

Check-in

Chapter 1 : Rendering Data

I have pushed my progresses to the exercise repos Google Twitter Netflix Pricing

I Need Help With:

  -

What went well?

• The fact that react is a JavaScript library and uses JS syntax makes it relatively easy to understand the concepts.
• I have a good practice to the basic concepts by working on the exercises.

What went less well?

 -

Lessons Learned

• JSX syntax
• components
• props
• creating reusable components
• nesting components
• using .map to render lists

Sunday Prep Work

• reading about stateful Components

[ashenafykebede]

Check-in

Chapter 2: Stateful Components and Events

I have pushed my progresses to the exercise repo Movie list DEMO

I Need Help With:

  -

What went well?

• The lecture class at beacon was very helpful
• I like the flow of concepts in the modules from basic JavaScript to react, the the JS library

What went less well?

 -

Lessons Learned

• React hooks
  • useState
  • useEffect
• Handling events

Sunday Prep Work

• working on the movie list deliverable