“Create a slider with React Hooks,” they said. “It will be fun,” they said…

Just kidding — it is fun, and I’m going to show you how to do it. This tutorial has been extended from its original version, to become a three-part series.

Here’s what we will cover in each portion:

1. Creation of all the components necessary to display an array of content, as well as the ability to navigate back and forth to each slide in our slider.
2. Adding an autoplay feature.
3. We will dive deeper into React Hooks and optimize the slider both for performance and visual appeal. We will achieve this by tapping into useEffect and some new memoization helpers.

I highly recommend reading through the article first, but I have also included a video tutorial at the end of the article, a link to the repository that includes the code, and links to the second and third parts of the series.

Okay, I know what you’re thinking: Let’s get rocking and rolling.

---

Designing the Components for Our React Hooks Slider

Step 1: First, we need to plan the structure of our slider. I have broken down what I think we need to accomplish this with a list of components below:

• Slider (Our top-level component)
• SliderContent (This will contain all of our slides)
• Slide (The actual content)
• Arrows (Left and right Arrows)
• Dots (The “pagination” that shows the number of slides, and which slide we are currently viewing)

I will explain more about what each of these components does as we build them out. Without further ado, let’s start out with some code for our Slidercomponent.

---

Slider Component

Step 1. Slider is going to house all of the other components I listed above and will also contain the logic that makes everything work together. In this example, I am going to be building our slider to be the full height and width of the browser, to make things easy.

Let’s check out what our initial version of Slider looks like.

import React, { useState } from 'react'

	/**
	 * @function Slider
	 */
	const Slider = () => {
	  return <div>{/*  */}</div>
	}

	export default Slider

Slider Component

Super simple. Now that we have our skeleton created, let’s dive into how the parent level Slider and its child component, SliderContent, are going to work in tandem to create the visual effects that are standard in any slider.

#react #reactjs #es6 #react-hook #javascript #programming