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.
Index
Let’s start
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
Working on the UI part
As for the UI part, this app will be divided into two sections
- Searching the meanings of a specific word using API
- 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.
Bootstrap as a CDN and some vanilla CSS has been used for their styling and will not be covered in this article.
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() hooks.
State Management – useState() hook
const [word, setWord] = useState();
const [all, setAll] = useState([]);
const [main, setMain] = useState([]);
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("");
};
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.
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>
)}
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
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 the nesting map function.
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;
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;
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;
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
You can always check out the complete code from my GitHub Repo.
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.
Thanks, Appreciated