Maria:component-based-design, 3 weeks

[MMikhailova]

Component-Based Design

Learn to design, plan and build frontend applications using a Component-Based approach. You will explore the React library which is designed to make Component-Based design easy and efficient.

---

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

[MMikhailova]

Week 1/ Week 2

I pushed my progress here

I Need Help With:

What "root" element is?

What went well?

I am getting familiar with React slowly but surely.

I formed a big picture of:

• data rendering
• functional React components
• nested components
• VDOM
• hooks: useState, useEffect, useRef

I've also tried:

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

What went less well?

Splitting components and re-render cycles (all children).

I think three weeks are not enough for this module, at least for me.

Lessons Learned

Putting state at lower levels is efficient

Sunday Prep Work

Keep working on to-do list improvements.

[MMikhailova]

Week 3

• I have pushed my progress to my fork of exercises repo

I Need Help With:

When I store all input values in a local state (at the form level) and then I want to use this data in order to create a new user in my data base, how can I pass the data to useEffect?

Example:

FORM component:

import React, { useState } from 'react'
export default function Form({onSubmit }) {
    const [person, setPerson] = useState({
      username: "",
      email: "",
      password: ""}) 
return (
          <form
            onSubmit={(e) => {
            e.preventDefault();
              onSubmit(person);
            }}
            className="w-25"
            style={{ margin: "auto" }}
          >
            <div className="mb-3 mt-3">
              <label htmlFor="username" className="form-label">
                Username
              </label>
              <input
                type="text"
                value={person.username}
                onChange={(e) => {
                  setPerson({
                    ...person,
                    username: e.target.value,
                  });
                }}
                className="form-control"
                id="username"
                aria-describedby="emailHelp"
                required
              ></input>
            </div>
            ...
            ...
            <button
              type="submit"
              className="btn btn-outline-primary"
            >
              Sign up
            </button>
            </form>

APP parent :

import {  useEffect, useState } from "react";

import Form from "./components/Form.js";

const App = () => {
   
   ...
   ...
    const handleSubmit = (person) => {
        console.log(person)
    }
//I have props from form component with all inputs (person.username, person.email..) 
//How can I apply useEffect(()=>{fetch..},[]) as to send a post query when Person varable is changed.
// It doesn't work if I put Person inside useEffect
    useEffect(() => {
        fetch("http://localhost:1337/api/auth/local/register", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                // 'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: JSON.stringify({
                person.username: account.username,
                person.email: account.email,
                person.password:account.password
            }),
        })
            .then((e) => e.json())
            .then((response) => {
                console.log(response);
                const data = response;
                setNewUser(data);
            })
    }, [ person??])
  

    return (
    <div className="container-fluid">
        ...
        <Form open={openForm} activeForm={activeForm} onSubmit={handleSubmit} />
        ...
    </div>
    );
}
export default App;

What went well?

I am able to use hooks, props, separate components from a parent and pass data among them.

What went less well?

Even when I start with small and clear steps my code gets messy soon..
I feel that I missed something important about useEffect and component lifecycle.

Lessons Learned

A component with some local state is “uncontrolled”.
Uncontrolled components are easier to use within their parents because they require less configuration. But they’re less flexible when you want to coordinate them together.

Sunday Prep Work

Still fighting with my chat-app