33 lines
768 B
Markdown
33 lines
768 B
Markdown
|
---
|
||
|
|
tags:
|
||
|
|
- typescript
|
||
|
|
- react
|
||
|
|
---
|
||
|
|
|
||
|
|
# Components
|
||
|
|
|
||
|
|
We write functional components in the manner of a normal
|
||
|
|
[function](Functions.md) that take
|
||
|
|
a props argument and return a JSX element.
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
interface IProps = {
|
||
|
|
message: string;
|
||
|
|
};
|
||
|
|
const App = ({message}: IProps): JSX.Element => <div>{message}</div>;
|
||
|
|
```
|
||
|
|
|
||
|
|
## `React.FunctionComponent` / `React.FC`
|
||
|
|
|
||
|
|
It used to be the case that you would type a function component like so:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
|
||
|
|
<div>{message}</div>
|
||
|
|
);
|
||
|
|
```
|
||
|
|
|
||
|
|
This is now discouraged as it means the component can always accept children,
|
||
|
|
even when you do not want this to be the case. There are several other minor
|
||
|
|
drawerbacks but it's generally best to leave out the declaration.
|