react_on_rails - Integration of React + Webpack + Rails using rails/webpacker to build Universal (Isomorphic) Apps (aka Server Rendering)

  •        101

React on Rails integrates Rails with (server rendering of) Facebook's React front-end framework. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.



Related Projects

react-webpack-rails-tutorial - Example of integration of Rails, react, redux, using the react_on_rails gem, webpack, enabling the es7 and jsx transpilers, and node integration

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Thank you for considering using React on Rails.

bootstrap-loader - Load Bootstrap styles and scripts in your Webpack bundle

  •    Javascript

If your team might need my help, please email me for a free half-hour project consultation, on anything from React on Rails to any aspect of web or mobile application development for both consumer and enterprise products. Intersted in optimizing your webpack setup for React on Rails including code splitting with react-router v4, webpack v4, and react-loadable? Contact me.

apollo-universal-starter-kit - Apollo 2 Universal Starter Kit — GraphQL React JavaScript app boilerplate for Mobile, Server and Web where code for all platforms built with Webpack to enable max code reuse, stack: Apollo, GraphQL, React 16, React Native, Expo, Express, Knex, SQLite, Twitter Bootstrap, Babel, Webpack

  •    Javascript

Apollo Universal Starter Kit is a SEO friendly boilerplate for Universal Mobile and Web app development built on top of Apollo, GraphQL, React 16, React Native, Expo, Redux, Express with SQL storage support, for styling Twitter Bootstrap, NativeBase and Ant Design integration. Hot Code Reload of back end & front end using Webpack and Hot Module Replacement to reflect your changes instantly and help you stay productive. This starter kit adds full React Native integration, with Webpack as a packager and Expo. No native code compilation tools are needed in order to develop native mobile applications with this kit. You are able to run both web and mobile versions of your app at the same time connected to the same backend.

universal-redux - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering

  •    Javascript

Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) rendering server. You can either use its defaults and begin coding your project, or configure it to your liking with custom Webpack options and Express or Redux middleware. It's intended as both an easy starting point for developers new to React and Redux, as well as an extensible base by which advanced developers can augment with their own middleware and keep up to date with the fast-moving React ecosystem. The quickest way to get started is to clone the starter project. This gives you a base project that is set up with default configurations of Webpack and Express.

react_webpack_rails - Simple and lightweight react-webpack-rails integration.

  •    Ruby

Consider using Webpacker instead. This gem provides easy and convenient way to build modern JavaScript stack on top of Rails applications using Webpack and React.

redux-test-recorder - a redux middleware to automatically generate tests for reducers through ui interaction

  •    Javascript

Redux test recorder is a redux middleware for automatically generating tests for your reducers based on the actions in your app. Currently I've written redux-test-recorder-react a component to provide a gui for recording tests in react but I'm hopeful recording components for other frameworks can be created in the future. Also take a look at our latest build which currently runs a test generated using this module by taking advantage of the eval command. For a better idea of what is going on, you can take a look at the test file here.

react-redux-links - Curated tutorial and resource links I've collected on React, Redux, ES6, and more


Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem, as well as a source for quality information on advanced topics and techniques. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome. Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at

arc - React starter kit based on Atomic Design

  •    Javascript

ARc (Atomic React) is a React starter kit based on the Atomic Design methodology. It's progressive, which means that you can start with the basic boilerplate and try the other features when you are comfortable. If you find this useful, please don't forget to star ⭐️ the repo, as this will help to promote the project. Follow me on Twitter and GitHub to keep updated about this project and others.

react-redux-boilerplate - A minimal React-Redux boilerplate with all the best practices

  •    Javascript

Please note that this boilerplate is production-ready and not meant for beginners! If you're just starting out with react or redux, please refer to instead. If you want a solid, battle-tested base to build your next product upon and have some experience with react, this is the perfect start for you. So it involves a lot of additional learning curve to get started with react-boilerplate. That's why I forked it, stripped it down and made this leaner, beginner friendly boilerplate without all the additional complexity.

redux-react-local - local component state via redux

  •    Javascript

Add the supplied reducer to a key local on your redux store. However, because 'views' don't have global references / identities ala Backbone etc, communicating between these components can get cumbersome 2; we then resort to building some form of messaging system external to these components - callbacks, pubsub channels, flux stores, observable event chains, etc. The smart ones use context to expose these systems to a particular render tree, avoiding 'global' state, but still getting a similar model.

redux-webpack-es6-boilerplate - A starter project for modern React apps with Redux

  •    Javascript

Note: If you still want to use a previous version, please checkout old-original-structure branch. A boilerplate using the power and simplicity of React, Redux, Webpack 2 + HMR, and ES6 + JSX via Babel. Includes Webpack's Tree Shaking configuration. It's suitable for scalable applications and organized using the custom variation of the Ducks pattern — approach when each module's entry file (feature-name.js) contains all of its related constants, actions/action creators, selectors and its reducer.

redux-cli - An opinionated CLI for building redux/react apps quicker

  •    Javascript

There is an init subcommand for you to specify all paths to where components live in your project. The init command just creates a .blueprintrc in your project root. If you want to you can just create the .blueprintrc manually. Note on configuration: This project tries to walk on a fine line between convention and configuration. Since the majority of React applications will separate their smart/dumb components if you pass in those paths you'll get those generators for free. However, some of the other generators might not write files to the exact paths that you use for your project. It's easy to override the CLI generators with your own so that the generators will write files to the correct location. See: creating custom blueprints.

redux-firestore - Redux bindings for Firestore

  •    Javascript

This assumes you are using npm as your package manager. It is common to make react components "functional" meaning that the component is just a function instead of being a class which extends React.Component. This can be useful, but can limit usage of lifecycle hooks and other features of Component Classes. recompose helps solve this by providing Higher Order Component functions such as withContext, lifecycle, and withHandlers.

react-redux-universal-hot-example - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform

  •    Javascript

I cobbled this together from a wide variety of similar "starter" repositories. As I post this in June 2015, all of these libraries are right at the bleeding edge of web development. They may fall out of fashion as quickly as they have come into it, but I personally believe that this stack is the future of web development and will survive for several years. I'm building my new projects like this, and I recommend that you do, too. The first time it may take a little while to generate the first webpack-assets.json and complain with a few dozen [webpack-isomorphic-tools] (waiting for the first Webpack build to finish) printouts, but be patient. Give it 30 seconds.

generator-redux - CLI tools for Redux: next-gen functional Flux/React with devtools

  •    Javascript

CLI for Redux: next-gen functional Flux/React with devtools. This is intended to be the successor to my existing generator-flux that was based on vanilla FB flux. You must have Node.js w/NPM installed. I recommend installing via homebrew, but you should be able to use the pre-built installers if you prefer.

saga-login-flow - A login/register flow built with React + Redux Saga

  •    Javascript

This application demonstrates what a React-based register/login workflow might look like with Redux Saga. It's based on Max Stoiber's login-flow, but uses Redux Saga instead of Redux Thunk to handle asynchronous actions.

react-native-redux-router - React Native Router using Redux architecture

  •    Javascript

I've decided to stop supporting this component in favor to new release react-native-router-flux ( The new version doesn't depend from concrete Flux/Redux implementation and allow you to build nested navigators easily. Also it allows to intercept route 'actions' from your store(s).

panther - Discover artists through an infinite node graph

  •    Javascript

Panther is a full-stack React/Redux/Node web app that uses the Spotify API to make suggestions based on an initial user-specified artist. It uses a graph consisting of vertices and edges to represent the data. At the center, the user's currently-selected artist, along with the artist's avatar and some audio samples of the artist's top tracks. To the left is a vertex representing the previous artist, and to the right are 3 suggestions. By clicking on the vertices, users can move forwards and backwards through their suggestion tree, (hopefully) discovering a bunch of awesome new music.

redux-form - A Higher Order Component using react-redux to keep form state in a Redux store

  •    Javascript

redux-form works with React Redux to enable an html form in React to use Redux to store all of its state. You can play around with redux-form in these sandbox versions of the Examples.