Learning React.js and Redux
January 03, 2016
TL;DR I had a hard time learning React.js, because it requires complex boilerplate setup, tooling and special application architecture such as Flux or Redux. After watching many intro videos or tutorials I wasn’t making progress until I decided to develop simple open source project with React+Redux using open source boilerplate. As I try to make every feature - I’m learning how to do it with React+Redux and sometimes asking questions on Stackoverflow or Github.
Last year React.js has become really popular. At that time I was part of the team which was in the middle of launching a big Angular.js project. My next project after that was based on Angular as well. I’ve heard of React, knew it was next hot framework out there, in addition to (or replacement for) Backbone, Ember and Angular. But I never had a chance and reason to get into React seriously, other than watching some introductory egghead.io videos. Based on some light reading it became clear - the framework basics were not too complicated after all. And benefits are too good: virtual dom for speed, reusability of components, ES2015 support, ability to develop native apps just to name a few.
In my mind all these new frameworks / libraries / concepts are interrelated because Facebook was behind all of them. When I read React tutorials, most of it are based on flux or reflux or redux using graphGL or webpack and babel.js. Which means I have to learn them all at the same time. For a few months I’ve been chasing my tail trying to understand, read APIs and learn React, React Native, Flux, Redux, Webpack, Babel. It was very frustrating. Just take tooling and boilerplate alone, it’s a nightmare. And then a library introduces breaking change. Start all over.
But, out of curiosity I decided to learn React.js (and related concepts), as 44 thousand developers (who starred it on github) can’t be wrong about how awesome it is, right? And looks like it’s becoming the library of choice for many enterprise and startup projects. It may even kill Angular eventually (is it Google vs Facebook now?). My decision was: even if I’m not using React for my next side project or work project, I have to be familiar with it. Just like any responsible front end developer would say.
As mentioned before, the best way to learn is by doing. I picked a very simple idea for my project as a playground. It’s a collection of popular quotes or jokes. To avoid even more confusion and challenges I decided to use Firebase instead of a self-hosted database. Firebase has good API documentation and is very similar to mongoDB.
While building this project, I’ll cover the following concepts:
- Reusing components
- Metadata (categories, tags, dates, etc)
- CRUD (create, read, update, delete)
- How to work with PaaS (Firebase in this case)
- React+Redux architecture and best practices (the goal of entire project and side effect after creating it)
I already started working on this project (it’s based on popular boilerplate) and decided to make it an open source, there is nothing proprietary about this idea or code anyway. Hopefully it will be useful to other developers if they get stuck or might serve as a reference. If you’re a designer or a developer who wants to contribute, please let me know - I would love to collaborate and keep learning together.
Some of the challenges were:
- how to pass state name to the router
- how to implement redux-forms properly
- how to upload files
- how to dispatch async actions (Firebase API)
- authenticated state and protect some routes with login
- display initial form values for edit view
I plan to write a simple redux intro tutorial and cover some basics I couldn’t understand when I started this project. And then write the same about React. What do YOU want to learn specifically about React+Redux ?