DEV Community

Prashant Yadav
Prashant Yadav

Posted on • Updated on

I created 31 react components during my quarantine

31 reusable react components list

It was mid of march when my company has asked me to start working from home due to covid-19.

As I was already spending 4 hrs in travelling daily. I thought why don't I utilize this time to learn something new.

So I decided to create 31 reusable components in react.

There was two things which pushed me to pick up this #31DaysOfReact challenge.

  1. As a frontend developer doing this will help to me polish my knowledge.
  2. I am a blogger and write articles about Javascript and DSA on learnersbucket.com. So this will also be a good content for my blog.

Initially, I had ideas about 5 to 6 components which I started with but for the other components I looked up for generic components that are often used and created them.

It was not easy to create components and write a blog at the same time while working full time.

That is why it took me about 45 days to finish all the components.

But I really enjoyed a lot doing this and it was really amazing learning experience.

I learned about

  • Frontend Development.
  • Styling (CSS).
  • React.
  • Ref (How to update elements properties directly without using state).
  • Thinking in react (How to create extendable components).
  • Cross browser compatibility.
  • Form handling.
  • And more.

Here is the list of things I have created.

Form Elements

  1. Create custom button component in react
  2. Create input component in react
  3. Create checkbox in react
  4. Create radio group component in react
  5. Create checkbox group component in react
  6. Create file uploader in react
  7. Create select dropdown in react
  8. Toggle switch in react
  9. Login form component in react

Other Generic Components

  1. Create progress bar in react
  2. Pagination component in react
  3. Create accordion in react
  4. Create dropdown in react
  5. Create autocomplete search in react
  6. Sliding sidebar menu with hamburger in react
  7. Create tabs in react
  8. Create alert box in react
  9. Create modal component in react
  10. Create voice visualizer in react
  11. Lazy loading component in react
  12. Create slider in react
  13. React drag and drop list of elements
  14. React image zoom
  15. Create timeline in react
  16. Create scroll indicator in react
  17. Create tooltip in react
  18. Typing effect component in react
  19. Create loader component in react
  20. How to scroll to top in react
  21. Image comparison slider in react
  22. Create scrollspy in react

My favorite one are Image-Comparison-Slider and Typing-Effect-Component.

This is the github repo link

GitHub logo know-prashant / react-components

A list of different react general purpose components used often in front end development.

List of different components created in react.

This project uses create-react-app as a boilerplate and following is the listed instruction to run the app.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm

If you think that these react components list has any worth then do share it with others. 🙏🙏

As the lockdown is still going on in India starting from 1st May I have decided to start a new challenge of #31DaysOfDSA in which I will be implementing and solving different data structures and algorithms in javascript.

You can follow this hashtag on twitter to learn along.


Also, follow me on Twitter for tips and tricks to solve the coding interviews and more solved examples of Algorithms. I write 2 - 3 post weekly on my blog learnersbucket.com.

Top comments (16)

Collapse
 
thepassle profile image
Pascal Schilp

Have you considered accessibility for these components?

Collapse
 
learnersbucket profile image
Prashant Yadav

NO, I guess I have not.

Collapse
 
sagar profile image
Sagar

I really appreciate your hard work on creating components from scratch and that will help you to grow. Thanks for sharing this with us.

Collapse
 
learnersbucket profile image
Prashant Yadav

Thanks 🙏.

Collapse
 
makampos profile image
Matheus de Campos

Wuoo, awesome content dude!
Will be mark as a reading list to see later with more time.

Collapse
 
learnersbucket profile image
Prashant Yadav

Thanks

Collapse
 
ng_update profile image
Kieran

Well this is impressive.... Nice Work!!!!

Collapse
 
learnersbucket profile image
Prashant Yadav

Thanks 🙏

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
learnersbucket profile image
Prashant Yadav

React docs are pretty good, but if you want more detailed learning materials then check out fullstack react book from fullstack.io.

Happy Coding!.

Collapse
 
tafsirony profile image
Tafsir Ony

True productivity during the quarantine

Collapse
 
learnersbucket profile image
Prashant Yadav

Thanks 🙏

Collapse
 
rupeshiya profile image
Rupesh Krishna Jha

Great content buddy!
Thanks for sharing.

Collapse
 
learnersbucket profile image
Prashant Yadav

Thanks 🙏.

Collapse
 
meatboy profile image
Meat Boy

Awesome list of components!

Collapse
 
learnersbucket profile image
Prashant Yadav

Thanks