Description

Data manupulation and representation On React JS Function Based Components.

  1. Count Data Representation
  2. Todo List Data Representation
  3. Child To Parent Data Representation
  4. Static Data Representation
  5. API Data Representation
  6. Sortable Data Representation

Live App: https://chanchal-kumar-mandal.github.io/reactjs-play-with-data/

Demo Screenshots

Frontend UI:

Screen Shot 2022-05-08 at 4 59 40 PM

CountData:

Screen Shot 2022-05-08 at 5 01 41 PM

TodoList:

Screen Shot 2022-05-08 at 5 02 18 PM

Pass Data From Child To Parent:

Screen Shot 2022-05-08 at 5 03 10 PM

Screen Shot 2022-05-08 at 5 03 24 PM

StaticData:

Screen Shot 2022-05-08 at 5 04 00 PM

ApiData:

Screen Shot 2022-05-08 at 5 04 54 PM

SortData:

Screen Shot 2022-05-08 at 5 13 43 PM

Screen Shot 2022-05-08 at 5 14 13 PM

Requirements

Install Nodejs

https://nodejs.org/en/download/

Install Visual Studio (VS) Code

https://code.visualstudio.com/download

Install Extension In VS Code

  1. Thunder Client
  2. ES7 React/Redux/GraphQL/React-Native Snippets
  3. Bracket Pair Colorizer
  4. Auto Rename Tag
  5. Live Server
  6. Prettier – Code formatter

Add Chrome Extension

React Developer Tools

Install react app

$ npx create-react-app reactjs-play-with-data

Go to app directory

$ cd reactjs-play-with-data

Install react-icons

$ npm install react-icons

Start app open (http://localhost:3000) to view it in your browser after run below command.

$ npm start

Imporatnat links

This project was bootstrapped with Create React App.

GitHub

View Github