REACTIZER

A React boilerplate that's always ahead! Click here to check out the live demo.

This boilerplate has one thing in mind - use as few dependencies as possible, while having all the best features. If something is not absolutely necessary, you won't find it here.

Reactizer's goal is mainly to provide you with the best practices of building a modern React application. Feel free to open an issue or a pull request!

All the tech I chose is super new, sometimes even in an alpha version - thus if you'd like to use it for production, I recommend scaling those unstable versions down.

To check out the backend, click here!

Features:

The features currently present in the demo are as follows:

• Server-side rendering, data fetching and i18n
• Persistent, real-world example - your registration and TODOs are saved on my heroku app. Mind: it's just a demo. I recommend making up some arbitary username/email/password. I use test, with password Testtest1.
• Truly universal architecture - shared Redux code in mobile, browser and server
• Protected routes with JWT authentication
• Immutable data with Ramda functions
• Full-out Webpack: hot-reloading, tree-shaking (bundle splitting example coming in the future)

COMING NEXT:

Documentation. I will document all the stuff present in the demo, from server side rendering + auth, different auth options, obstacles I had to overcome and design decisions I made.

Full mobile app. I want to supply you guys with a full-blown React Native app as a reference for anyone starting with native mobile development. Everything currently working in the web demo will work in the native app.

More examples. Serverless, Firebase, bundle splitting, Mobx (later on). I will move this working demo to examples folder, clean the top level app out so you don't have to do it yourself when forking, and finally include the other demos with all current features.

Full test coverage. Tests are good for you (and especially for your team). I will include tests to cover everything from reducers, to sagas.

Tech stack

• React and React Native as the core libs
• React Router for web routing
• Redux with React Redux data flow
• Reselect derives the data
• Redux Saga for async flow
• Redux Form makes forms uber-easy
• React Intl i18n
• Immutable data
• Jest testing
• Babel for all the ES6+ goodness
• Material UI makes the web sexy
• Webpack 2 client compilation + Hot Reloading
• ESlint and Airbnb level code quality
• Gulp tasks, because npm just doesn't scale

Also in the bundle:

• Sprites with gulp.spritesmith
• Translation message collection with babel-plugin-react-intl
• Server compilation with Babel, because that's the way it's supposed to be
• No react-hot-loader, react-transform nor webpack-isomorphic-tools - I keep HMR and Webpack vanilla

Known issues:

Please note that this project is very young. There are still incomplete things, and this README is just a quickfix. I have a lot of work + school, but I will try to improve everything on the go!

React Native requires (due to it's Babel 5 dependency) babel-core and babel-cli to be placed in dependencies, instead of dev dependencies.

Having problems? Try running watchman watch-del-all

Tasks

Simply npm i. Then you have these following tasks available:

CORE

Web:

• npm start - starts HMR and server (default at :8080)
• npm run server - runs the server
• npm run bundle - prepares all assets and builds the client and server code

Native:

• npm run ios - runs react native ios
• npm run android - runs react native android
• npm run native - runs react native server
• npm run native:clean - runs react native server and clears the cache

Common:

• npm test - runs tests
• npm run lint - runs eslint

OTHER

• npm run messages - fetch all messages
• npm run lint:fix - runs eslint and fixes problems, if it can
• npm run test:coverage - runs tests and generates coverage info
• npm run test:watch - runs tests in watch mode

TODO:

• Koa2 (once Node supports async await)