Creating a react component

Note: we use .ts for plain typescript file and .tsx for react component

There are two ways to create REACT component : JavaScript class or function , these days function based component are widely used because of they are concise and easier to write.

So the below code is under your .tsx file (mine is : Message.tsx)

function Message() {
  return <h1>Hello World</h1>;
}

export default Message; // this helps to import Message file in other files

The below code is under App.tsx file , in order to use the Message.tsx file under the App.tsx file you need to import the Message.tsx file.

import Message from './Message'; //here period(.)means the current folder

function App(){
  return <div><Message></Message></div>;//you can also use <Message/> instead of <Message></Message>

export default App; //export App component to use it somewhere else


}