up:: [[React MOC]]
tags:: #on/computing/programming
# React Components
*Components* in [[React MOC|React]] are pieces of UI that have their own logic and appearance. React applications are composed of components.
Practically, components are JavaScript functions that return markup. Here is an example of a simple button component:
```jsx
const Button = () => {
return (
<button>I am a button</button>
);
}
```
## Types of Components
### CreateClass Components
These are where everything started. Originally, the `createClass` method was used to create React class components without using a JavaScript class. It was commonly used prior to ES6 because in ES5 there was no class syntax.
The syntax for such a component looked like this:
```js
var App = React.createClass({
...
})
```
The `createClass` factory method takes an object which defines methods for the component. A required method is `render()`, which displays the output with JSX.
The `createClass` method is no longer available in the React core package.
### Mixins
React Mixins were the first advanced patterns for reusable component logic. Using a Mixin allows you to extract logic from a React component as a standalone object. Mixins used in components add their features to the components.
Mixins are no longer used in modern React applications.
### Class Components
Class components were introduced with JavaScript ES6. With these, it became possible to create components by declaring a class. An example of this is shown below.
```jsx
class App extends React.Component {
constructor(props) {
...
}
onChange(event) {
...
}
render() {
...
}
}
```
React class components come with their own methods, such as a constructor and a `render()` method.
The logic for a class component comes from extending `React.Component`, inheriting things in an object-oriented manner. Note that it is not recommended to use inheritance for more than this. Instead, it's recommended to use composition.
Class components have several lifecycle methods available. These are used for mounting, updating, and unmounting the component, along with other things. There are also state management methods as well. This differs from [[React Components#Function Components|function components]], which use hooks to manage state and lifecycles.
In the past, class components were the primary method for creating components. However, there is currently a shift toward using [[React Components#Function Components|function components]]. Many large projects and even React itself are pushing for function components to become the new standard.
### Higher-Order Components
Higher-Order Components (HOCs) are an alternative to Mixins, used to share reusable logic between components. They are a popular advanced pattern in React.
Basically, an HOC is a component that takes another component as input and returns the component (with extended functionality) as output.
A commonly used alternative to HOCs is [[React Render Props|render props]].
### Function Components
Function components are equivalent to class components but expressed as a function instead of a class. They use [[React Hooks|hooks]] to manage state and lifecycle.
Below is an example of a function component.
```jsx
const Button = () => {
return (
<button>I am a button</button>
);
};
```
The JSX seen in the `return` statement is what will be rendered in the browser. To render another component inside the function component, you render it as an HTML element with JSX within the function component's body:
```jsx
const Button = () => {
return (
<button>I am a button</button>
);
};
const Modal = () => {
return (
<div>
<h2>Click me!</h2>
<Button />
</div>
);
};
```
## References
“Quick Start – React.” Accessed March 13, 2024. [https://react.dev/learn](https://react.dev/learn).
Wieruch, Robin. “Types of React Components,” March 12, 2019. [https://www.robinwieruch.de/react-component-types/](https://www.robinwieruch.de/react-component-types/).
Wieruch, Robin. “React Function Components,” March 18, 2019. [https://www.robinwieruch.de/react-function-component/](https://www.robinwieruch.de/react-function-component/).