How to Make a Beautiful and Responsive Slider in React with React Hooks without any External Library

Project Requirements

  1. Creating our React app for this project
  2. Running it on our localhost 3000
  3. Starting our code by deleting the default code
  4. Writing the JSX code
  5. Applying Hooks

Project Setup

Let’s start by creating the Slider React App with the help of your terminal by navigating into the main folder.

When the app is ready, open it in any IDE and run it by typing npm start in your terminal. Your application will be running on localhost 3000.

Select App.js from the src folder, replace the default code with the Boilerplate code of React.

We will create component Data.jsx in the src folder which will contain the data of the card in the form of an array and will be exported and imported into the App.js

App Component

We will be building a slider that contains random reviews. The data is in the form of an array and is in a different file — Data.jsx that we have already imported.

Let’s complete our HTML with some data from our array. (CSS will not be discussed in this blog)

Applying Hooks — useState

useState() React Hook is used to changing the state of our current fields.

const [state, setState] = useState(0);Here 0 is the index value of the array which will become the value of the state

We have to define useState() too else we will receive an error,

import React, {useState,} from ‘react’

Let’s add the data from our Data Component dynamically.

Getting the data from an array can be done using the map method but it will render all of them, and we only want one at a time. Thus we will be using the concept of array destructuring.

const {id, name, image, title, quote} = Data[state];// keys of the object are destructured

Now, convert and write them as JSX-

Next, we will be changing the state to what we want to do. Here we want to increase and decrease the index number by one.

But we will receive an error when we go below 0 and above the length of the array. For that, we will use the if/else statement.

Congrats, you have made the slider in React without using any external dependencies and from scratch. Now add some custom CSS, and you are good to go.

For the whole code visit my GitHub or visit my codesandbox

Hope you find it interesting and helpful.

Happy Coding……

--

--

--

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Django + Angular 4 = A powerful web application

Part 3 — Linked List Data structure in js

How to deploy different versions in the same S3 with Github Actions

Dynamic Page And Route Generation

Why You Should Learn JavaScript

Angular Build Optimization | Part #1

How to create a strong and secure password in Node.js that cannot be decrypted

How to use grunt in Magento 2?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ateev Duggal

Ateev Duggal

I am a front-end developer from India with over one year of experience in freelancing with skills like Git, HTML5, CSS3, Bootstrap 4&5, and React.

More from Medium

How to import assets in ReactJS and understand public folder ? | React App

React Application Development

React & Chart.js

[ReactJS] Form elements: Controlled vs uncontrolled.

React.js Basics: Context API (Hook)

Component Structure For Context API