devmeetings-react-ts-fork
Search…
The first component
Here's probably the simplest component we can write, in all it's glory:
first component
1
import React from 'react';
2
3
const App: React.FC = () => {
4
return (
5
<h1>Hello DevMeetings!</h1>
6
);
7
}
8
9
export default App;
Copied!
It doesn't do much, but still there's a couple of things to notice:
import React from 'react';- always import Reactconst App: React.FC- the component is typed as a React'sFunctionalComponentconst App: React.FC = () => { ... }- it takes no argumentsexport default App;is exported from the file
A single product component
single product
1
import React from 'react';
2
3
const App: React.FC = () => {
4
const product: Product = {
5
name: "JavaScript: The Definitive Guide",
6
description: `Since 1996, JavaScript: The Definitive Guide...`,
7
price: 28.89
8
}
9
10
return (
11
<section>
12
<h1>Hello DevMeetings!</h1>
13
<div>
14
<header>{product.name}</header>
15
<p>
16
{product.description}
17
</p>
18
<span>{product.price}$</span>
19
</div>
20
</section>
21
)
22
}
23
24
export default App;
Copied!
- not exactly the best practice, but for now, the data is hardcoded inside of the component
- There's plenty of elements to render, but a component must always return exactly one element or null
Resources
Last modified 2yr ago
Copy link