2 Multi Component Program in ReactJS using TypeScript ~ Coding Atharva

Steps:

1) Create a React App:

> npx create-react-app multi-component --template typescript

2) To Run App:

>yarn start

* Structure:

src/Header

/Body

/Footer

src/Header.tsx:

  
import {Component} from "react";

interface IState{}

interface IProps{}

class Header extends Component<IProps,IState>{
    constructor(props:IProps){
        super(props);
    };

    render(){
        return(
            <h1>ECommerse Application Soon...!</h1>
        )
    }
}

export default Header;

src/Body.tsx:

  
import React, {Component} from 'react';

interface IState{}
interface IProps{}


class Body extends Component<IProps,IState>{
    constructor(props:IProps){
        super(props);
    };

    render(){
        return(
            <React.Fragment>
                <h2> Shirts </h2>
                <h2> Pants </h2>
                <h2> Jeans </h2>
                <h2> Cotton </h2>
                <h2> Kids </h2>
            </React.Fragment>
        )
    }
}

export default Body;

src/Footer.tsx:

  
import {Component} from "react";

interface IState{}
interface IProps{}

class Footer extends Component<IProps,IState>{
    constructor(props:IProps){
        super(props);
    };

    render(){
        return(
            <h5> Coding Atharva </h5>
        )
    }
};

export default Footer;

Output:

2 Multi Component Program in ReactJS using TypeScript

Related Post