25+ Reactjs Demos You’ll Love

1. ReactJS Todo MCV

ReactJS Todo MCV
ReactJS Todo MCV

All code librarys have a Todo MVC which makes it easy to compare the same functionality between frameworks, ie – comparing AngularJS, BackboneJS and ReactJS easily.

View Demo

2. ReactJS Real-time Search Demo

ReactJS Real-time Search Demo
ReactJS Real-time Search Demo

We’ve learned time and time again that people hate to wait. Here is how you can use React to build a real-time search experience. (For a comparison, see our version with AngularJS).

View Demo

3. ReactJS Navigation Menu Demo

ReactJS Navigation Menu Demo
ReactJS Navigation Menu Demo

Let’s see how we can handle click events in React by building a navigation menu.

View Demo

4. ReactJS Timer Demo

ReactJS Timer Demo
ReactJS Timer Demo

As I mentioned, the building blocks of react apps are components. They are created by calling React.createClass() with an object of options and methods. Each component has state (an object with data) and each is in charge of their own rendering – the render() method is called whenever the state changes. Here is an example for building a simple timer.

View Demo

5. ReactJS Order Form Demo

ReactJS Order Form Demo
ReactJS Order Form Demo

The real power of React comes when you combine multiple components. This allows you to structure your code better and to introduce a separation of concerns. It will also make your code reusable across different parts of your web application. Here is an example of an order form that helps clients plan their budgets.

View Demo

6. ReactiveTrader

ReactiveTrader
ReactiveTrader

Real-time trading platform demo showcasing reactive programming principles applied across the full application stack.

View Demo

7. React Leaflet Demo

React Leaflet Demo
React Leaflet Demo

Demo of a Leaflet.JS map created using React, Gulp, and Browserify.

View Demo

8. React Motion TransitionSpring Demo

React Motion TransitionSpring Demo
React Motion TransitionSpring Demo

Smooth animation – letters smoothly enter and leave.

View Demo

9. SearchKit

SearchKit
SearchKit

Suite of React components that communicate directly with your Elasticsearch cluster. Builds faceted search UI, paginates results.

View Demo

10. React Three Demo

React Three Demo
React Three Demo

A demo that uses @Izzimach’s react-three library.

View Demo

11. React Spark Scroll

React Spark Scroll
React Spark Scroll

Impressive Scroll-based animations. Demo animates parallax, scale, rotation, fade. Ported from Angular, uses higher-order components.

View Demo

12. SnabbtJS Animations

SnabbtJS Animations
SnabbtJS Animations

Demonstrates use of Snabbt.js to animate with fast CSS3 transforms..

View Demo

13. isomorphic500

isomorphic500
isomorphic500

Isomorphic demo app showing photos from 500px. Uses Fluxible, eslint.

View Demo

14. Barcode

Barcode
Barcode

Draw 1-D barcodes to Canvases.

View Demo

15. CSS Color Names

CSS Color Names
CSS Color Names

Nicely animated display of color chips. Animated add, remove, sort..

View Demo

16. CSS3 Tile Flip Animation

CSS3 Tile Flip Animation
CSS3 Tile Flip Animation

Nice animation and writeup on on flipping a ‘card’ to reveal the back. CSS3 animations with LESS..

View Demo

17. React Table Sorter Demo

React Table Sorter Demo
React Table Sorter Demo

Full-text search, column sort, num predicates. Uses underscore..

View Demo

18. Demobox

Demobox
Demobox

Quick way to build a demo page for a React component. Builds playgrounds that let visitors edit code and see results live. Page generator includes color palettes and font pairings. Highly recommended..

View Demo

19. JQuery MaskedTextField

JQuery MaskedTextField
JQuery MaskedTextField

Demonstrates wrapping and integrating a jquery component via ‘portal’ technique.

View Demo

20. Creating a Dropdown

Creating a Dropdown
Creating a Dropdown

Tutorial on writing a dropdown component with React, LESS..

View Demo

21. Redux Application Snapshot

Redux Application Snapshot
Redux Application Snapshot

Demonstrates dumping and restoring application (Redux) state. Uses ImmutableJS, Transit-js.

View Demo

22. Regex Table Filter

Regex Table Filter
Regex Table Filter

Demonstrates filtering with a regex- using ImmutableJS, efficient shouldComponentUpdate with PureRenderMixin.

View Demo

23. React Bootcards

React Bootcards
React Bootcards

Cards: higher order information layout and presentations. Built with bootstrap. Click ‘Documentation’ on demo site….

View Demo

24. Rails ActionCable Chat

Rails ActionCable Chat
Rails ActionCable Chat

Chat app with Rails 5 ActionCable (integrated websockets), translated from DHH’s demo..

View Demo

25. React Redux Test

React Redux Test
React Redux Test

Demo of a rich filtering UI. User can filter by string, number, date, boolean, list attributes..

View Demo

Sam Deering is a web developer from England (currently living in Australia). In his spare time he enjoys coding, playing chess, reading and investing.

Leave a Reply

Your email address will not be published. Required fields are marked *