Day 22 || Functional Component in React || Styling in React || Props in React

React.js Topics

Day 22:

• Functional Component

• Styling in React

• Props

Functional Component:

HouseComponent.js

import "./HouseComponent.css";

const HouseComponent = () => {

  return (

    <div className="villageContainer">

      <h1>Color Full Village</h1>

    </div>

  );

};

export default HouseComponent;

Styling in React:

HouseComponent.css

.villageContainer {

  color: rgb(240, 231, 231);

  text-align: center;

  background: url("https://w0.peakpx.com/wallpaper/190/244/HD-wallpaper-beautiful-landscape-nature-green-field-sky-village.jpg");

  height: 100vh;

  background-size: cover;

  padding: 100px;

  margin: 10px;

  border-radius: 5px;

}

Props:

DeliveryService.js 

import "./DeliveryService.css";

const DeliveryService = ({ item, destination, img }) => {

  return (

    <div className="delivery-service-container">

      <h1>Delivery Details</h1>

      <div>

        <h2>

        {item} items  sending to {destination}

        </h2>

      </div>

      <div className="delivery-service-image">

        <img src={img} alt={item} />

      </div>

    </div>

  );

};

export default DeliveryService;

DeliveryService.css

.delivery-service-container{

    text-align: center;

    border: 1px solid blue;

    margin: 10px;

    border-radius: 5px;

}

.delivery-service-container img{

    width: 60%;

    border-radius: 5px;

}

MarketComponent.js

import DeliveryService from "./DeliveryService.js";

const MarketComponent = () => {

  return (

    <div>

      <DeliveryService

        item="Groceries"

        destination="Red House"

        img="https://images.unsplash.com/photo-1604719312566-8912e9227c6a?auto=format&fit=crop&q=80&w=1974&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

      />

      <DeliveryService

        item="Package"

        destination="Blue House"

        img="https://images.unsplash.com/photo-1556229040-2a7bc8a00a3e?auto=format&fit=crop&q=80&w=1930&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

      />

      <DeliveryService

        item="Mail"

        destination=" Green House"

        img="https://images.unsplash.com/photo-1528329140527-75853b1e1650?auto=format&fit=crop&q=80&w=1935&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"

      />

    </div>

  );

};

export default MarketComponent;

App.js

import HouseComponent from "./Components/HouseComponent";

import MarketComponent from "./Components/MarketComponent";

function App() {

  return (

    <div>

      <HouseComponent />

      <MarketComponent />

    </div>

  );

}

export default App;

Index.js

import React from "react";

import ReactDOM from "react-dom/client";

import "./index.css";

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

);

Interview Questions:

1. What is a functional component in React?

2. What are the different ways to apply styles in React?

3. What are props in React?