DEV Community: entrepreneur123

Request and Response in nodejs

entrepreneur123 — Thu, 16 Jun 2022 14:57:04 +0000

Hey !! this is Irusha and in this post you are gonna to learn about the request and response in nodejs and lets jump into code directly.

you got to create a views folder in which you will be creating about.html, home.html and 404.html and outside the folder you got to create server.js. And we will run the following code .Its simple and easy !! you gottta....

server.js

const http = require("http");
const fs = require("fs");

const server = http.createServer((req, res) => {
  console.log(req.url, req.method);

  res.setHeader("Content-Type", "text/html");
  let path = "./views/";
  switch (req.url) {
    case "/":
      path += "index.html";
      break;
    case "/about":
      path += "about.html";
      break;
    default:
      path += "404.html";
      break;
  }
  fs.readFile(path, (err, data) => {
    if (err) {
      console.log(err);
      res.end();
    } else {
      //res.write(data);
      res.end(data);
    }
  });
});

server.listen(3000, "localhost", () => {
  console.log("listening to the 3000 local host");
});

After that run above code as node server and hit enter then you will see output. And tried out going to localhost:3000 you will get result .

Mapping concept for beginner

entrepreneur123 — Fri, 22 Apr 2022 04:31:12 +0000

APP.tsx

import { Card, datas } from "../src/components/Card";
import "../src/components/Card.css";
import "./App.css";
// import { stringify } from "querystring";
const App = () => {
  /
  return (
    <div className="main">

       {
        datas.slice(0,3).map((val: { title: string; desc: string; id: number; createdDate: string; }) => {
        return (
          <Card
            title={val.title}
            desc={val.desc}
            id={val.id}
            createdDate={val.createdDate}
          />

        );
      })}

    </div>
  );
};

export default App;

components/card.tsx

export interface ICard {
  title: string;
  desc: string;
  id: number;
  createdDate: string;
}


 export const datas : ICard[] = [
  {
    title: "ABC",
    id: 1,
    desc: "this is desc1",
    createdDate: "12/03/2020"
  },
  {
    title: "DEX",
    id: 2,
    desc: "this is desc1",
    createdDate: "17/03/2020"
  },
  {
    title: "IJK",
    id: 3,
    desc: "this is desc1",
    createdDate: "2/03/2020"
  },
  {
    title: "LMN",
    id: 4,
    desc: "this is desc1",
    createdDate: "12/04/2020"
  },
];


export const Card: React.FC<ICard> = ({ title, desc, id, createdDate }) => {
  return (
    <>
      <div className="all">
        <h3>{id}</h3>
        <h1>{title}</h1>
        <p className="desc">{desc}</p>
        <div>{createdDate}</div>
      </div>
    </>
  );
};

Flagicon.tsx

import React from "react";
import ReactDOM from "react-dom";


interface IOption {
  label: string;
  value: string;
  flagImg: string;
  type?: any;
}

const isOption: IOption[] = [
  { label: "Nepal", value: "nepal", flagImg: "nepal" },
  { label: "Canada", value: "canada", flagImg: "canada" },
  { label: "South Korea", value: "south-korea", flagImg: "sk" },
  { label: "USA", value: "USA", flagImg: "usa" },
];



export const SelectOption = () => {
  return (
    <div className="select-option">
      <Select
        // isFormatOptionLabel={isFormatOptionLabel}
        options={isOption}
      />
    </div>
  );
};

textbox.tsx



interface IconProps {
  src: string;
  alt: string;
  style?: object;
  className?: string;
}

interface TextProps {
  type: string;
  placeholder?: string;
  value?: string;
  onChange?: () => {};
  style?: object;
  className?: string;
}

interface TextInputProps {
  iconProps: IconProps;
  textProps: TextProps;
  selectProps: SelectProps;
  optionProps: OptionProps[];
  // iconcountryProps: IconcountryProps;
}

interface SelectProps {
  id: string;
  className: string;
}
interface OptionProps {
  value: string;
  label?: string;
  className?: string;
}

export const Textbox: React.FC<TextInputProps> = ({
  iconProps,
  selectProps,
  optionProps,
  textProps,
  // iconcountryProps,
}) => {
  return (

    <div className="inputbox">
      <img {...iconProps} />
      <input {...textProps} />
      <select {...selectProps}>
        {optionProps.map((val) => {
          return (
            <option {...val.value} {...val.className}>
              {val.label}
            </option>
          );
        })}
      </select>
    </div>
  );
};

card.css

.desc {
  padding: 4rem;
  font-size: 24px;
}

.image {
  height: auto;
  width: auto;
}

.all {
  margin: 30px;
  border: 1px solid black;
  box-shadow: 3px 3px 5px 6px #ccc;
  padding: 30px;
  height: 400px;
  width: 400px;
}

TypeScript Basic

entrepreneur123 — Wed, 30 Mar 2022 11:38:29 +0000

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;