/react-component-depot

A collection of react components with video tutorials

Primary LanguageJavaScript

Welcome to react-component-depot!

Netlify Status

A repository contains an extensive list of react components built from scratch with youtube linked tutorials.

https://react-component-depot.netlify.app

Tutorials

All the components in this repo is covered by the tutorials on the D'Coders YouTube channel. The link for the tutorial will be given at the top of each page.

Project

Project is bootstrapped with create-react-app and uses react V16.13.1

Folder Structure

Please follow the folder structure of CRA. You can find more in this in their official github page.

react-component-depot
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── actions
    ├── components
    ├── hoc
    ├── hooks
    ├── pages
    ├── reducers
    ├── resources
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── routes.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js

Note: New Files and Folders will be added to the src over time.

🗀 pages - Pages are the entry points for all the user facing demo pages

🗀 hooks - Collection of hooks created and used in this application

🗀 actions - Contains the action creators for redux

🗀 components - Reusable components used in our application

📄 routes.js - Used to define application routes and Menu items

Tutorials List

  • Building a datatable in ReactJS from scratch with pagination, search and sorting [Demo] [Tutorial]
  • File Upload with cancel button and progress bar In ReactJS [Demo][Tutorial]
  • How to get client IP address and location in ReactJS [Demo] [Tutorial]
  • Infinite scrolling in ReactJS using react-waypoint [Demo] [Tutorial]
  • Integrate Google's recptcha in ReactJS and verifying user response in NodeJS [Demo] [Tutorial]
  • How to customize scroll bar in ReactJS [Tutorial]
  • How to deploy ReactJS app in netlify for free with CI/CD [Tutorial]
  • Integrate hCaptcha in ReactJS and verifying user response in NodeJS [Demo] [Tutorial]
  • Building an autocomplete component in React JS with keyboard navigation [Demo] [Tutorial]
  • Easy Dark mode switcher in react app using a custom hook [Tutorial]
  • Building a search filter with react useMemo hook [Demo] [Tutorial]
  • Show and Hide elements with a custom visibility toggle hook in ReactJS [Demo] [Tutorial]
  • Building accordion panel in reactJS with single & multiple configuration [Demo] [Tutorial]