React

Simple React Function

import React from 'react';
function Greeter(){
  return <h1>Hello!</h1>;
}
export default Greeter;

• In app.tsx, we can then use

import Greeter from './components/Greeter';
function App(){
  return (
  <div>
  <div className="App">
  <Greeter />
  </div>
  )
}

Props

import React from 'react';
function Greeter(props:{person:string}){
  return <h1>Hello,{props.person}</h1>;
}
export default Greeter;

• In app.tsx, we can then use

import Greeter from './components/Greeter';
function App(){
  return (
  <div>
  <div className="App">
  <Greeter person="James" />
  </div>
  )
}

Interface

import React from 'react';
interface GreeterProps{
  name:string;
  id:number;
}
function Greeter(props:GreeterProps){
  return <h1>Hello,{props.name}</h1>;
}
export default Greeter;