Cristobal Lopez: Component Based Design, 3 weeks

[alexander-lopez-s]

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

[alexander-lopez-s]

Week 1

I Need Help With:

• React is a totally new framework for me, so, every piece of code I want to write, I have to first Google for help.

• Props is not something I have so clear.

• I need help separating concerns, sometimes I cannot find the logic to break down the code into components.

What went well?

• I was able to display a list of elements using the map() method in React.
  

• I understand that the name of our function component starts always with a Capital Letter.

• I was able to make a count of clicks using React. The objective was, getting familiar with the new syntaxes and trying to understand the what the role of every .js file is.

What went less well?

• I am not sure how the render() occurs. Does the program render the code for every component that we create? Or does the program render everything at once?

• What is the name of the RFCE snippet to install it in VS? I cannot find it in the extensions library.

Lessons Learned

• I know how to display HTML elements using React.

• I can iterate between a list of elements using map() and printing those elements in the DOM.

Sunday Prep Work

• I will keep studying my React course at SoloLearn and try to dive more into this framework.

[danielhalasz]

• What is the name of the RFCE snippet to install it in VS? I cannot find it in the extensions library.

what is RFCE? personally, I have one React extension in VSCode, called:
ES7+ React/Redux/React-Native snippets

[alexander-lopez-s]

Week 2

I Need Help With:

• I do not know what is the semantic order that we should follow when writing code in React.

• Writing inline CSS vrs writing everything in a separate file. I did not understand which one is more beneficial.

What went well?

• I am confident separating concerns now, thanks to the coaches and to React tutorials.

• I was able to play around with useState and useEffect and I am able to use them in basic functions.

• I created a lit of doctors and a search bar to filter them to practice useState.

• I made a blog section in my hospital website and retrieved random data from an API endpoint using fetch inside React. The information needs to be formatted but most important, my function worked.

Screen.Recording.2022-10-06.at.20.25.34.mov

What went less well?

• The hooks are a bit tricky, I must say I need to practice more to master them.

Lessons Learned

• I am clear that hooks update specific HTML elements to avoid rendering the whole website.

• I can iterate between a list of elements using map() and printing those elements in the DOM.

Sunday Prep Work

• I am currently working on the to-do-list app. I hope I can have it ready by Sunday.

[alexander-lopez-s]

Week 3

I Need Help With:

• I am seeing this piece of code everywhere but I do not understand it. Is that old React code that I should not worry about?

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• I do not understand the use of useEffect no matter how many tutorials I watch.

• What is the difference between a JSX file and a JS file? I have written the same code in both extensions and it works exactly equally.

What went well?

• I have mastered props finally, I have practiced a lot this new concept and now I can use them without any problems (at least basic props).

• I was able to create this little data model with props.
  

• I also fetched a list of Pokemon names from https://pokeapi.co/
  

• I was able to mix Strapi and React in the same app and finally, fetched information from my own API.

What went less well?

• I do not know how to fetch images from Strapi without having to copy the images folder to React. I posted the question in the help needed channel.

Lessons Learned

• A prop cannot be modified directly and that is why we need useState hook.

Sunday Prep Work

• I will keep studying my React course at SoloLearn and try to dive more into this framework.