2. What is an API?
• API is an abbreviation for Application Programming Interface
which is a collection of communication protocols and
subroutines used by various programs to communicate between
them.
• API’s play a bigger role in today’s economy than ever before.
They allow us to share important data and expose practical
business functionality between devices, applications, and
individuals. And although we may not notice them, APIs really
are everywhere, powering our lives from behind the scenes.
3. Some examples of API
1. Weather Snippets
One common API usage example we come across on a daily basis is weather data. Rich weather snippets seem to be
commonplace, found on all platforms, like Google Search, Apple’s Weather app, or even from your smart home device.
For example, if you search “weather + [your city’s name]” on Google, you’ll see a dedicated box at the top of the search
results (called a rich snippet) with the current weather conditions and forecast. Google isn’t in the business of weather data
(yet!), so they source this information from a third party. They do so by means of an API, which sends them the latest
weather details in a way that’s easy for them to reformat.
2. Log-in Using XYZ
Another prominent example of API usage is the “log-in using Facebook/Twitter/Google/Github”
functionality you see on so many websites.
Instead of actually logging-in to users’ social media accounts (which would pose a serious
security concern), applications with this functionality leverage these platforms’ APIs to authenticate
the user with each login.
4. How to fetch data from an API in ReactJS
?
• Here, we will know how we fetch the data from API (Application Programming Interface).
For the data, we have used the API endpoint
from https://jsonplaceholder.typicode.com/todos
• We will create a component in our react project and from the API, we have target
“userId”, “id”, “title”, “completed” and fetch the data from API endpoints.
• Below is the stepwise implementation of how we fetch the data from an API using react:
• Step 1: Create React Project
npx create-react-app myproject
Step 2: Change your directory and enter your main folder charting as
cd myproject
Step 3: Write code in App.js to fetch data from API.
5. Using fetch() method to load API
• The fetch() method in JavaScript is used to request to the server and load the information in the
webpages. The request can be of any APIs that return the data of the format JSON or XML. This
method returns a promise.
• The following code snippet displays the code for fetching the api data using fetch():
• Here useEffect is a hook which tells React that your component needs to do something after render.
It accepts two arguments where the second argument is optional.
6. React Hooks
• Hooks allow function components to have access to
state and other React features. Because of this, class
components are generally no longer needed.
• There are 3 rules for hooks:
• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional
• Note: Hooks will not work in React class components.
• We will be understanding two types of hooks in react:
• useState()
• useEffect()
7. useState Hook
• The React useState Hook allows us to track state in a function
component.
• State generally refers to data or properties that need to be tracking in an application.
• To use the useState Hook, we first need to import it into our
component.
• We initialize our state by calling useState in our function component.
• useState accepts an initial state and returns two values:
• The current state.
• A function that updates the state.
8. Example
In the above code snippet, The first value,color , is our current state.
The second value, setColor, is the function that is used to update our state.
To update our state, we use our state updater function.
We should never directly update state. Ex: color = "red" is not allowed.
9. Update State
In the above code snippet, we have created a button which when clicked will change the
state of color using setColor. Now, the value of color will be blue.
10. useEffect Hook
• The useEffect Hook allows you to perform side effects in your
components.Example fetching api data
• useEffect accepts two arguments. The second argument is optional.
• useEffect(<function>, <dependency>)
• Let’s take an example to understand useEffect hook.
11. Example
Here in this code, there is a button which will increment the current value of the variable
count. And in useEffect we have put the count variable as a dependency of the hook. So
what will be happening here?
This will execute the code under the callback every time the value of our count variable
changes.
You can perform any action here. And you can also perform multiple actions.
