Creating a React JS website(Part 6)

Now in this post we will work on Blog page to show the blogs by using API.

To work on blog page, we will first create a posts component in components directory. Image shown below shows the posts components.

import React from "react";

const Posts = () => {
  return (
    <>
      <section className="bg-white dark:bg-gray-900">
        <div className="border border-spacing-2"></div>
        <div className="container px-6 py-10 mx-auto">
          <h1 className="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
            From the blog
          </h1>
          <div className="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2">
            <div className="lg:flex">
              <img
                className="object-cover w-full h-56 rounded-lg lg:w-64"
                src="https://images.unsplash.com/photo-1515378960530-7c0da6231fb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                alt=""
              />

              <div className="flex flex-col justify-between py-6 lg:mx-6">
                <a
                  href="#"
                  className="text-xl font-semibold text-gray-800 hover:underline dark:text-white "
                >
                  How to use sticky note for problem solving
                </a>

                <span className="text-sm text-gray-500 dark:text-gray-300">
                  On: 20 October 2019
                </span>
              </div>
            </div>

            <div className="lg:flex">
              <img
                className="object-cover w-full h-56 rounded-lg lg:w-64"
                src="https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
                alt=""
              />

              <div className="flex flex-col justify-between py-6 lg:mx-6">
                <a
                  href="#"
                  className="text-xl font-semibold text-gray-800 hover:underline dark:text-white "
                >
                  How to use sticky note for problem solving
                </a>

                <span className="text-sm text-gray-500 dark:text-gray-300">
                  On: 20 October 2019
                </span>
              </div>
            </div>

          </div>
        </div>
      </section>
    </>
  );
};

export default Posts;

Now this will make our blog page will look like shown in below screen.

Now we won’t display static post like above, we will fetch the data of posts. To do so we will make use of react-query to install react query package we need to use following command.

npm i react-query

Now we need to configure react-query to use it in the application. To do so we need to update the main.jsx file as shown in below screen.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
import App from "./App.jsx";
import "./index.css";
const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <App />
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </BrowserRouter>
  </React.StrictMode>
);

For more information we can see the documentation of react-query in this link. To see whether it is working or not we can see the page by running development server. If it is running successfully we can see like shown in below screen.

Now we can see react-query-devtools are also working. Now in the next part we will see how we can fetch the posts data using react-query.