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.
- 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!