React/Redux TodoMVC, Part 0: Introduction
• CommentsAs of this writing, the front end of DotNetApis is entirely written in React. This was my first React project, and there were a lot of things that I learned along the way. My app certainly had “growing pains,” and a lot of React best practices were added rather late in that project.
So, I thought it would be beneficial to do a series of posts on how to do a new React project, with the benefit of hindsight that I did not have when writing the first version of DotNetApis.
Disclaimer: I am still very new to React. It’s possible likely that I am entirely missing some really helpful best practices. If you know of any, please let me know in the comments!
Disclaimer Part 2: In fact, the whole React community is still new to React. Best practices are still “in flux” (heh), and may not be the same years from now.
I’ll be developing this project in the open on GitHub. I’ve decided to implement the ubiquitous TodoMVC app, which is often used to help decide on client-side MVC frameworks. You can argue that React/Redux isn’t really “MVC”-ish, but eh, whatever.
One problem with TodoMVC is that it doesn’t have examples of asynchronous backend communication, which can make or break a framework decision. In keeping with the spirit of TodoMVC, my React/Redux implementation will also not have asynchronous communication; if I remember, I’ll write a separate blog post describing how to do that after this series wraps up.
So, let’s get started!
Here’s what I’ve done so far, just some housekeeping work at the start:
- Forked the TodoMVC app template.
- Moved everything to the
gh-pagesbranch, where I’ll do all the development and deployment simultaneously. - Removed the (empty)
app.cssfrom the app template, since I’m quite sure I won’t be needing it. - Filled out some of the placeholders in the HTML.
- Tweaked the
.gitignoreto include the “boilerplate” css that comes as dependencies of the app template.
Groundbreaking, eh? Don’t worry, this is just getting started! :)
Source code at this revision - Live site at this revision (ignore the “startup flicker”; that’s just due to the way it’s hosted)
