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.

Functional stateless component example in React

In the previous examples we have seen that we use the 'class' keyword and extends React.Component syntax for creating a React component. This syntax is required for creating a regular React component will full feature support like state, refs, lifecycle methods etc. If we need to create simple components which don't need these features we can create simple Functional stateless components using a simpler syntax.

Functional components don’t support state, refs, or lifecycle methods, in the below example we can see that there is no reference to this.state or the class keywords.