Daniel: Component based design. Weeks 27-29

[denrique-alvarez]

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
• [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
• [ ] 🐔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

[denrique-alvarez]

Week 27

Exercises completed:

• Google Homepage
• Gradie Signup Page
• Netflix Login Form
• Pricing Plan Cards
• Simple UI Calculator
• Twitter Official Login Form

Check-In

I Need Help With:

Props and data rendering. I am now quite confident yet when it comes to passing pure JS and data to my JSX components.

What went well?

I am currently watching some crash-courses and tutorials on React and that's helping get a better understanding of it. The exercises were also good to practice some basic concepts and mechanics related to working with React althoug they were all made in a very simple way (No rendering, no JS inside JSX).

What went less well?

Still need a lot of practice with props and thinking of how to re-use components.

Lessons Learned

• Basic React setup.
• CLI commands to work with React.
• Practice creating local repos and connecting them to GitHub.
• File and folder structure of a React project.

Sunday Prep Work

Try to finish watching crash-courses and tutorials. If I have enough time, trying to improve my solutions to the exercises with whatever I learned from the tutorials.

[denrique-alvarez]

Week 28

Exercises completed:

• Google Homepage
• Gradie Signup Page
• Netflix Login Form
• Pricing Plan Cards
• Simple UI Calculator
• Twitter Official Login Form

Check-In

I Need Help With:

Just need to take time.

What went well?

I decided to take a step back and spend some time going over tutorials and crash courses more than once to solidify my current knowledge, so feeling a bit behind but still think it's going to be better in the long run.

What went less well?

Still struggling with useState and useEffect functions.

Lessons Learned

• Better overall understanding of React.

Sunday Prep Work

Try to improve what I did for the exercises.