What you should Know:
Knowledge of Javascript
Basic knowledge of React
Basic knowledge of React Hooks, especially useState() & useEffect
React hooks are the modern way to deal with application state and lifecycle events within components. Hooks have been introduced to make React code cleaner.
React has multiple hooks to carry out different operations. We have majorly the useState and useEffect hooks. It’s necessary that every aspiring React developer should be knowledgeable in these hooks, especially these 2.
useState and useEffect are destructured from react.
import { useState, useEffect } from “react
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.
import { useState } from "react";
function newValue() {
const [value, setValue] = useState(0);
return (
{value}
//prints zero)
}
The useEffect hook allows us to respond to changes in the component lifecycle. The component lifecycle refers to a set of events that occur from the time a component is mounted to the DOM until it is removed. It uses a dependency array to determine how many times it renders.
One of the benefits of useState is used to fetch data from an Api endpoint
We will be using the Github Api to create collage of Github contributors. (This idea is extracted from CoddingAddict).
If we open the link(https://api.github.com/users) on the web browser, You would get this:
[
{
"login": "mojombo",
"id": 1,
"node_id": "MDQ6VXNlcjE=",
"avatar_url": "https://avatars.githubusercontent.com/u/1?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/mojombo",
"html_url": "https://github.com/mojombo",
"followers_url": "https://api.github.com/users/mojombo/followers",
"following_url": "https://api.github.com/users/mojombo/following{/other_user}",
"gists_url": "https://api.github.com/users/mojombo/gists{/gist_id}",
"starred_url": "https://api.github.com/users/mojombo/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/mojombo/subscriptions",
"organizations_url": "https://api.github.com/users/mojombo/orgs",
"repos_url": "https://api.github.com/users/mojombo/repos",
"events_url": "https://api.github.com/users/mojombo/events{/privacy}",
"received_events_url": "https://api.github.com/users/mojombo/received_events",
"type": "User",
"site_admin": false
},
{
"login": "defunkt",
"id": 2,
"node_id": "MDQ6VXNlcjI=",
"avatar_url": "https://avatars.githubusercontent.com/u/2?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/defunkt",
"html_url": "https://github.com/defunkt",
"followers_url": "https://api.github.com/users/defunkt/followers",
"following_url": "https://api.github.com/users/defunkt/following{/other_user}",
"gists_url": "https://api.github.com/users/defunkt/gists{/gist_id}",
"starred_url": "https://api.github.com/users/defunkt/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/defunkt/subscriptions",
"organizations_url": "https://api.github.com/users/defunkt/orgs",
]
An array of objects. We will to accessing each of these data and will be displaying it very soon.
Declare your function components.
Top comments (2)
It doesn't look like a complete article.
Where is the rest of the content after
‘’Declare your function components.‘’？
Hi, Gideon. This is a great article, but I can see you're having some issues integrating markdown in your article. It helps for better readability.