30+ Free React Example for beginners

Related Articles

  1. 10 React Button

See the Pen React Responsive Layout with SVG and some React-Motion by Sarah Drasner (@sdras) on CodePen.

Title:- React Responsive Layout with SVG and some React-Motion
Author:-Sarah Drasner
Made With:-React HTML CSS JS

See the Pen React-Motion and Color Animation Experiment by Sarah Drasner (@sdras) on CodePen.

Title:- React-Motion and Color Animation Experiment
Author:-Sarah Drasner
Made With:-React HTML CSS JS

See the Pen Device Connection Card UI (click the gear) by Tyler Kelley (@TylerK) on CodePen.

Experimenting with creating a multi-state component with sub-components in ReactJS.

Title:- Device Connection Card UI (click the gear)
Author:-Tyler Kelley
Made With:-React HTML CSS JS

See the Pen React Game- Elephant Taco Hunt by Sarah Drasner (@sdras) on CodePen.

This game is built with React, SVG, and GreenSock. It’s about a hipster elephant who wants to get tacos but his friends keep trying to change plans and text him. Margaritas are extra points. This game is based on real-life events. Someday I’ll convert it to ES6.


Title:- React Game- Elephant Taco Hunt
Author:-Sarah Drasner
Made With:-React HTML CSS JS

See the Pen Accordion – React by Matthew Vincent (@matthewvincent) on CodePen.

Title:- Accordion – React
Author:- Matthew Vincent
Made With:-React HTML CSS JS

See the Pen React Movie Search by Marco Biedermann (@marcobiedermann) on CodePen.

Title:- React Movie Search
Author:-Marco Biedermann
Made With:-React HTML CSS JS

See the Pen Parallax swipe (React) by Yugam (@pizza3) on CodePen.

Title:- Parallax swipe (React)
Author:-Yugam
Made With:-React HTML CSS JS

See the Pen React Toggle Switch by Ian Jabour (@l4nk33) on CodePen.

Title:- React Toggle Switch
Author:-Ian Jabour
Made With:-React HTML CSS JS

See the Pen React Login form by Lakston (@Lakston) on CodePen.

Title:- React Login form
Author:-Lakston
Made With:-React HTML CSS JS

See the Pen React Accordion Box by Adam Moore (@adamaoc) on CodePen.

Title:- React Accordion Box
Author:-Adam Moore
Made With:-React HTML CSS JS

See the Pen React JS Card Grid by Jamie Halvorson (@jamiehalvorson) on CodePen.

Title:- React JS Card Grid
Author:-Jamie Halvorson
Made With:-React HTML CSS JS

See the Pen Simple Circular Progress Bar with React by Bob Brady (@bbrady) on CodePen.

Title:- Simple Circular Progress Bar with React
Author:-Bob Brady
Made With:-React HTML CSS JS

See the Pen React right-click context menu by devHamsters (@devhamsters) on CodePen.

Just an experiment. Not suitable for production. Right-click context menu React component.

Title:- React right-click context menu
Author:-devHamsters
Made With:-React HTML CSS JS

See the Pen React – Inbox by Maxime Preaux (@deammer) on CodePen.

Title:- React – Inbox
Author:- Maxime Preaux
Made With:-React HTML CSS JS

See the Pen React date range picker by Rob Vermeer (@RobVermeer) on CodePen.

Title:- React date range picker
Author:- Rob Vermeer
Made With:-React HTML CSS JS

See the Pen Game of Life (React + Redux) by Peter Daily (@thepeted) on CodePen.

Title:- Game of Life (React + Redux)
Author:- Peter Daily
Made With:-React HTML CSS JS

See the Pen React Animated BB-8 by Brad Colthurst (@bullerb) on CodePen.

Title:- React Animated BB-8
Author:- Brad Colthurst
Made With:-React HTML CSS JS

See the Pen CSS Sprite Animator | React & Context by pjkarlik (@pjkarlik) on CodePen.

Title:- CSS Sprite Animator | React & Context
Author:- pjkarlik
Made With:-React HTML CSS JS

See the Pen Trying out React Motion by Sarah Drasner (@sdras) on CodePen.

Title:- Trying out React Motion
Author:- Sarah Drasner
Made With:-React HTML CSS JS

See the Pen React Calculator by Tom Bremer (@tbremer) on CodePen.

Title:- React Calculator
Author:-Tom Bremer
Made With:-React HTML CSS JS

See the Pen Animate CSS Grid by Alex (@aholachek) on CodePen.

Title:- Animate CSS Grid
Author:- Alex
Made With:-React HTML CSS JS

See the Pen React Flipping Card with Tutorial by Alex Devero (@alexdevero) on CodePen.

Title:- React Flipping Card with Tutorial
Author:- Alex Devero
Made With:-React HTML CSS JS

See the Pen React Scroll Parallax by J Scott Smith (@jscottsmith) on CodePen.

Title:- React Scroll Parallax
Author:-J Scott Smith
Made With:-React HTML CSS JS

See the Pen Shadow Parallax • Reactjs by Siamak (@siamak) on CodePen.

Title:- Shadow Parallax • Reactjs
Author:-Siamak
Made With:-React HTML CSS JS

See the Pen React DailyUI – 003 – Landing Page by Jack Oliver (@studiojvla) on CodePen.

Title:- React DailyUI – 003 – Landing Page
Author:-Jack Oliver
Made With:-React HTML CSS JS

See the Pen Adding Item to List Dynamically in React by Maria Antonietta Perna (@antonietta) on CodePen.

Title:- Adding Item to List Dynamically in React
Author:-Maria Antonietta Perna
Made With:-React HTML CSS JS

See the Pen React Scroll by Duarte Monteiro (@du5rte) on CodePen.

Title:- React Scroll
Author:-Duarte Monteiro
Made With:-React HTML CSS JS

See the Pen React bar chart by Mehdi Hamoudi (@maydie) on CodePen.

I am just playing around, trying to make a simple to use react bar chart component, and mostly customizable via CSS

Title:- CodePen Home
Author:-React bar chart
Made With:-React HTML CSS JS

See the Pen Carousel (React) by Andy Pagès (@andyNroses) on CodePen.

Title:- Carousel (React)
Author:-Andy Pagès
Made With:-React HTML CSS JS

See the Pen City Illustration by Lisi (@lisilinhart) on CodePen.

Title:- City Illustration
Author:-Lisi
Made With:-REACT HTML CSS JS

See the Pen React Calculator by Michael Jackson (@mjijackson) on CodePen.

Title:- React Calculator
Author:-Michael Jackson
Made With:-REACT HTML CSS JS

See the Pen React Slider w/ Hover Effect by Ryan Mulligan (@hexagoncircle) on CodePen.

Title:- React Slider w/ Hover Effect
Author:-Ryan Mulligan
Made With:-REACT HTML CSS JS

See the Pen React 3D Carousel component by Slobodan Blazeski (@bobiblazeski) on CodePen.

Title:- React 3D Carousel component
Author:-Slobodan Blazeski
Made With:-REACT HTML CSS JS

See the Pen React Animated Page Transitions by Sarah Drasner (@sdras) on CodePen.

Title:- React Animated Page Transitions
Author:-Sarah Drasner
Made With:-REACT HTML CSS JS

See the Pen React signup form example by Mikhail Proniushkin (@mikepro4) on CodePen.

Title:- React signup form example
Author:-Mikhail Proniushkin
Made With:-REACT HTML CSS JS