The Simplest React Stack

Bootstrapping and State Management

3 min readAug 30, 2017

I am in search of the simplest React Stack. It has to be future-proof and feature-packed, but most importantly it has to be a breeze to work with.

In this series I will look for easy-to-use solutions to implement a buffed version of the classic React TodoMVC. When I think I can achieve something simpler, I will create helper libraries myself. The following topics will be likely covered before the finale.

Bootstrapping
State Management
Routing
Styling
Networking
Testing
Hosting

The episodes will be short and … simple.

Bootstrapping and Bundling

Create React App is hard to beat here. It sets up a lot of hidden goodies with a few commands only.

npx create-react-app todos
cd todos
npm start

This creates an offline-first Progressive Web App with ES6+ support, auto-prefixed CSS and a watching dev server. Sooo much good tech in one sentence! Awesome.

You can test and build the code later with the npm test / npm run build commands. If your project outgrows Create React App, just execute npm run eject and take over control.

That’s it! Lets jump straight into development by editing the src folder — created by React Create App.

State Management

State management was not such an obvious choice for me. I decided to get my hands dirty and write my own solution. It is called React Easy State and this is how you use it.

#1. Installation

npm install react-easy-state

#2. Create a Store

Stores are plain objects with all the power of ES6. Lets create one in src/store.js with some filterable todos and mutation methods.

Make sure to wrap your store object with store before you export it.

#3. Modify the App

The next step is to integrate the existing src/App.js component with the todos store. Just import the store and use it as a normal object.

Make sure to wrap your components with view before you export them.

#4. Add Todos

Add a new component for todo items. Again, you can import and use the store as a plain object.

The view wrapper auto-binds your methods, you don’t have to worry about passing them as callbacks.

The Bottom Line

We created a simplified version of the TodoMVC app with vanilla React, a few extra commands and two wrapper functions. This was the flow in a nutshell.

#1. Set Things Up

npx create-react-app todos
cd todos
npm i react-easy-state
npm start

#2. Write Some Code

Use JS objects for the state and React components for the view. Make sure to wrap them with store and view respectively. For dependency injection use ES6 imports and React props.

#3. Rest

Lay back and enjoy the result of your efforts. You can find a slightly more complex TodoMVC example here with a live demo.

Conclusion

We used Create React App (by @dan_abramov) and React Easy State (by myself) to start this journey. Please show your support by checking them, if you found the article interesting.

In the next episode I will boost the App with some routing. I plan to write my own solution again, but I might stumble upon some awesome router before that. Feel free the recommend your favorite in the comments!