Dictionary App in React 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.
Let’s start
We can easily create our React App using the npx create-react-app command by navigating to our React directory.
For this to work, we should have the latest versions of npm and node installed in our systems
As for the UI part, this app will be divided into two sections
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.
Bootstrap as a CDN and some vanilla CSS has been used for their styling and will not be covered in this article.
We can use it for many things including state management and handling API calls for this we will be using the useState() and useEffect() hooks.
const [word, setWord] = useState();
const [all, setAll] = useState([]);
const [main, setMain] = useState([]);
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("");
};
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.
And as we discussed, there will be two sections to 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>
)}
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
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 the nesting map function.
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;
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;
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;
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>
)}
You can always check out the complete code from my GitHub Repo.
Inheritance in Java is a mechanism of creating a new class or interface from an…
In this blog, we will not only understand the concepts of OOPS in Java in…
Object-Oriented Programming System (OOPS) is a programming paradigm built around the concept of objects —…
Abstraction in Java is one of the four pillars of OOPs which is used to…
In this blog, we will learn How to Detect a Click Outside of a React…
learn How to Use Hooks to Create Infinite Scrolling in React by making a custom…