The Simplest React Stack
Bootstrapping and State Management
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.
- State Management
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.
npm install create-react-app -g
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 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.
npm install react-easy-state --save
#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
easyStore 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
easyComp 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.
easyComp 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
npm i create-react-app -g
npm i react-easy-state -s
#2. Write Some Code
Use JS objects for the state and React components for the view. Make sure to wrap them with
easyComp respectively. For dependency injection use ES6 imports and React props.
Lay back and enjoy the result of your efforts. You can find a slightly more complex TodoMVC example here with a live demo.
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!