> For the complete documentation index, see [llms.txt](https://okelm.gitbook.io/devmeetings-react-ts-fork/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://okelm.gitbook.io/devmeetings-react-ts-fork/react/first-component.md).

# The first component

Here's probably the simplest component we can write, in all it's glory:

![first component](https://3623316627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqFAwc0aFWpcPyhtK-X%2F-LqFBL_wzP8CS19hWU7a%2F-LqFBOk0LJ3QuWkvODT8%2Ffirst_component.png?generation=1570082234938467\&alt=media)

```jsx
import React from 'react';

const App: React.FC = () => {
    return (
        <h1>Hello DevMeetings!</h1>
    );
}

export default App;
```

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](https://3623316627-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LqFAwc0aFWpcPyhtK-X%2F-LqFBL_wzP8CS19hWU7a%2F-LqFBOk7hiEz4hUzTSd3%2Fsingle_product.png?generation=1570082234928248\&alt=media)

```jsx
import React from 'react';

const App: React.FC = () => {
    const product: Product = {
      name: "JavaScript: The Definitive Guide",
      description: `Since 1996, JavaScript: The Definitive Guide...`,
      price: 28.89
    }

    return (
        <section>
            <h1>Hello DevMeetings!</h1>
            <div>
                <header>{product.name}</header>
                <p>
                    {product.description}
                </p>
                <span>{product.price}$</span>
            </div>
        </section>
    )
}

export default App;
```

* 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