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 React
  • const App: React.FC - the component is typed as a React's FunctionalComponent
  • const App: React.FC = () => { ... } - it takes no arguments
  • export 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