DEV Community: Gideon Chimaroke

Mastering the useState Hook: Creating a GitHub profile catalog using an API

Gideon Chimaroke — Tue, 31 Oct 2023 10:46:18 +0000

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.

Exploring Variables in CSS (custom properties)

Gideon Chimaroke — Mon, 30 Oct 2023 16:53:42 +0000

Variables in CSS (custom properties)

Like most programming languages, native CSS now has support for variables. If you have knowledge of programming languages, you will know variables are used to store values.

CSS variables (officially known as custom properties) are entities defined by a user. They allow you to store values in your CSS files, which other parts of your stylesheet can then use. This makes it easier for teams working on large projects and allows developers to change values without repeating the change to every element style. They can be used as a value for any property, including, color margin and padding (eg., — primary-color: red; ).

Prerequisite:

Basic knowledge of styling HTML documents using CSS.

Basic Usage — how to declare a custom property

To declare a variable in CSS, come up with a name for the variable, then append double hyphens (-) as the prefix.

It is best practice to define all of your variables at the top of your stylesheet. You could declare them in the :root element.

:root {
--primary-color: #FF5733;
--mypadding: 2rem;
}

Note: The custom property isn’t just for declaring color property. It could be used to house different CSS style properties.

Here is a working example:

Here’s an HTML boilerplate with a couple of HTML tags. We’ll be styling these tags with CSS variables.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="hello.css" />
</head>
<body>
<h1>Welcome to Medium</h1>
<h2>Using CSS custom properties</h2>
</body>
</html>

I decided to center the text and change the background color with my predefined variable (--body-color). I defined five variables at the top of the stylesheet.

Lastly, I applied those variables to my tags using the var() function.

CSS part:

:root {
  --body-color: rgb(33, 47, 108);
  --primary-color: #ff5733;
  --secondary-color: #ebb41f;
  --H1font-size: 4em;
  --H2font-size: 2em;
}
body {
  background-color: var(--body-color);
  text-align: center;
}
h1 {
  color: var(--primary-color);
  font-size: var(--H1font-size);
}
h2 {
  color: var(--secondary-color);
  font-size: var(--H2font-size);
}

Handling invalid variables with fallbacks:

In some cases, you might reference a custom property that isn’t defined in the document. This is the case when you misspell a variable name. You can specify a fallback value to be used in place of that value. The syntax for providing a fallback value is still the var() notation. Add a comma and then give the values that come as a substitute. You could suggest multiple fallbacks.

:root {
  --primary-color: #33ffd3;
}
h1 {
  color: var(--priary-color, #ff0000, #ffffff); /* if --priary-color doesn't work, then the next fallbac*/
}

Did you notice that I misspelled the value — primary-colour? This should cause the value to be undefined, in which case the browser would use the first fallback value (red). If, for some reason, the first fallback doesn’t show, the next value would kick in(white), and so on. The browser will use the initial default color if it can’t find any of the provided values.

Building a button variation — applying custom properties

We’ll be applying the knowledge of custom properties to create different buttons. Buttons are an important part of a website. The appearance of a button is necessary for any website. I created three buttons and styled them with the predefined variables.

Here is the Html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="hello.css" />
</head>
<body>
<section>
<h2>Button variation</h2>
<button class="Success">Submit</button>
<button class="Cancel">Cancel</button>
<button class="Back">Back</button>
</section>
</body>
</html>
Here I gave each of the buttons different class names which I will style in the CSS section.
:root {
--back: #353434;
--cancel: #ce0606;
--success: #138b71;
--white: #ffffff;
}
.Back {
background: var(--back);
color: var(--white);
padding: 1rem 20px;
border-radius: 10px;
color: var(--white);
font-weight: 700;
cursor: pointer;
outline: none;
font-weight: 700;
}
.Success {
background: var(--success);
color: var(--white);
padding: 1rem 20px;
border-radius: 10px;
color: var(--white);
font-weight: 700;
cursor: pointer;
outline: none;
font-weight: 700;
}
.Cancel {
background: var(--cancel);
padding: 1rem 20px;
border-radius: 10px;
color: var(--white);
font-weight: 700;
cursor: pointer;
outline: none;
font-weight: 700;
}

The variables are defined in the :root element with various colors. These variables are then added to the various background and colors using their variable names.

The output:

Variables are a great way to add flexibility to your CSS. They allow you to change the value of a property at runtime, and they’re also helpful for easily testing different values. Variables are an essential part of modern CSS development, but they can be hard to understand for beginners. This article is to walk you through how they work and how you can use them in your own projects.