Search⌘ K
AI Features
Home
Courses
Build Microservices Web Apps with RabbitMQ, React TSX, and Django

Incorporating the Core Components Likes and Checks

Explore how to build the Core component in React TypeScript to enable likes and checks features in a real estate front-end app. Learn to manage state with hooks, fetch backend data asynchronously, and integrate these features into the main app component using routing.

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 ...