DEV Community: Amine Amhoume

React all hooks series: Let' acquire the useContext hook.

Amine Amhoume — Tue, 01 Feb 2022 07:57:13 +0000

Look! Every feature should solve a problem, so if you want to understand a new concept of a feature, then you have to figure out what problem it solves and how.

This is a journey to comprehend the problem with passing data using props and how Context API solve this problem. By the end of this tutorial will get the prize of acquiring the power of useContext hook.

Prerequisites? Basic ReactJS, know how to use useState() hook, and to understand what are props.

That's it. Let's go.

What is Context API?

Context provides a way to pass data through the component tree without having to pass props down manually at every level. We can implement it to work with global state and avoid props drilling.

Props drilling is when we are obligated to pass props to components that don't use them but their children do.

In the above picture, we are obligated to pass thename state through the Settings component as a middle man to work with it in the Profile and Shipping components ( Maybe pass it to the Appearance component too if it has children that require the state "name").

Code example?

In the Home component, we have the global state called name, consider it as a username. We pass the name andsetName to the Settings component as props and transfer them again to the Profile and Shipping components.

Let's cut the middle man by using the Context API.

First, we import createContext , initialize it with a null value, and export it :

import React, {useState, createContext} from 'react';
export const NameContext = createContext(null);

Next, we wrap the component we want to pass the data down to with a context Provider.

Keep in mind that the value prop is required. Here, we are passing an object.

Now the Settings component is clean.

"Profile" and "Shippings":

We import the NameContext we initialized before in Home , then we create a Consumer that wraps a function, the function takes an obj as a parameter ( it's the one we passed using the value prop) and return JSX with the state we want to render.

That was nice, right? I mean we cut the middle man (Settings component ). We no longer depend on it.

Our solution to props drilling is working but it's vulnerable.

Imagine if we have more that a global state to pass down the component tree.

Let's create another state called currency. User's currency in use.

const [currency, setCurrency] = useState('USD')

We initialize a context for it.

export const CurrencyContext = createContext(null);

And then, pass it by wrapping the Settings component with the currencyContext.Provider :

Let's use it in the Shipping component:

Inside the NameContext consumer, we inject the CurrencyContext consumer with a function that returns the JSX which uses the state.

It's hairy and ugly.

We need to simplify it. Let's invoke the useContext hook.

The Amazing useContext hook.

useContext is so simple to use. First, we import it:

import React, {useContext} from 'react';

Inside the Profile component, we initialize it with the name of the context as a value:

Just like that, we use it inside our JSX. No nested functions and thus no ugliness.

Congratualations, the journey has ended and you have acquired a new hook. Use it cleverly.

That was quite straight to the point, wasn't it?

See you in the next article…

Wait!

I'll be glad if you share my article.

ReactJS all hooks series: UseReducer in action.

Amine Amhoume — Fri, 21 Jan 2022 14:31:11 +0000

To be honest, I am tired of counter-app examples.

I had to step on and write this article to demonstrate to react beginners a real use case of useReducer() because I am sure you are tired of the counter app examples too. No?

In this article, we'll discuss what is useReducer(), its syntax, and implement it to create an effect of a well-known website (spoiler, it's Pinterest).

Prerequisite? Basic ReactJS and to know what is "state". Are you familiar with Redux or not? It doesn't matter. Optionally, it's good to know the reduce() method. Here's a small post that explains it in a nutshell.

So this article is for beginners who are into React hooks.

Before we proceed I would like to state that I am jobless for the moment and I am looking for a remote frontend job position. How can you help? Refer my portfolio to someone who's looking for a frontend developer, less than that, you can share my article.

Thank you and let's go.

What is useReducer() hook?

It's all about state management. useReducer() is an alternative to useState(). We use it to handle complex state logic because it gives us the ability to handle complex state logic that involves sub-values or when the next state depends on the previous one.

Here's the syntax:

import { useReducer } from 'react';

const initialState = SomeValue;

const reducer = (state, action) => {
    switch(action)
      case 'toClick':
         return newState
    default:
      throw new Error("Unexpected action");
}

function ComponentA() {

      const [actualState, dispatch] = useReducer(reducer, initialState);

      return (
           <button onClick={() => dispatch('toClick')}>
                Click me
           </button>
           );
}

We import useReducer, then we have the initialState which is the default value of the state.

Also, the reducer function takes two arguments: The state and an action and contains a switch statement.

In case the action is 'toClick' we will do something to the state and return it. But where? Now comes the hook itself.

const [actualState, dispatch] = useReducer(reducer, initialState);

useReducer() returns an array of two values:

the state ( where we save our calculated value from the switch statement).
A dispatch() method.

The useReducer() hook itself takes two arguments: the reducer function and the initial state of which we defined before.

The useReducer() takes the initailState and passes it to the reducer function through the state argument and whatever it returns, it saves it inside the actualState.

In programming, everything is confusing until explained with a real example.

A Real use case.

So I decided to work on a Pinterest clone. It turns out that the home page has this effect where four buttons represents four themes.

So I have four buttons and each click changes the state of four elements:

the color for the buttons.
The theme title.
The background pictures.
The color arrow down button

Let's go.

The default text is "Weeknight dinner" so I created a theme named dinner with the color of darkYello, so my initial state is going to be an object with three states: The color, the text, and the theme.

Next is the dispatcher:

It acts like the usual setState but instead, it sets an action.

Here, we have four buttons, each one has a dispatch function with an action as an object which contains the action's type.

Now the reducer function:

It takes two arguments: the state and the action.

We defined a switch statement because we have multiple actions. So, in case the user clicked on the button with the dispatcher green, the case green will be triggered and change the state of Color, text, and theme.

Now the useReducer() hook.

It takes the reducer function defined earlier and the initial state and returns an array. The returned array contains an object of the states: text, theme, and color, not to forget the dispatch method.

Here's how I am implementing it in the JSX.

PS: I am using TailwindCSS.

If the state is darkYello, then the background is bg-darkYello, if it's blue or green then the background is going to be gray.

And for the title.

I am just placing the state text and if's null it will display "Weeknight dinner" as a default value.

A wrap up!

The user will click on a button and the dispatch function will be triggered with an action, The reducer function will take that action plus the current state (if it's the first time, then it will take the initial state) and compare the action's type with all the cases, if one is found it will do the logic and assign the result to the states defined in the useReducer() hook, if no, it will return a state or throw an exception.

Is that it?

Well! yes, but actually no.

It's time for you to practice. If you have a dummy react project that uses useState, try it to replace it with useReducer.

The goal was to make you understand the useReducer() hook without using the counter app example.

I hope that you enjoyed the article and if so, please don't forget to share it. Also, feel free to add a comment if you see that I forgot to mention something important.

Thank you.

Javascript's reduce method in a nutshell.

Amine Amhoume — Tue, 18 Jan 2022 11:57:56 +0000

The word "reduce" in the English language means :

to diminish in size, amount, extent, or number

Let's suppose that we have an array of items

const cartItems = [1,3,5,7,9];

I want the sum of all the items.

I could use the For Loop but it's going to be a bit hairy. The method reduce() will give us one total number with less code (always go for the less-code option).

reduce() takes two arguments: a callback function (the reducer itself) and an initial value. The callback function takes two arguments: the previous value and the current value:

let total = cartItems.reduce((previousValue, currentValue) => {
    return previousValue + currentValue;
}, 0)

Let's calculate the first rotation on the array.

The previousValue is going to be equal to 0 while the currentValue is going to be equal to the first item in the array, which is 1.

Next, the previousValue is going to be equal to 1 while the currentValue is going to be equal to 3 and so it goes. The total amount will be sum of all the numbers: 25

Keep in mind that the initial Value is totally optional. When omitted, the first value of the array is used as an initial value.

Note: the reverse of the reduce() method is reduceRight(). Yes! It takes items from right to left.

Ladies and gentlemen, that was a quick tutorial of the reduce() method.

Don't forget to practice.

Thank you.

Dev beginners, learn to use
and
elemnts in your favor.

Amine Amhoume — Thu, 30 Sep 2021 17:27:10 +0000

You know when you are just into learning HTML and CSS and you are like "Wooow! There are too many tags and attributes to remember. I have to remember them all".

No! You don't.

I say, practice what you know. Discover what you don't know, then practice it.

To be short, in this article, you will learn how to use <details> and <summary> HTML elements to make an accordion. We will create an accordion and style it with CSS but first…

What are Details and Summary?

The <details> HTML element creates a widget that can disclose some information when toggled. The element has two modes: close and open.

The <summary> tag which is apart from the element and it should be filled with the title of the accordion. A question most of the time.
Enough theory. Here's an example:

<details>
      <summary> What is a Details tag?</summary>
      <p>
        The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary  element.
      </p>
    </details>

Notice that the <summary> tag is inside <details>.

We can implement this to create a FAQ accordion such as in the picture above.

Here's the HTML markup:

<div class="container">
  <div class="question-1">
    <details>
      <summary> What is a Details tag?</summary>
      <p>
        The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary  element.
      </p>
    </details>
  </div>
  <div class="question-2">
    <details>
      <summary> When to use it?</summary>
      <p>
        We use details tag when we want to make an accordion element.
      </p>
    </details>
  </div>
</div>

All simple. We have a div container and two other divs as questions. Inside the two questions we have the details tag, the summary element as the question, and the p tag as the answer to the questions. Easy to grasp.

In the CSS file, we start by setting up our body such so:

*{
  box-sizon: border-box;
  margin: 0;
  padding: 0;
}
body{
    background-color: #CA2E55;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

Extremely simple. Now let's style our container:

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FFE0B5;
    width: 50%;
    margin: 20px auto;
    border-radius: 15px ;
}

To put the container in the center we can use a width that is less than 100% and the magical: margin: 0 auto;.

We put a 20px margin so it doesn't stick at the top. We use flex to center everything in the center.

question-1 and question-2:

question-1 and question-2: 
.question-1{
  width: 90%;
  border: 2px solid;
  margin: 15px 0;
  border-radius: 15px ;
}
.question-2{
  width: 90%;
  border: 2px solid; 
  margin: 15px 0;
  border-radius: 15px ;
}
amhoume.medium.comNow the details element when closed. 
details{
  font-size: 1.5rem;
  margin: 10px;
  cursor: pointer;
}
and when it's opened. 
details[open]{
  background-color: white;
  transition: all .8s ease;
}

Now the details element when closed.

details{
  font-size: 1.5rem;
  margin: 10px;
  cursor: pointer;
}

and when it’s opened.

details[open]{
  background-color: white;
  transition: all .8s ease;
}

Notice that we used the attribute open to style the element when it's opened.

Hi, my name is Amine, I am from Morroco and I AM HORRIBLE AT UI/UX.

Notice the arrow? That comes as default style and it makes the element much ugly than it is. Let's change it.
We can use an icon of an arrow :

details > summary {
    list-style-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%2012l-7-6v5H6v2h6v5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
  border-bottom: black 1px solid;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

You can cut it off by using: list-style: none;

And that's it. We have a simple FAQ accordion.
Also, I want to tell you that you can use the open attribute in the HTML to keep it open all the time:

<details open>
      <summary> When to use it?</summary>
      <p>
        We use details tag when we want to make an accordion element.
      </p>
    </details>

You can use the detail element to create a dropdown menu. I tried it once and suggest you use a CSS preprocessor such as Sass.

And here is the Codepen demo.

Finally, exploring HTML tags and various attribute is one of the best things that you can do as a beginner.

I won't say do it when you have time but whenever you get the imposter syndrome telling you that you can't write HTML/CSS.
It happened to me and that's why I am sharing.

Follow me on Twitter and contact me via LinkedIn.

How to create a contact form in React.js for beginners"

Amine Amhoume — Wed, 15 Sep 2021 10:40:13 +0000

A contact form is one of the most essential parts of any website… blah blah blah.🗣

You already know this.

You are here because you know how important forms are. And you want to create one I guess.

Welcome, today we will learn how to create a form using Reactjs.

Here's what we will be building: React-form.

It's simple, has no fancy UI, and is somehow useless.

GitHub repo: github.com/aminequ/react-form

Prerequisites:

Basic knowledge of React stateless components.
Basic knowledge of CSS/Sass.

That's it. Let's begin.

Setting up the environment.

Create a react project using either npm or yarn. Both work well.

npx create-react-app form

Nope, I didn't trick you! npx is the same as npm.

We will be using Sass as a preprocessor. But I promise I won't bother you with any styling.

Install node-sass like this:

npm install node-sass

Open the project with your beloved code editor then delete the default unnecessary files. If you have never done that, here's how, otherwise you can skip this part.

Delete these:

App.test.js
reportWebVitals.js
setupTests.js

Remove the default code and styles from App.js/App.css/index.js/index.css

App.js should only contain the App function that returns an empty div.

Now create a new folder inside the src folder and give it the name of "components", then create a new component and name it Form.js. Also, create a stylesheet and name it "formStyle.scss".

Start the local server:

npm start

Adding style.

I said it before, it's nothing fancy but if you want me to explain all the styling, then please, feel free to leave a comment. For now, just copy the styling from the GitHub repo and place it where it should be placed ( formStyle.scss ) 😎

Let's code the form.

Following written coding tutorials can be tricky sometimes but I will help you, so code this inside the Form.js component:

import React from 'react'
import './formStyle.scss'

function Form() {
   return(
      <div className="container">
   </div>
 )
}
export default Form

We imported react, the styling, and created a stateless function with the name of "Form" . The function returns a

with a class name of "container".

Inside the container, go on and:

Add an <h1> with "Contact us".

Create a form element and give it the class name of "form".

Create a div with a class name of "name". This will act as a container for first and last name fields.

Add a <label> tag with an attribute of for="firsrName".

Check out this quote about the tag:

…This is the most important element if you want to build accessible forms - when implemented properly, screenreaders will speak a form element's label along with any related instructions, as well as it being useful for sighted users.

However, always remember to include the "for" attribute.

Now add an <input> element with the following attributes:

type="text"
name="firstName"
className="firstName"
tabIndex="1"

To make our form accessible, we put the "tabIndex" attribute to help the users tab through the form with the order we want and not the default order elements are coded.

In this case, we gave the first-name number one which means it's going to be the first input the user will tab through.

Now, repeat and create another and elements for last name.Put same attributes, but change the word the "first" with "last" and give thetabeIndex attribute the value of "2".

The output code:

<div className="container">
  <h1>Contact us</h1>

 <form className="form">

    <div className="name">

       <label for="firstName">First name</label>
       <input
            type="text"
            name="firstName"
            className="firstName"
            tabIndex="1"
       />
       <label for="lastName">Last name</label>
       <input
            type="text"
            name="lastName"
            className="lastName"
            tabIndex="2"
       />
    </div>
 </form>
</div>

Let's create the email input field.

<label for="email">Email</label>
<input
     type="email"
     name="email"
     id="email"
     className="email"
     placeholder="example@corp.com"
     tabIndex="3"
/>

Almost nothing new, we added a <label> with the for attribute with the value of "email" and a string of "Email". Next, add an <input> with almost the same attributes.

We gave the email input the tabeIndex of "3" so it's the third filed the user will tab through.

Let's go for the message input which will not be an element but a . The difference? It's so simple.

We use the when we want to have a one-line text field just like in name and email. is for multiple line text. Here, a message could be a one-sentence, a paragraph, or a whole cover letter.

I usually post such semantic tips and other front-end development tricks on my Twitter and Instagram. I invite you to follow me and fill your feed with useful content.

Now add a <label> with a for attribute and text of "message". Add a <textarea> tag with the attributes of: name/className/placeholder.

Output code:

<label for="message">Message</label>

<textarea
  placeholder="Start typing..."
  className="message"
  name="message"
/>

let's add a submit button which is going to be the cherry on the cack.

Create a element with the type of submit and a className of "send":

<button type="submit" className="send">Send</button>

Make sure you've put everything in place and check if the form looks as in the live version

If there's an error, go back and check the output codes or refer to the code in the repo.

All good?

Make it functional with useRef()

Our form will only be functional when we are able to take the data submitted by the user and store it into an object, then do something with it later.

Let's first understand what exactly is the useRef() hook. In short, hooks let you use React features without writing a class and useRef() is one of these features.

Okay! And what does this feature of useRef() do?

Refs provide a way to access DOM nodes or React elements created in the render method.

useRef() can be a replacement for useState(). It behaves exactly as useState() except that the latest triggers a re-render while useRef() doesn't.

useRef returns an object with a property called current and it refers to the current node or element targeted by the hook. You will understand this in a few seconds.

In order to work with useRef() hook, first we need to import it just like how we import useState and other hooks.

import React, { useRef} from 'react'

Here's the syntax:

const whereWeStoreInputValue= useRef(initialValue)

Let's implement it into our form.

Create the following variables inside the Form component but not inside JSX of course.

Each input should have its own variable.

const firstNameRef = useRef(null)
const lastNameRef =  useRef(null)
const emailRef = useRef(null)
const messageRef =  useRef(null)

Notice that we used null as an initial value because we want no value at the beginning. You can use an empty string instead.

Now we need to go back to the form inputs and add the ref={} attribute.

in each input in the form, add the ref attribute with corresponded variable.

For example, The field responsible for Firstname can have the following attribute ref={firstNameRef}

That will connect the useRef variable with the right element. Get it?

Now let's create a function that will handle the submission of the form. We want to a function that will contain the retrieved data and store it in an object.

Code this inside the Form component and right below the four variables we created previously:

const handleSubmit = (event) => {
      event.preventDefault()

      const data = {
            firstName: firstNameRef.current.value,
            lastName: lastNameRef.current.value,
            email: emailRef.current.value,
            message: messageRef.current.value
            }
      alert("tadaaa!: \n" + JSON.stringify(data) + "Your data 😎")
}

The function has the event as an argument. We use "event" with the well-known method "preventDefault" to stop the browser from performing the default behavior of the target element, in our case, it's refreshing the page.

Next, we created an object with four properties, each property contains the reference to the current value of the targeted element.

For example, in the code above, we put ref={firstNameRef} inside the first name input, then we referred to it back in the object data:

firstName: firstNameRef.current.value

For the scope of this article, we only alert the data back to the user. 🤷‍♂️

Again, check if everything works, if not, go back to where you think missed up.

That's for this part. In the next one, we will see how can validate the user inputs before we pass them to the data object.

If you feel like you've learned something new, share this article, someone somewhere is looking for it. They will appreciate you and consider you as their saver.

See you.

Javascript Arrays: A guide, a cheat sheet, and for beginners.

Amine Amhoume — Wed, 09 Dec 2020 14:11:33 +0000

Aright! Hear me out!

When you do make it, give back.

When I first started learning Javascript and came across Arrays, I said to myself "Okay! I know what is an array. I know how to use it in python so it's going to be the same thing".

After digging deeper into javascript, I realized how stupid I was.

Arrays in Javascript are a bit different than what they are in Python. At least this is my opinion on them.

They are the most used data structure and an important component in any javascript application. So, I decided to write a piece of content about arrays because I believe I can resonate with beginners who want to learn about them.

This guide will be several parts divided and in this part, we will talk about basic arrays and some simple methods.

By the end of this article, you will learn about arrays and their methods. You can also bookmark this article and use it whenever you up to work with Arrays.

You will forget the syntax. We all do. And that's okay

No further hype.

What's an array?

Simply put, an array is a type of data structure. We use arrays when we want to make an ordered collection of items. These items can be users, food, place, or anything.

So, again, we have some data and we put it in an ordered structure. Just like this:

let Users = ["Isaac Netero", "Zeno Zoldyck", "James Bond"]

Each item has its own index. An "Index" is the order number of the item.

Users[0] is Isaac Netero 
Users[1] is Zeno Zoldyck 
…

Since everything in Javascript is made of Objects, Arrays also are objects behind the scene.

Wait! But we didn't put any numbers in our array. Yes, that how Javascript represents an array's indexes.

Okay! So what's the difference between Objects and arrays.
Both are different types of data structures.

In javascript, Arrays are more flexible and convenient to use than Objects because they have so my methods that make working and manipulating data inside arrays flexible.

Show me.

Arrays Methods.

Here we go!

We have a simple array that represents a bunch of students.

let students = ["Amine", "Alicia", "John"]

pop() removes the last item from the array and returns that value.

let alicia = students.pop(1)

removes "Alicia" from the array and returns it back to the variable alicia.

push() adds items to the end of the array and returns the new length of the array.

let newLenght = studnets.push('Alicia')

Add Alicia to the end and store the length (3) in the newLenght variable.

shift() removes the first element from an array and returns that removed element.

let amine = students.shift(1)

omit "Amine " and store the returned value in the variable amine

join() gathers all the items of an array in one string.
Items can be separated by commas or anything inside the ().

students.join(', ') //returns "Amine, Alicia, John"
studnets.join('-') //returns "Amine-Alicia-John"

reverse() Yes! you guessed it right. It reverses an array. The first item becomes the last one, and the last item becomes the first in the array.

students.reverse() //returns ["John', "Alicia", "Amine"]

What's the flexible way of accessing the last item of an array you don't know its length?

Answer: students.reverse()[0]

Once you learn more about arrays and their methods, you will able to create such things by yourself.

Continue on...

indexOf() returns the first index at which a given item can be found in the array, or -1 if it is not present.

students.indexOf('Amine') //returns 0

fill() changes all items in an array to a static value, from a start index (default 0) to an end index (default array.length).

let newStatic = students.fill(null, 0, 1)

change items to null from the index of 0 to 1 (one item) where null can be any value.

returns [null, "Alicia", "John"]

NICE!!

every() tests whether all items in the array pass the test implemented by the provided function. It returns a Boolean value

let's check if all the items in the array are strings:

let test = (value) => value = toString(value)
console.log(students.every(test))
//returns true

Each item of the array takes the place of 'value'. Humm? Do you get it?

In another way:

for (let name of students){
 if (name = toString(name){ 
   return true
   }
};

findIndex() returns the index of the first item in the array that passes a testing function.

Let's suppose we have a very very long array of names and one number, and we want to return the index of that number.

let Users = ["Amine", "Alicia", "John", 22]

let test = (value) => value = parseInt(value);

console.log(students.findIndex(test))
//returns 3

concat() is used to merge two or more arrays.

let's add another array and concatenated with the first one.

let otherClass = ['Zoldyck', 'Chrollo', 'Merieum']
let newClass = students.concat(otherClass)
["Amine", "Alicia", "John", "Zoldyck", "Chrollo", "Merieum"]

slice() returns a bunch of items you select using start / end indexes.

Let's take the newClass and return the students of the old class only.

newClass.slice(0,3)

[ Amine, Alicia, John]

forEach() executes a provided function once for each array element.

students.forEach(student => console.log(student)) 

Amine
Alicia
John
Zoldyck
Chrollo
Merieum

An alternative method to do the same is filter(). But this method returns an array.

Enough for today. Practice, practice practice is the only advice I can give you and the best thing you can do for now.

Ready for part two?