1. 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.
2. 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).
3. ReactJS Navigation Menu Demo
Let’s see how we can handle click events in React by building a navigation menu.
4. 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.
5. 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.
Real-time trading platform demo showcasing reactive programming principles applied across the full application stack.
7. React Leaflet Demo
Demo of a Leaflet.JS map created using React, Gulp, and Browserify.
8. React Motion TransitionSpring Demo
Smooth animation – letters smoothly enter and leave.
Suite of React components that communicate directly with your Elasticsearch cluster. Builds faceted search UI, paginates results.
10. React Three Demo
A demo that uses @Izzimach’s react-three library.
11. React Spark Scroll
Impressive Scroll-based animations. Demo animates parallax, scale, rotation, fade. Ported from Angular, uses higher-order components.
12. SnabbtJS Animations
Demonstrates use of Snabbt.js to animate with fast CSS3 transforms..
Isomorphic demo app showing photos from 500px. Uses Fluxible, eslint.
Draw 1-D barcodes to Canvases.
15. CSS Color Names
Nicely animated display of color chips. Animated add, remove, sort..
16. CSS3 Tile Flip Animation
Nice animation and writeup on on flipping a ‘card’ to reveal the back. CSS3 animations with LESS..
17. React Table Sorter Demo
Full-text search, column sort, num predicates. Uses underscore..
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..
19. JQuery MaskedTextField
Demonstrates wrapping and integrating a jquery component via ‘portal’ technique.
20. Creating a Dropdown
Tutorial on writing a dropdown component with React, LESS..
21. Redux Application Snapshot
Demonstrates dumping and restoring application (Redux) state. Uses ImmutableJS, Transit-js.
22. Regex Table Filter
Demonstrates filtering with a regex- using ImmutableJS, efficient shouldComponentUpdate with PureRenderMixin.
23. React Bootcards
Cards: higher order information layout and presentations. Built with bootstrap. Click ‘Documentation’ on demo site….
24. Rails ActionCable Chat
Chat app with Rails 5 ActionCable (integrated websockets), translated from DHH’s demo..
25. React Redux Test
Demo of a rich filtering UI. User can filter by string, number, date, boolean, list attributes..