Build Microservices Web Apps with RabbitMQ, React TSX, and Django/

...

/

Incorporating the Core Components Likes and Checks

Incorporating the Core Components Likes and Checks

Learn how to add the like and check functionalities to components in React TypeScript.

We'll cover the following...

Creating the Core component

To create the Core component that enables us to have the like and check functionality in the frontend of our real estate web application, we'll create a folder inside the src folder of our project directory named core. Inside this folder, we create a file called Core.tsx. In this file, we'll write the following lines of code:

TypeScript 4.9.5
import React, { useEffect, useState } from 'react';
import { House } from './interfaces/house';
import Wrapper from '../config/Wrapper';
const Core = () => {
  const [houses, setHouses] = useState([] as House[]);
  useEffect(() => {
    (async () => {
      const response = await fetch('{{EDUCATIVE_LIVE_VM_URL}}/api/houses');
      const data = await response.json();
      setHouses(data);
    })();
  }, []);
  return (
   <Wrapper>
    <main role='main'>
      <div className='album py-5 bg-light'>
        <div className='container'>
          <div className='row'>
            {houses.map((h: House) => {
              return (
                <div className='col-md-4' key={h.id}>
                  <div className='card mb-4 shadow-sm'>
                    <img src={h.image} height='180' alt='Image' />
                    <div className='card-body'>
                      <p className='card-text'><b>{h.name}</b></p>
                      <p className='card-text'>{h.description}</p>
                      <div className='d-flex justify-content-between align-items-center'>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </main>
    </Wrapper>
  );
};
export default Core;

  • Line 1: We import React, useEffect, and useState from react.

  • Line 2: We import the House interface from the interfaces folder inside the src folder.

  • Line 3: We import the Wrapper from the config folder inside the src folder.

  • Line 5: We declare a block-scoped constant, Core, and set it to an arrow function.

  • Line 6: We use the React Hook useState to set or add a state to our component ...