## React Fundamentals
🔹 [[✧ The Road to React|The Road to React]]
▫️ [[⧋ React|React]], [[⏶ Javascript 30|JS30]], [[+ Projects/Online Courses|Courses]]
### Chapters
- [[❜ Meet the React component|Meet the React component]]
- [[❜ React JSX|React JSX]]
- [[❜ Lists in React|Lists in React]]
- [[❜ Extracting Components|Extracting Components]]
- [[❜ Component Instantiation|Component Instantiation]]
- [[❜ React DOM|React DOM]]
- [[❜ React Props|React Props]]
- [[❞ React State|React State]]
- [[❞ Callback Handlers in React|Callback Handlers]]
- [[❞ Lifting State|Lifting State]]
- [[❞ Controlled Compontents in React|Controlled Components]]
- [[❜ Props Handling]]
- [[❞ React Side-Effects]]
- [[❞ React Custom Hooks (advanced)]]
- [[React Fragments]]
- [[Reuseable Components]]
- [[Component Composition]]
- [[❞ Imperative React]]
### React Hooks tutorials
[How to useState in React](https://www.robinwieruch.de/react-usestate-hook/)
[How to useReducer in React](https://www.robinwieruch.de/react-usereducer-hook/)
[How to useEffect in React](https://www.robinwieruch.de/react-useeffect-hook/)
[How to useCallback in React](https://www.robinwieruch.de/react-usecallback-hook/)
[How to useCallback in React](https://www.robinwieruch.de/react-usecallback-hook/)
[How to useMemo in React](https://www.robinwieruch.de/react-usememo-hook/)
[How to use React Ref](https://www.robinwieruch.de/react-ref/)
### Anki
TARGET DECK
React::Imperative React
START
What is the difference between **Imperative Programming** and **Declarative Programming**?
Back:
In **imperative programming**, you're telling a program to change its state. Imperitive programming focuses on how something operates step-by-step, i.e. *commands*, rather than a high level of expected results.
React is usually **declaritive** - focusing on what a program should accomplish without specifying all the details.
Direct commands vs Big picture expectations. Telling React **how to do it** rather than **what to do**.
Examples of **imperitive programming** that React needs to control might be:
- Read/Write to the DOM to control an objects dimensions or focus state
- Complex animations like transitions
- Data-driven animations like those in the [D3 JS Library](https://observablehq.com/@d3/gallery)
END
START
Given the following component, how can this be refactored twice to access the props using **object destructuring**?
```js
const Search = (props) => (
<div>
<label htmlFor="search">Search: </label>
<input
id="search"
type="text"
value={props.search}
onChange={props.onSearch}
/>
</div>
```
Back:
First refactor from *concise body to block body* to access the properties of props
```js
const Search = (props) => {
const { search, onSearch } = props;
return (
<div> //...
}
```
Then, *destructuring the props* in the function signature of the component
```js
const Search = ({ search, onSearch }) => (
<div>
<label htmlFor="search">Search: </label>
<input
id="search"
type="text"
value={search}
onChange={onSearch}
/>
</div>
);
```
END
START
Obsidian-basic
How could you combine two objects into one `user` object along with new properties?
```js
const profile = {
firstName: 'Robin',
lastName: 'Wieruch',
};
const address = {
country: 'Germany',
city: 'Berlin',
};
```
Back:
By using the **spread operator**
```js
const user = {
...profile,
gender: 'male',
...address,
};
console.log(user);
// {
// firstName: "Robin",
// lastName: "Wieruch",
// gender: "male"
// country: "Germany,
// city: "Berlin",
// }
```
<!--ID: 1672202581674-->
END
START
Obsidian-basic
How can the following component be refactored to a using **spread** and **rest**? Show a step for each operator.
```js
const List = ({ list }) => (
<ul>
{list.map((item) => (
<Item
key={item.objectID}
title={item.title}
url={item.url}
author={item.author}
num_comments={item.num_comments}
points={item.points}
/>
))}
</ul>
);
```
Back:
First use **spread** to map and created multiple Items with keys.
```js
const List = ({ list }) => (
<ul>
{list.map((item) => (
<Item key={item.objectID} {...item} />
))}
</ul>
);
```
Then, use **rest** to *destructure* the `objectID` from the rest of the item Object.
```js
// Variation 2: Spread and Rest Operators
// Final Step
const List = ({ list }) => (
<ul>
//rest
{list.map(({ objectID, ...item }) => (
//spread
<Item key={objectID} {...item} />
))}
</ul>
);
```
The item is then able to **spread** its key/value pairs into the Item component.
```js
// spread
const Item = ({ title, url, author, num_comments, points }) => (
<li>
<span>
<a href={url}>{title}</a>
</span>
<span>{author}</span>
<span>{num_comments}</span>
<span>{points}</span>
</li>
);
```
<!--ID: 1672202581692-->
END
START
Obsidian-basic
What is the difference between the **spread** and **rest** operators?
Back:
**Rest operator happens on the left side of an assignment**, the **spread operator happens on the right side**.
The rest operator is always used to separate an object from some of its properties.
<!--ID: 1672202581698-->
END
START
Obsidian-basic
Why is array destructuring used for React Hooks like useState and object destructuring for props?
Back:
- A React Hook like **useState** returns an array and props are an object hence the we need to apply the fitting operation for the underlying data structure.
- The benefit of having an array returned from **useState** is that the values can be given any name in the destructuring operation.
-
<!--ID: 1672202581705-->
END
START
Obsidian-basic
What are the `useEffect` Hook's two arguments, and what is their purpose?
Back:
`useEffect` takes two arguments:
- first is **function that runs our side effect**
- second is a **dependency array of variables** (`[searchTerm]`). Leaving it blank would cause it to update on every render (initial and updates), but leaving the array blank will cause it to only update on the initial render only.
<!--ID: 1672202581710-->
END
START
Obsidian-basic
What 3 lifecycle methods does `useEffect` combine?
Back:
If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` combined.
<!--ID: 1672202581717-->
END
### References