Alina: Component based design, week 1- 3

[AlinaTaoRao]

my fork of the exercises repo

Study Plan

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:
• [ ] make your own counter hook
• [x] useState not shared between components
• [x] 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
• [x] child components communicating with parent components
• [x] passing functions as props
• [x] 🐥 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
• [x] 🐔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

[AlinaTaoRao]

Week 1

• [x] I have pushed my progress to ;
• [x] gradie-sign-up-page
• [x] google-home-page
• [x] netflix-login-form
• [x] pricing-plan-cards
• [x] simple-ui-calculator
• [x] twitter-official-login-form

Check-In

I Need Help With:

What went well?

What went less well?

Lessons Learned

• [x] React hooks

  • [x] useState
  • [x] useEffect

• [x] Handling events

Sunday Prep Work

[AlinaTaoRao]

Week 3

• [x] I have pushed my progress to my-movie-list

Check-In

I Need Help With:

What went well?

Deploy React projects to GitHub pages. Now I can review my app by a click.

What went less well?

css. Working on css restudy.

Lessons Learned

react-router-dom

• [x] BrowserRouter
• [x] Routes
• [x] Route
• [x] Link

Sunday Prep Work