Andrii Vlasiuk: Component Based Design, 3 weeks

[andriivam]

Learning Objectives

Priorities: 🥚, 🐣, 🐥, 🐔 (click to learn more)

There is a lot to learn in this repository. If you can't master all the material
at once, that's expected! Anything you don't master now will always be waiting
for you to review when you need it. These 4 emoji's will help you prioritize
your study time and to measure your progress:

• 🥚: Understanding this material is required, it covers the base skills you'll
  need for this module and the next. You do not need to finish all of them but
  should feel comfortable that you could with enough time.
• 🐣: You have started all of these exercises and feel you could complete them
  all if you just had more time. It may not be easy for you but with effort you
  can make it through.
• 🐥: You have studied the examples and started some exercises if you had time.
  You should have a big-picture understanding of these concepts/skills, but may
  not be confident completing the exercises.
• 🐔: These concepts or skills are not necessary but are related to this module.
  If you are finished with 🥚, 🐣 and 🐥 you can use the 🐔 exercises to push
  yourself without getting distracted from the module's main objectives.

---

1. Rendering Static Pages

• recreate an HTML/CSS web page using pure functions components and encapsulated styles

🥚 JSX : you can ...

• Write elements with JSX syntax

2. Rendering Data

• functional React components
• render a static page with provided data
• component props
• splitting components with design in mind

🥚functional React components: you can ...

• Create a React function component (both function definition and arrow function styles)

• Import/export components between files

🥚 Render data: you can

• Use interpolation ({}) to insert JavaScript expressions into JSX
• Render a list using the .map method

🥚 Components and props : you can ...

• create small, reusable components
• how to pass props into React components

🥚 Create reusable components: you can ...

• Nest components within other components
  • one folder with a main component
  • sub-components for your convenience (not part of public contract)

3. Stateful Components

• VDOM
• what is a hook
• useState
• useEffect (any side-effect)
• component lifecycle

🥚VDOM : you ....

• can differenciate the real dom from the virtual dom
• know what reconciliation process is ..

🥚 Hook

• simple, just enough for the flavor
• the react docs "rules of hooks"

🥚 use-state

🥚 use-effect

🥚 component lifecycle

4. Events

• create components that manage internal state and emit custom events
• handling events
• build reusable components that take functions as arguments
• child components communicating with parent components
• passing functions as props

5. Component Structure

• 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

6. Consuming APIs

• fetch and use API data in components
• async useEffect callbacks

7. Frontend Routing

• react router

8. Global State

• 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
  • shared state, not the same as useState
• other state management systems/strategies exist

[andriivam]

Week 1

I Need Help With:

• As i had before problem with separation concept so still struggling with it and base on it. As well didn't get till the end syntax.

What went well?

• I was able to display movie list but cant make it border around it (i meant if movie in the list green and if not red)

What went less well?

• I check the code which our couches did wrote in the class. Basically it's clear but its hard little bit with CSS (children, vertical) when its need to be dynamic like in our home task with the list. Plus i dont have yet in my head how should look completed app in React with more features and components.

Lessons Learned

• I need to work on separation. And i think when i will learn React it will be much more easy and faster to create app

Sunday Prep Work

• I am study React documentation and @danielhalasz sorry again that missed our online session

[danielhalasz]

• I check the code which our couches did wrote in the class. Basically it's clear but its hard little bit with CSS (children, vertical) when its need to be dynamic like in our home task with the list. Plus i dont have yet in my head how should look completed app in React with more features and components.

you can write me on Slack to discuss these in more detail

[andriivam]

@danielhalasz thank you))If i will have some issue i will text you)

[andriivam]

Week 2

I Need Help With:

• The React became more clear but still for me is hard to work there. A lot of new things so i need more time for that

What went well?

• I move on with my movie list (have some issues) but generally its good. As well i made Todo List. I use tutorial to do it (still difficult to it in my own).

What went less well?

• As i mentioned above i created Todo List and i got one problem which i wasn't able to resolve. I was trying to import uuid/v4 to have list of id but in some reasons it won't work. As well i have small issue with Movie List project which for the moment i didn't resolve yet.

Lessons Learned

• Need to practice more with react and learn documentation. For me it's really difficult to understand all functionality of React

Sunday Prep Work

• Fighting with my projects

[andriivam]

Week 3

I Need Help With:

• Basically my main problem is i can understand all parts separately but im getting problems when need to put all together

What went well?

• I understand better hooks and how i can deal with components

What went less well?

• I had some issue with syntax (to much parenthesis) and still can't adapt for React syntax)

Lessons Learned

• I need more practise with React and with some basic stuff to be able write more difficult code

Sunday Prep Work

• Trying to build chat app in react