Elias; Component Based Design ; 3 WEEKS

[EliasMlopez99]

Learning 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

[EliasMlopez99]

Week 1

I Need Help With:

i do not required help for the moment. Everything is clear

What went well?

The easy part was to create a react app using the code and then proceed to start experimenting, i am currently doing a react app that displays ice cream flavors although i can't it because i do not feel to show it yet everything is going well thanks to the explanation seen in class

What went less well?

As any other topic the difficult part was to start coding, you always ask yourself, what should i start with? however i found it easy this time because they were not asking us something complex

Lessons Learned

• What's ReactJS and what it's purpose
• I learned how to code jsx files, and how they aren't neither a string nor HTML.
• Now i know how to create a react app using the code 'npx create-react-app my-app' and npm start

Sunday Prep Work

Be sure to have my exercise ready for Sunday and currently checking the material given "introducing JSX " to have a better understanding for the rest module

[danielhalasz]

i am currently doing a react app that displays ice cream flavors although i can't it because i do not feel to show it yet everything is going well thanks to the explanation seen in class

you can also share it in private and we can talk about it

[EliasMlopez99]

Week 1

I Need Help With:

i do not need help, so far i understand all

What went well?

Well this time everything went well from the very beginning, this only requires time.

What went less well?

As Kevin pointed out the problem we all have is the use of {}()[] this can cause problems when programming

Lessons Learned

• What's a hook and how is supposed to be used
• Learned the purpose of the UseState
• I have more confidence programming jsx files

Sunday Prep Work

I will try to add a function to my ice cream shop, to add and delete into a shopping cart (like a list)

thanks beforehand for your feedback. My deepest apologies for the delay, i have had internet problems recently, more so than usual.

Current project, not pushed

i have to admit i have been rebuilding some examples in youtube, though i have re-write the codes myself, and i have made pauses to understand each line written.

[EliasMlopez99]

#week 3

Me

This module was super fun, at the beginning i felt that it would be complicated, although i had some difficulties starting the module. I comprehended everything with the material given plus the explanations and examples seen in class

What was not clear, where did you get stuck?

Nothing, a lot of my classmates did question and most of my doubts were covered

What was clear, what did you master?

• What's react and how to create a new react app
• What are hooks and the use of Usestate
• How to fetch data