React TypeScript stateless Function component example

In the previous post, we saw on how to create a React component with state and event handlers using TypeScript. We can also create simple function components using TypeScript which does not require a state. Usually, these types of components are used for UI components. Class components with the state are used for container components and Function components are used for UI only components which do not interact with the state containers.

In this post, we will see how to create a simple Hello World function component in React using TypeScript.

import React, { Component } from 'react';

import './App.css';

function App() {

  return (

    <div className="App">

      <h4>Hello function component</h4>

    </div>

  );

}

export default App;

Notice that this component looks like a typical ES6 JavaScript component, though the file name is App.tsx it does not use any features of TypeScript, when we write more complex components we will use more features of TypeScript.