Widgets - React, React Hooks

👉Demo👈

• Due to Google Translation API not being free the API only runs on networks running on HTTPS (localhost:3000) 😞.
• I have included images of the Google translation widget bellow attached to the read me.

What is this project? 🤔

• A project creating custom hooks that can be reused, each widget gradually implements more hooks. The hooks used in this project are: useState, useEffect and useRef.

What I learnt? 🚀

1. useEffect - learnt how to use "lifecycle" type methods in an function component, knowing the syntax of clean up function and the second arguments that are passed in e.g. useEffect(() => { ... }, []) or useEffect(() => { ... }, [data]).
2. useState - learnt how to use states in a function component.
3. useRef - understand how to access DOM Nodes/React Elements using useRef, and where I should be updating the useRef inside the component i.e. only update useRef inside a useEffect or useEffectLayout or inside an event handler.
4. React.Fragment - I used the React Fragment to return a list without adding extra nodes to the DOM, I passed the key for the list inside the React Fragment to avoid rendering an additional <div></div> tag.
5. Google Translate API - understanding how to connect the application with the translation API thorugh axios.post().
6. Wikipedia API - understanding how to connect the application with the wiki API thorugh axios.get().

Technologies used: 🖥

1. React
2. Google Translate API
3. Wikipedia API
4. Axios
5. Semantic UI - for CSS

Images: 📸

• Japanese.png - the Japanese translation generated by the Google API.

• Spanish.png - the Spanish translation generated by the Google API.

• French.png - the French translation generated by the Google API.