20 React Projects For Beginners

20 React Projects For Beginners
1. Calculator App

codepen.io
React Calculator
A calculator built with React...

2. React Gradient Background Color

codepen.io
React Color Gradients
React Gradients Inspired by https://dribbble.com/shots/13662178-Gradients...

3. React Hover Slideshow

codepen.io
React Slider w/ Hover Effect
A slider/carousel built with React. The x and y coordinates of the current slide are set to CSS variables to create dynamic transition effects on mouse...

4. React Drag and Drop

codepen.io
Drag & Drop Grid Layout in React
React implementation of a sortable drag and drop list organised into columns....

5. React Todo List

codepen.io
React todo list
...

6. React Image Gallery

codepen.io
React & CSS Grid Image Gallery
Smoking hot image gallery made with React, ES6, and some light CSS Grid experimentation!...

7. React Filter Search

codepen.io
React Filter list
...

8. React Accordion

codepen.io
Accordion - React
Accordion component made with React...

9. React Carousel

codepen.io
React Vertical Carousel
React.js Vertical Carousel. Background Image, panel background colour and panel content all change with the carousel. Uses CSS transitions to fade betw...

10. React Calendar Events

codepen.io
React Calendar
Calendar widget built with React and Flexbox...

11. React Password Validation

codepen.io
UI + React
Practicing React ! Please do let me know if I can do something in a better way. ...

12. React Input Range

codepen.io
React component for inputting numeric values within a range
...

13. React Modal

codepen.io
React modal animation
Smooth transform element to modal. Chrome and Safari....

14. React Card Slider

codepen.io
Circle Swap Photo Gallery [React & GSAP]
...

15. React Tabs

codepen.io
React Tabs (w/ composition)
This is the way I prefer to set tabs using React. The most tabs systems I found on the web do not let you to compose properly each part of them (e.g. p...

16. React Custom Date Range Picker

codepen.io
React date range picker
Date picker in React, you can select a range of dates....

17. React Page Transition

codepen.io
React Animated Page Transitions
Just a small demo to show a few page transitions in React. Using GreenSock and SVG....

18. React Ecommerce Template

codepen.io
React
...

19. React Parallax

codepen.io
React Scroll Parallax
Experimenting with some scroll based parallax effects in React. Uses [react-scroll-parallax](https://www.npmjs.com/package/react-scroll-parallax) which...

20. React Pagination

codepen.io
React Pagination Example with Logic Like Google
...