react functional component typescript

1import React from 'react';
2
3interface Props {
4  
5}
6
7export const App: React.FC<Props> = (props) => {
8  return (
9    <>
10     <SomeComponent/>
11    </>
12  );
13};

1class Test extends Component<PropsType,StateType> {
2  constructor(props : PropsType){
3    	super(props)
4  }
5  
6  render(){
7   	console.log(this.props) 
8    return (
9     	<p>this.props.whatever</p> 
10    )
11  }
12  
13};

1function Welcome(props) {
2  return <h1>Hello, {props.name}</h1>;
3}
4
5function App() {
6  return (
7    <div>
8      <Welcome name="Sara" />      <Welcome name="Cahal" />      <Welcome name="Edite" />    </div>
9  );
10}
11
12ReactDOM.render(
13  <App />,
14  document.getElementById('root')
15);

1// Function Component ( with props and default props ):
2
3import React from "react";
4
5type Props = {
6
7  linkFirst: string,
8
9  routeFirst: string,
10
11  head?: string,
12
13  linkSecond?: string,
14
15  routeSecond?: string
16
17};
18/* Default props appear when no value for the prop 
19is present when component is being called */
20
21const DefaultProps = {
22  head: "Navbar Head not found"
23};
24
25const Navbar: React.FC <Props> = (props) => {
26  return (
27	<div>
28		<nav>
29		{ props.head }
30			<ul>
31			<li> 
32			<a href={ props.routeFirst }> {props.linkFirst} </a>
33			<li> 
34			<a href= { props.routeSecond }> {props.linkSecond} </a>
35			</li>
36   			</ul>
37		</nav>
38	</div>
39  );
40};
41/* Initializing DefaultProps constant to defaultProps 
42so that this constant works. */
43
44Navbar.defaultProps = DefaultProps;
45export default Navbar;