Hacker News new | comments | show | ask | jobs | submit login

> The React team makes it a point to encourage people _not_ to use boilerplates as a learning tool

What I would love to see is one of those over-engineered React+whatever boilerplate project that shows you, in a step-by-step form, showing the evolution from a simple project to the final boilerplate they have, and why it exists like that.

I have created a fairly-large project in Redux, but as I created it I know that it wasn't the "optimal" way of architecting it.

So, before starting another project, I tried starting from the "react-redux-starter-kit" project, and it was immediately over my head. I have to instantly grok how they're using the router, layouts, stores (I thought Redux didn't use stores...), modules... the source even has explicit references to the way WebPack is going to lazily load stuff, so I don't even know if I could use some other build system without breaking the source.

I'd love to see the same project laid out as a series of refactorings:

1. Here we have a really simple Redux project, the way a beginner might code it

2. They realize they need routes. Let's refactor the code to include the router

3. The realize it would be better putting the related-components in their own folders. Here's that refactorization.

... X. Look, your project now looks like the starter project!

Yep, that confusion is exactly the kind of thing I was talking about.

I've seen a few sample repos that try to demonstrate the kind of thing you're talking about. Skimming through my links list, these look relevant: https://github.com/verekia/js-stack-from-scratch and https://github.com/Jordaanm/hipster-boilerplate . I think those are a bit more oriented at the build tooling side and not so much the application side, but they're close.

Also, the "React Tutorials" and "Redux Tutorials" categories ([0], [1]) in my links list both have a subsection labeled "Project-Based Tutorials", which points to articles that do have a more "build something meaningful"-type approach as opposed to just "here's concepts A, B, and C".

To call out one specific example: I have been writing a tutorial series on my own blog, called "Practical Redux" ([2]). Rather than trying to teach the basics of React or Redux, it's intended to demonstrate a number of more intermediate and advanced concepts through building a sample app (one that's at least moderately more complex than yet another TodoMVC implementation). I'm not going to cover routing, because I've never done any client-side routing myself, but it _is_ kind of along the lines of what you're looking for. I describe the next piece I want to implement, link to the commit implementing that change, show some relevant diffs, and talk about the implementation. For example, I just published Part 6 today ([3]), which demonstrates the "connected list" pattern and then discusses a number of important Redux performance guidelines to be aware of.

[0] https://github.com/markerikson/react-redux-links/blob/master...

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] http://blog.isquaredsoftware.com/series/practical-redux

[3] http://blog.isquaredsoftware.com/2017/01/practical-redux-par...

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | DMCA | Apply to YC | Contact