How to create a Dictionary App in React

Share your love

Dictionary App is one of the apps that can be made to test out React skills before upgrading ourselves from a beginner to an intermediate level in terms of handling API calls and Handling React Components.

In this app, we will make a Dictionary App that will contain meanings, examples, synonyms, and antonyms with the pronunciation of the searched word through an API.

Before we begin, let’s have a glance at what we will be making.

Index

  1. Creating our App – Dictionary App in React
  2. Working on the UI part of our app
  3. Using hooks for
    1. State Management
    2. Doing API calls
  4. Creating Components based on API calls
    1. Select Component
    2. Definition Component
    3. Example Component
    4. Synonym Component
    5. Antonym Component
    6. Audio Component

Let’s begin…

Step I – Creating our App – Dictionary App in React

We can easily create our React App using the npx create-react-app command by navigating to our React directory. 

npx create-react-app dictionary-app-in-react

For this to work, we should have the latest versions of npm and node installed in our systems 

Step II – Working on the UI part 

 As for the UI part, this app will be divided into two sections 

  1. Searching the meanings of a specific word using API
  2. Results of that API call like meanings, examples, synonyms, etc.

In this step, we will be focusing on developing the search box that will be directly linked to the API.

import React from "react";
const App = () => {
  return (
    <>
      <div className="container-fluid">
        <div className="row">
          <div className="col-12 text-center fw-bold fs-1 p-3 bg-primary text-white">
            Pocket Dictionary
          </div>
          <div className="form-floating bg-primary py-3 pb-5 d-flex justify-content-center">
            <input
              type="text"
              className="form-control-sm border-0 px-2 col-md-3 col-sm-4"
              placeholder="Type your word"
              id="floatingInput"
            />
            <button
              className="btn btn-dark text-light col-md-1 col-sm-2 mx-2"
            >
              Search
            </button>
          </div>
		<div className="fs-1 text-capitalize text-center fw-bold text-decoration-underline text-white bg-dark extra">
          type a word in the box
        	</div
        </div>
      </div>
    </>
  );
};
 
export default App;


As you can see, Bootstrap classes have been used and they cover the major part of the styling of this app. The below image will give you an idea of what it will look like before applying any API to it.

The UI of our App

Bootstrap as a CDN and some vanilla CSS has been used for their styling and will not be covered in this article.

Step III – Using Hooks

We can use it for many things including state management and handling API calls for this we will be using the useState() and useEffect() hook.

Step II(A) –  State Management – useState() hook

  const [word, setWord] = useState();
  const [all, setAll] = useState([]);
  const [main, setMain] = useState([]);

Step II(B) – Handling API calls – useEffetc() hook

There are many methods in which API calls are made, but the easiest one among them and the one which is mostly used is async-await with fetch and will be using the useEffect hook to connect it with the app.

 const dataApi = async () => {
    const data = await fetch(
      `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
    );
    const dataJ = await data.json();
    setAll(dataJ);
    setMain(dataJ[0]);
  };
 
  useEffect(() => {
    dataApi();
  }, []);

 We have used a google API for our project that contains words in several different languages, but as this is still a beginner’s project, this blog will only be focussing on English as its language.

Let’s add an onClick event on the Search button, and an onChange Event with a value attribute for the input field for this API to start working with our search box

            <input
              type="text"
              className="form-control-sm border-0 px-2 col-md-3 col-sm-4"
              placeholder="Type your word"
              id="floatingInput"
              value={word}
              onChange={(e) => setWord(e.target.value)}
            />
            <button
              className="btn btn-dark text-light col-md-1 col-sm-2 mx-2"
              onClick={Search}
            >
              Search
            </button>

And then its corresponding function 

const Search = () => {
    dataApi();
    setWord("");
  };

Step IV – Creating Components 

We will make a separate component for every different section of API like synonyms, antonyms, definitions, examples, and audio. Here is an example of what our API call will look like.

API

And as we discussed, there will be two sections of this project. We have already discussed one part of it, and for the next part, we will make a separate component for addressing that too with some props as shown.

Don’t forget to import it.

      {word === "" ? (
        <Select all={all} main={main} />
      ) : (
        <div className="fs-1 text-capitalize text-center fw-bold text-decoration-underline text-white bg-dark extra">
          type a word in the box
        </div>
      )}

Step IV(A) – Select Component

import React from "react";
import Definition from "./Definition";
import Example from "./Example";
import Synonyms from "./Synonym";
import Antonyms from "./Antonyms";
 
const Select = ({ all, main, audio }) => {
  return (
    <>
      <div className="container-fluid">
        <div className="row dark-theme">
          <div className="col-12 text-center text-capitalize fs-1 fw-bold text-decoration-underline">
            {main.word}
          </div>
          {audio ? (
            <audio
              controls
              className="color m-4 text-center col-10"
              src={audio}
            ></audio>
          ) : (
            <div className="color fs-3 text-center">Audio not found</div>
          )}
          <div className="col-12 text-start my-3 text-capitalize fs-4 fw-bold">
            meaning & definitions :
          </div>
          <div>
            <ol>
              <Definition all={all} />
            </ol>
          </div>
          <div className="col-12 text-start my-3 text-capitalize fs-4 fw-bold">
            examples :
          </div>
          <div>
            <ol>
              <Example all={all} />
            </ol>
          </div>
          <div className="col-12 text-start my-3 text-capitalize fs-4 fw-bold">
            synonyms :
          </div>
          <div>
            <ol className="col-12 li">
              <Synonyms all={all} />
            </ol>
          </div>
          <div className="col-12 text-start my-3 text-capitalize fs-4 fw-bold">
            antonyms :
          </div>
          <div>
            <ol className="col-12 li">
              <Antonyms all={all} />
            </ol>
          </div>
        </div>
      </div>
    </>
  );
};
 
export default Select;

It will come out like this

Step IV(B) – Definitions Component

import React from "react";
 
const Definition = ({ all }) => {
  return (
    <>
      {all.map((Val) => {
        return Val.meanings.map((Means) => {
          return Means.definitions.map((Def) => {
            return (
              <>
                <li className="text-capitalize fs-5 text-start">
                  {Def.definition}
                </li>
                <hr />
              </>
            );
          });
        });
      })}
    </>
  );
};
 
export default Definition;

Our API contains several arrays, one such array has definitions in it and we have to map through that array too to get those definitions for that we have nested our map function as you can see but you can also define a new state and can escape nesting map function.

Step IV(C) – Example Component

import React from "react";
 
const Example = ({ all }) => {
  return (
    <>
      {all.map((Val) => {
        return Val.meanings.map((Means) => {
          return Means.definitions.map((Def) => {
            return (
              <>
                {Def.example ? (
                  <li className="text-capitalize fs-5 text-start px-3">
                    {Def.example}
                  </li>
                ) : (
                 ""
                )}
              </>
            );
          });
        });
      })}
    </>
  );
};
 
export default Example;

Step IV(D) – Synonyms Component

import React from "react";
 
const Synonym = ({ all }) => {
  return (
    <>
      {all.map((Val) => {
        return Val.meanings.map((Means) => {
          return Means.definitions.map((Def) => {
            return Def.synonyms.map((Syn) => {
              return (
                <>
                  <li className="text-capitalize fs-5 mx-4 my-2">
                    {Syn}
                  </li>
                </>
              );
            });
          });
        });
      })}
    </>
  );
};
 
export default Synonym;

Step IV(E) – Antonym Component

import React from "react";
 
const Antonyms = ({ all }) => {
  return (
    <>
      {all.map((Val) => {
        return Val.meanings.map((Means) => {
          return Means.definitions.map((Def) => {
            return Def.antonyms.map((Syn) => {
              return (
                <>
                  <li className="text-capitalize fs-5 mx-4 my-2">
                    {Syn}
                  </li>
                </>
              );
            });
          });
        });
      })}
    </>
  );
};
 
export default Antonyms;

Step IV(F) – Audio Component

We cannot simply extract the audio file from the API as we did with others. We have to make a different state for it, and everything else accordingly.

  const [word, setWord] = useState();
  const [all, setAll] = useState([]);
  const [main, setMain] = useState([]);
  const [audio, setAudio] = useState();

We also have to convert the audio link from the API from SSH to HTTPS for the browser to understand it when we will use it in our audio tag

  const dataApi = async () => {
    const data = await fetch(
      `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
    );
    const dataJ = await data.json();
    setAll(dataJ);
    setMain(dataJ[0]);
    const url = dataJ[0].phonetics[0].audio;
    const urla = url.replace("//ssl.", "https://");
    setAudio(urla);
  };

Pass the audio state as props with the Select Component and make an audio tag for displaying it as shown in the Select component where you want to display it.

          {audio ? (
            <audio
              controls
              className="color m-4 text-center col-10"
              src={audio}
            ></audio>
          ) : (
            <div className="color fs-3 text-center">Audio not found</div>
          )}

The End Result

Dictionary App in React

You can always check out the complete code from my GitHub Repo and can also check out my other blogs on coding. 

Share your love

2 Comments

  1. I blog often annd I really appreciate your content.
    The article has truly peaked my interest. I will book mark your blog and keep
    checking ffor new details abot once a week. I subscribed to your
    RSS feed as well.

Leave a Reply