TypeScript Basic

first of all, create a boiler plate for the typescript-react ,
as

yarn create react-app input --template typescript

Inside Src folder , we create a component folder and inside a components folder , we create following files as

Greet.tsx
Heading.tsx
Oscar.tsx
Person.tsx
PersonList.tsx
Status.tsx

Greet.tsx

type GreetProps = {
  name: string;
  messageCount: number;
  isLoggedin: boolean;
};

export const Greet = (props: GreetProps) => {
  return (
    <div>
      <h2>
        {props.isLoggedin
          ? `  welcome ${props.name}! you have ${props.messageCount} unread message`
          : "welcome guess!!"}
      </h2>
    </div>
  );
};

Heading.tsx

type HeadingProps = {
  children: string;
};

export const Heading = (props: HeadingProps) => {
  return <h2>{props.children}</h2>;
};

Oscar.tsx

type OscarProps = {
  children: React.ReactNode;
};

export const Oscar = (props: OscarProps) => {
  return <div>{props.children}</div>;
};

Person.tsx

type PersonProps = {
  name: {
    first: string;
    last: string;
  };
};

export const Person = (props: PersonProps) => {
  return (
    <div>
      {props.name.first} {props.name.last}
    </div>
  );
};

PersonList.tsx

type PersonListProps = {
  names: {
    first: string;
    last: string;
  }[];
};

export const PersonList = (props: PersonListProps) => {
  return (
    <div>
      {props.names.map((name) => {
        return (
          <h2 key={name.first}>
            {name.first} {name.last}
          </h2>
        );
      })}
    </div>
  );
};

Status.tsx

import React, { useEffect, useState } from "react";

type StatusProps = {
  status: string;
};

export const Status: React.FC<StatusProps> = (props) => {
  const [message, setMessage] = useState("");

  //   ? (message = "data fetched successfully")
  //   : props.status === "Error"
  //   ? (message = "Error fetching Data...")
  //   : (message = "not valid input");

  useEffect(() => {
    setMessage(props.status);
  }, [props.status]);
  //   if (props.status === "Loading") {
  //     message = "Loading...";
  //   } else if (props.status === "success") {
  //     message = "Data fetched successfully";
  //   } else if (props.status === "error") {
  //     message = "error occured";
  //   }
  return (
    <div>
      <h2>Status - {message}</h2>
      {/* loading
            success
            error */}
    </div>
  );
};

App.tsx

import React from "react";

import "./App.css";
import { Greet } from "./components/Greet";
import { Person } from "./components/Person";
import { PersonList } from "./components/PersonList";
import { Status } from "./components/Status";
import { Heading } from "./components/Heading";
import { Oscar } from "./components/Oscar";

function App() {
  const personName = {
    first: "nothing",
    last: "nothing1",
  };

  const nameList = [
    {
      first: "nothing",
      last: "nothing1",
    },
    {
      first: "nothing",
      last: "nothing1",
    },
    {
      first: "nothing",
      last: "nothing1",
    },
    {
      first: "nothing",
      last: "nothing1",
    },
  ];

  return (
    <div className="App">
      <Greet name="nothing" messageCount={30} isLoggedin={false} />
      <Person name={personName} />
      <PersonList names={nameList} />
      <Status status="loading" />
      <Heading>Placeholder text</Heading>
      <Oscar>
        <Heading>here you go</Heading>
      </Oscar>
    </div>
  );
}

export default App;

Blog

entrepreneur123

Join Our Newsletter. No Spam, Only the good stuff.

Related