• Post category:StudyBullet-9
  • Reading time:5 mins read


Learn how to add react pagination with API data, React js collapse features and build a complete react js web app

What you will learn

How to get API Data

React pagination

Pass data from one component to another

React state and how to change React state dynamically

How to deploy your project to Netlify

Pagination Design

Description

Welcome to this course. React js is a hot topic in the web development field. In this class, you are going to learn how to design and build fully functional pagination in react js with API Data.

First of all, you are going to learn how to get API data and show it on a card. You will learn how to pass data from one component to another component and dynamically show API data on a card.


Get Instant Notification of New Courses on our Telegram channel.


After that, you will learn how to add react pagination in the API data that we are showing in a card view. To add pagination we will use react paginate package and it has so many features and is very easy to use. I will show you how to add all the features of this package and design a nice looking fully dynamic pagination.

Here are some lists that you are going to learn by the end of this course:

  1. How to get JSON API data in react app.
  2. Design a card for each API Item.
  3. Collapse option for each card and learn how to show more data after expanding a card.
  4. How to use react icons in react js app
  5. Learn How to update react state dynamically.
  6. Pass data from parent component to child components.
  7. How to use react pagination for react js app
  8. Pagination design and dynamically update new API item
  9. Learn How to mark the active pagination.
English
language

Content

Introduction

Introduction

Create React Project

Create React Project

Install React Packages

Install React Packages

Get API Data

Get API Data

Show API Data in a Card

Show API Data in a Card

Show API Data and Card Design

Show API Data and Card Design

Card Collapse Features

Card Collapse Features

Highlight Collapse Card

Highlight Collapse Card

Slice Data for Pagination

Slice Data for Pagination

Add React Pagination

Add React Pagination

React Pagination Design

React Pagination Design

Highlight Active Pagination and Design

Highlight Active Pagination and Design

Deploy React Project to Netlify

Deploy React Project to Netlify