DEV Community: Hee

[React] Lifting state up

Hee — Mon, 26 Jun 2023 15:49:38 +0000

Lifting state up

React Data flow: Top-down

One-way data flow
Subject that delivers data: parent component
The child component can only know the form/type of the data received from the upper component
It does not know whether the data came from the state or was hard-coded.

How to develop with React

Dividing into components rather than page units

1. Divide your app's prototype into component hierarchies

Single Responsibility Principle : One component can only do one thing

[e.g.]Twittler

SingleTweet : Each Tweet posted by a user
Tweets : set of Tweets
NewTweetForm : Where to write new tweets
Twittler : Container that holds all components

2. Bottom-up Design

easy testing, scalability
Represent it as a tree structure

3. What value should be used as the state?

Values that change vs Values that do not change
[These values can be state...]

It's not transmitted via props from the parent
Its value changes over time
It's not possible to be computed with other state and props inside the component

[States in the application]

New tweets created by users
List of tweets (can be changed by adding new tweets)

4. Where to put the state

If it's meaningful only in a specific component, it can be located in the specific component
If multiple components are affected based on one state, then you need to find the parent component that owns the components and place the state there.
When two child components need accesss to one state, state should be placed in common parent component of both children

5. Lifting state up

Reverse Data flow : An event in a child component causes the state of the parent component to change
This seems to violate the principle of top-down unidirectional data flow in React.

What is the solution that conforms to React's one-way data flow (top-down) principle?

[Lifting state up]

Pass a function that changes the state of the parent component to the child component
The child component executes this function
This solution conforms to the principle of unidirectional data flow.

[e.g]
▶️ New tweet being written by users

Other components are not affected by the user's input
No need to share the state with other components
Locate the state in NewTweetForm

▶️ Event to add a new post

Add a new tweet object to the list of all tweets
When a new post is added, the status of Tweets also changes
The entire tweet list state should be placed in the common parent component of both components (Twittler)

Use a Callback function

Callback: Functions passed as arguments to other functions (higher-order functions)
When passing a function that changes the parent component’s state value to a child component, use a callback function!

[e.g. Callback]

function each(array,iterator) {
  for(let i=0;i<arr.length;i++){
    let element=array[i]
    iterator(element,i,array)
  }
}

function printElement(element) {
  console.log(element)
}

each(['hello','world'],printElement);

[e.g. Lifting state up]

import React, { useState } from "react";

export default function ParentComponent() {
  const [value, setValue] = useState("initial value");

  const handleChangeValue = () => {
    setValue("Changed Value");
  };

  return (
    <div>
      <div>Value is {value}</div>
      <ChildComponent handleButtonClick={handleChangeValue} />
    </div>
  );
}

function ChildComponent({handleButtonClick}) {
  const handleClick = () => {
    handlieButtonClick()
  };

  return <button onClick={handleClick}>Change the Value!</button>;
}

[React] Props

Hee — Mon, 26 Jun 2023 13:34:37 +0000

Props

Values(properties) passed from a parent component
They receive props as arguments, similar to function arguments, and return React elements that describe how the UI should be rendered based on those props
You can pass dynamic data (state) as well as static data
Props are read-only objects

Pitfall

Modifying props within a child component affects the value of the props passed by the parent component

-> This violates the unidirectional, downward data flow principle of React

-> It can lead to unintended side effects.

Side effects

: it refers to any modification or action that occurs outside the scope of the component rendering

it happens as a result of a component's execution, but not as a direct consequence of updating its state or props

[e.g.]

Modifying the DOM directly using imperative APIs.
Making AJAX requests or fetching data from an API.
Subscribing to events or adding event listeners.
Modifying shared state outside of the component, such as a global store.
Timer or interval functions.

How to use props

Regardless of the number of props, they are always delivered in objects
After being passed from the parent component, it can be received through a parameter and then used
To use the props, use the dot notation method to read the value (props is an object)

[Parent Component]
1) Define the values and attributes you want to pass to the child component

2) Pass the defined values and attributes using props

1 - Pass props to a React component similar to passing arguments to a function
2 - Place the value within the opening and closing tags to pass it

[Child Component]
3) Render the received props

1 - Access the value by using dot notation on the props object
2 - Access the value using props.children

[e.g.1] Pass props to a React component

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      // here
      <Child text={"I'm the eldest child"} />
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
      //here    
      <p>{props.text}</p>
    </div>
  );
};

[e.g.2] Place the value within the opening and closing tags

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        // here
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        // here
        <p>{props.children}</p>
    </div>
  );
};

Various types of props

1. Primitive types:

Such as strings, numbers, booleans, and null.

<ChildComponent name="John" age={25} isStudent={true} />

2. Objects:

It's important to note that objects are passed by reference, so if the object changes in the parent component, it will affect the child component.

const person = { name: "John", age: 25 };
<ChildComponent person={person} />

3. Arrays:

const numbers = [1, 2, 3, 4, 5];
<ChildComponent numbers={numbers} />

4. Functions:

It is useful for passing callback functions from the parent component to the child component.

const handleClick = () => {
  console.log('Button clicked!');
};
<ChildComponent onClick={handleClick} />

5. React elements:

const title = <h1>Hello, world!</h1>;
<ChildComponent title={title} />

6. Components

[Container.js]

Style components passed as props using inline styles

const Container=({children})=>{
//console.log(children);
//Symbol(react.element)
return (
    <div style={{margin:20, padding:20, border:"1px solid gray"}}>
    {children}
    </div>
    );
};
export default Container;

[App.js]

import Container from "./Container";
...

function App(
...
    return(
        <Container>
            <div>
                <MyHeader/>
                <Counter {...counterProps}/>
            </div>
        </Container>
)

The jsx elements placed between the components are passed to the Container component as a prop called children.

Practice

1. Render the passed props!

Write code to render two strings by passing itemOne & itemTwo in the App component as props to the Learn component

const App = () => {
  const itemOne = "I'm learning";
  const itemTwo = "React!";

  return (
    <div className="App">

    // pass the props
      <Learn text={itemOne} />
      <Learn> {itemTwo} </Learn>
    </div>
  );
};

const Learn = (props) => {
  //Rendering using passed props
  return (
    <div className="Learn">
      {props.text}
      {props.children}
    </div>
  );
};

export default App;

2. Pass the prop!

[App.js]

import React from "react"
import Counter from "./Counter"

function App(){
    return (
        <div>
        <Counter initialValue={5}/> 
        </div>
    )

[Counter.js]

import React, {useState} from "react"

const Counter=(props)=>{
//make sure you got it right
//console.log("props")

const [count, setCount]=useState(props.initialValue);

const onIncrease=()=>{
    setCount(count+1);
};

const onDecrease=()=>{
    setCount(count-1);
};

return (
    <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
    </div>
    )
};

export default Counter;

3. Pass the props!

If there are many props that need to be passed, we can use spread operator to pass all the props.
this allows us to pass an object containing multiple props without explicitly specifying each prop individually

[App.js]

function App(){
    const counterProps={
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
    initialValue:5 ,
    };

    return (
        <div>
        <Counter {...counterProps}/>
        </div>
    )

[Counter.js]

import React, {useState} from "react"
import OddEvenResult from "./OddEvenReslt"

const Counter=({initialValue})=>{

const [count, setCount]=useState({initialValue});

const onIncrease=()=>{
    setCount(count+1);
};

const onDecrease=()=>{
    setCount(count-1);
};

return (
    <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
        <OddEvenResult count={count}
    </div>
    )
};

export default Counter;

Receive and use only necessary values from objects through destructing assignment
The state of the count is being passed to the OddEvenResult component
If props (initialValue) is not passed down from the parent component, but child component receives the props, 'undefined' is printed to the console. →const[count,setCount]=useState({initialValue}); Undefined is used as state value by code → NaN (error)

[Solution]
Counter.defaultProps={ initialValue:0 }

Error prevention by setting the default value of props that were not delivered through defaultProps value setting

[OddEvenResult.js]

A component that determines whether count is odd or even

const OddEvenResult=({count})=>{
    return<>{count%2===0?"짝수":"홀수"}</>
}  

export default OddEvenResult;

re-rendering React components re-render when their parent props change. OddEvenResult renders a different result each time the Counter's state changes.
Even if props are not passed from the parent element, when the parent element's state changes, the child element's component is also re-rendered.

Re-redering

When the state value managed by the component changes
When the props that come down to the child component change
Even if neither of the above two cases, when its parent is re-rendered

[React] State & Event Handling

Hee — Mon, 26 Jun 2023 08:57:18 +0000

State

state: values that can change within a component
useState: Functions that handle State in React

⭐️ React state is changed by calling a state-changing function
If you forcibly change it, re-rendering does not work, or the state does not change properly.

How to use State in React

import {useState} from "react";

const [state, useState]=useState(initial value);

Properly name the state and the useState function that changes the state
initial value: Set a initial value of a state
state variable does not disappear even when the function ends
When useState is called, it returns an array

[e.g.] Example of useState destructuring assignment

function CheckboxExample() {
//[1]
  const [isChecked, setIsChecked] = useState(false); 

//[2]
  const stateHookArray = useState(false); 
  const isChecked = stateHookArray[0];
  const setIsChecked = stateHookArray[1];
}

(Destructing Assignment) [1] = [2]

◦ isChecked : variable to store state
◦ setIsChecked : Function to change state (isChecked)
◦ useState : state hook
◦ false : state initial value

Event Handling

React event handling is similar to DOM event handling
Events in React: use camelCase (lowercase x)
Using JSX, passing an event handler rather than a string

HTML ) <button onclick="handleEvent()">Event</button>
React) <button onClick={handleEvent}>Event</button>

Event

1) onChange

An event that occurs when the user's input changes

[e.g.] When a user enters a name as an input

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

The value entered as text in the input = the value of name(variable)
An event occurs whenever the text of the input changes.
The function setName, which changes the value of name with user input, is executed
The input value is changed to a new state through setName

2) onClick

Event occus when user clicks

Pitfall

 <button onClick={alert(name)}>Button</button>

If you call the alert(name) function directly in the onClick event as above, the result of the function call, not the function itself, will be applied to the onClick when the component is rendered.
Therefore, the alert is executed when the component is rendered, not when the button is clicked, So the result, undefined (the function returns undefined when there is no return value) is applied to onClick and no result occurs when clicked.
When passing a function to the onClick event, you must define the function inside the return statement, or define the function outside the return statement, and then pass the function itself to the event, rather than calling the function.

[e.g] Code that pops up an alert window with the name entered as an input

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  //[1] Defining the function
  return (
    <div>
      <input type='text' value={name} onChange={handleChange}></input>
      <button onClick={() => alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );

//[2] Passing the function itself
  const handleClick = () => {
    alert(name);
  };

  return (
    <div>
        ...
      <button onClick={handleClick}>Button</button>
        ...
    </div>
    );
  };
}

Precautions when using state hooks

Re-rendering occurs whenever the component's state changes
If you click the checkbox, you can see that "rerendered?" is printed to the console every time you click it.

import React, { useState } from "react";
import "./styles.css";

function CheckboxExample() {
  console.log("rerendered?");
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}

export default CheckboxExample;

Practice

[Counter.js]

import React, {useState} from "react"

const Counter=()=>{

// Check if re-rendering
// Print when the Counter function is called
// console. log("Call");
const [count, setCount]=useState(0);

const onIncrease=()=>{
    setCount(count+1);
};

const onDecrease=()=>{
    setCount(count-1);
};

// 2nd state
const [count2, setCount2]=useState(0);

const onIncrease2=()=>{
    setCount2(count2+1);
};

const onDecrease2=()=>{
    setCount2(count2-1);
};
return (
    <div>
        <h2>{count}</h2>
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>

        <h2>{count2}</h2>
        <button onClick={onIncrease2}>+</button>
        <button onClick={onDecrease2}>-</button>
    </div>
    )
};

export default Counter;

Digging into the Code

const [count, setCount]=useState(0)

The useState method returns an array, and through unstructured allocation of the array
0th index: used as the value of the state
1st index: a function that changes the state value
useState(0): 0 is used as the initial value
Event handling: camelCase
Re-rendering: Whenever the state of count is updated, a function(counter) returns again.
When a component changes its state, it re-renders (calls the function again) to redraw the screen.
In React, a component can have multiple states. If you need to write more than one state, the name of the state and the state-changing function must be different. (Declaration)

[React] Why we should use React (with code)

Hee — Mon, 26 Jun 2023 08:28:03 +0000

Code using only DOM

Need to connect JS and HTML to use JS 1) inline 2) Connect with <script>

const user = {
  firstName: "Hee",
  lastName: "Kim"
};

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

Code using React

React without jsx

[before...]

Creating an element and rendering it to the DOM

 React.createElement(type,{props},children);

type: type of HTML element ( h1, p, button)
Object properties, event handlers...
will be displayed on the screen

ReactDOM.render(element,containerElement);

element: the element to be rendered to the DOM
containerElement: where in the DOM it will be rendered

import React from "react";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }


  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

export default App;

React using JSX

Tags can be written directly, when using JS, write

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }

  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

Practice

1) If there are two data

hard coding

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
];

function Blog() {
  return (
    <div>
      <div>
        <h3>{posts[0].title}</h3>
        <p>{posts[0].content}</p>
      </div>
      <div>
        <h3>{posts[1].title}</h3>
        <p>{posts[1].content}</p>
      </div>
    </div>
  );
}

2) If there is 100 data

const posts = [
    { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
    { id : 2, title : 'Installation', content : 'You can install React via npm.' },
    { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
    // ...
    { id : 100, title : 'I just got hired!', content : 'OMG!' },
  ];

function Blog() {
  return (
    <div>
      <div>
         <h3>{posts[0].title}</h3>
         <p>{posts[0].content}</p>
     </div>
      <div>
         <h3>{posts[1].title}</h3>
         <p>{posts[1].content}</p>
      </div>
      {// ...}
      <div>
         <h3>{posts[99].title}</h3>
         <p>{posts[99].content}</p>
      </div>
     {// ... 98 * 4 more lines !!}
   </div>
  );
}

Use the array map method to make the part that needs to be written repeatedly into a function.

3) Using the array method [map]

function Blog() {
  const postToElement = (post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

//Pass each post to a function
  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

You can use JSX to process the result of the map method inside the return statement by using any expression inside curly braces.(inline)
It is up to the developer to decide whether to extract it as a variable or put it inline for code readability.

[React] Creating a Component using JSX & ReactDOM

Hee — Mon, 26 Jun 2023 07:54:10 +0000

JSX

React Offical Document

JavaScript XML

Syntax used when configuring UI in react
Syntax that extends JS, but it's not a JS code that can be executed directly by the browser
Using Babel to convert to browser understandable JS code ( Babel: JS compiler )
After compiling, the JS is read by the browser and rendered on the screen

Why we should use JSX?

We can write code more explicitly than when using DOM code
Using JS + HTML grammar at the same time, you can check the function and structure of the component at a glance
We can use react without JSX, but complexity increases, readability decreases

Rules of JSX

1) can't render two adjacent JSX elements

They have to be wrapped in something so that it counts as just one element with two elements inside
When using multiple elements in JSX, all elements must be wrapped with opening and closing tags.
can be wrapped in an empty tag <>, </>

<div>
    <div>
        <h1>Hello</h1>
    </div>
    <div>
        <h2>World</h2>
    </div>
</div>

2) When using an element class, mark it as className

If you write it as a class, React accepts it as a JavaScript class instead of the html class attribute.

<div className="greeting"> Hello! </div>

3) When using JS expressions, use curlybraces { }

If you want to write JavaScript in JSX, be sure to use { }
If you don't use curly braces, it is recognized as plain text

4) Custom components, start with an uppercase letter (PascalCase)

When React elements are written in JSX, they start with "uppercase".
If it starts with a lowercase letter, it is recognized as a normal HTML element.
JSX components written in uppercase: custom components

function Hello( ) {
    return <div>Hello!</div>
}

function HelloWorld( ){
    return <Hello/>;
}

5) Use ternary operator for conditional rendering

Conditional rendering uses a ternary operator rather than an if statement

<div>
{(1+1 === 2) ? (<p>Correct</p>) : (<p>Failed</p>)
}
</div>

6) When using the map function, there must be a "key" JSX attribute

We should use the "map()" function to display multiple HTML elements in React
When using the map function, be sure to include the "key" JSX attribute
If you don't put the "key" JSX attribute, you'll get a warning that you must put a key in each item in the list.
' Warning: Each child in a list should have a unique "key" prop.'
The position of the key attribute must be put in the first element inside the map method.
If possible, the key attribute value should be assigned an id provided by the data.
This is because the value of the key attribute, like id, must be immutable, predictable, and unique.
if there is no unique id, use array index (only as a last resort)

const posts=[
    {id:1, title:'Hello World',content:'Welcome to learning React!'}
    {id:2, title:'Installation', cintent:'You can install React from npm.'}
];

function Blog(){
    const content=posts.map((post)=>
    <div key={post.id}>
        <h3>{post.title></h3>
        <p>{post.content}</p>
    </div>
    );

    return (
        <div>
            {content}
        </div>
    );
}

ReactDOM

DOM : HTML + CSS + JS
React DOM: CSS + JSX

What is ReactDOM?

ReactDOM is a specific package that serves as the bridge between React and the actual browser DOM (Document Object Model).
While React is responsible for creating and managing the virtual representation of the UI, ReactDOM is responsible for rendering that virtual DOM into the browser DOM.
ReactDOM provides methods for manipulating the browser DOM, such as rendering React components, updating them when the state or props change, and handling events.
It ensures that the changes made to the virtual DOM are efficiently reflected in the actual browser DOM.

[Code] Import React & ReactDOM

[1]
import React from 'react';
import ReactDOM from 'react-dom';
...
ReactDOM.render(<Component/>, document.getElementById('root'));

[2]
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

import / export

import A from B

: Import the exported module

A: variable, class, function to use
B: path of module to load

export A

: Add the export keyword in front of variables, classes, and functions to make the module's functions available externally.

export A as C

: Using the as keyword: export with an alias

Digging into the Code

import React from "react"
import ReactDOM from "react-dom"

: we should import React / ReactDOM first to use them

ReactDOM.render(<Component/>, document.getElementById('root'));

ReactDOM.render() is used to render a React component or element into a specified container within the HTML document
It takes two arguments: (component / element to render, target container element in HTML)

Component

1. Class Components

React Class Components

2. Functional Components

receive props as parameters ** and **return the JSX structure of the component
use the constructor convention of having capital CamelCase for the component name Start your first letter as a capital letter
< component /> [e.g.]

import React from "react";
import ReactDOM from "react-dom";

function MyInfo() {
  return (
    <>
      <h1> Dohee</h1>
      <p> These are the places that I'd like to visit for my vacation</p>
      <ul>
        <li> London </li>
        <li> Dublin </li>
        <li> Rome </li>
      </ul>
    </>
  );
}

ReactDOM.render(<MyInfo />, document.getElementById("root"));

[React] Intro & Setting

Hee — Mon, 26 Jun 2023 07:46:07 +0000

React

What is React?

A JS library for building user interfaces

is known for its efficiency and flexibility in creating interactive and reusable UI components
The main idea behind React is tobreak down the user interface into small, isolated components.

( Component : A codeset that writes code for structure and operation as a bundle )

Each component represents a part of the UI and can have its own state and properties.
These components can be combined to build complex UI structures.

Why shoud we use React?

Using just JS isn't a great option

cumbersome
error-prone
hard to edit / maintain

By using React,

high speed (Virtual DOM)
reusable and clearer web components

Features of React

1) Declarative

Aims for declarative programming
that does not divide html/css/js,
but uses JSX to explicitly write in one file

2) Component-based

Separation into each component for one function

The top-level component is the root and has child components
Hierarchy: Shaped as a tree structure
- Create and combine multiple components to create applications
Independence Possible to develop by focusing on the function itself
Reusability Maintenance, Unit testing

3) Versatility

Flexible application to any JS project
Managed by facebook -> Stable
Mobile development is possible with React Native

Create React App

A tool chain designed to make developing SPA easy and fast
Even if you don't know how all the tools work, it helps you to set up complex development in advance

Creating a React app using npm

[terminal]

npx create-react-app project_name

[e.g.]

npx create-react- app MyFirstReact

How to run a React app

[terminal]

npm run start