## Extracting Components (R2R)
🔹 *parent* [[❞ React Fundamentals (R2R)|React Fundamentals (R2R)]]
🔸*prev* [[❜ Lists in React|Lists in React]] *next* [[❜ Component Instantiation|Component Instantiation]], [[❜ React DOM|React DOM]]
### Extracting Components
Sections of code can be extracted out to be reused, like the `Search` component here.
```js
function App() {
return (
<div>
<h1>My Hacker Stories</h1>
<label htmlFor="search">Search: </label>
<input id="search" type="text" />
<hr />
<List />
</div>
);
}
{/* -- BECOMES -- */}
function App() {
return (
<div>
<h1>My Hacker Stories</h1>
<Search />
<hr />
<List />
</div>
);
}
function Search() {
return (
<div>
<label htmlFor="search">Search: </label>
<input id="search" type="text" />
</div>
);
}
```
Components in React are in *Hierarchy trees*. For instance, an `App` container is parent to `Search` and `List` children, and nested child elements are known as *Leafs*.
![[Pasted image 20220114043214.png]]