Code generators for React apps

[insin]

React doesn't have built-in conventions for how you structure your apps, other than its components, which naturally define certain types of boundaries.

Despite that, any time you find yourself repeating the same thing over and over, you've effectively created a convention.

For example:

• the route and component structure in the react-router huge-apps example.
• @ryanflorence's gist about a folder structure convention for react-router apps

If you decided you wanted to try these conventions to quickly spin up an app, what if you could just generate new routes/route components which fit the pattern instead of having to manually create, copy and paste? (The webpack incantation for bundle splitting child routes could just be triggered by a flag, for one thing!).

There's also some boilerplate for which I always find myself referring back to documentation, official examples and previous projects, such as how to initially set up a store, middleware etc. in @gaearon's Redux with hot reloading, reducer bundle splitting and development tooling configured correctly. As much as I hate that code generation has the same problems as copy and paste after the initial convenience, if I could generate a known-good version of that boilerplate and perhaps even install the necessary dependencies in one fell swoop, it would remove a source of inertia in adding Redux to an app.

---

I'd also be interested in exploring a role for codemods - what if generators didn't leave you high and dry once you've generated - and especially after you've tweaked - the code, but could provide codemods which could update your dependencies and attempt to update the code to the latest version when libraries change?

[geowarin]

:+1: How do you imagine codemods would work? A bit like yeoman sub-generators?

I like the idea of auto updating to the latest version of the code but that sounds like a tricky problem. Unless every plugin takes a special care of not updating the same files as the others.

Updating index.js, for instance, would probably generate a lot of conflicts.

[insin]

The codemod thing is just an out-there idea (I haven't even written any codemods yet) until we have some concrete use cases. I'm imagining something like you having a bunch of route configuration generated which conforms to a particular convention, then a new version of react-router has a change which affects the convention in some way.

[geowarin]

I realised I did not know what a codemod was. @vramana just wrote a tutorial on the subject. I figured it could be useful to leave that here if other people want to help out but are just as ignorant as I am :smiley:

[vramana]

@geowarin Thanks for pinging me.

@insin I agree with your what you are saying. We can build a next-gen ember-cli (with react instead of ember ofc) that truly understands our application structure with the help of codemods.

[ryanflorence]

Yeah, I'd love to just add a file into routes and my app hot reloads with the new route. I'm not sure how to do it w/o some codegen, and I like to avoid codegen ... not prepared to defend that stance though.

[brysgo]

About the codemods, I created a wrapper around jscodeshift that could help of you want to update code in generators. brysgo/jscodemigrate

[tomByrer]

attempt to update the code to the latest version when libraries change?

That's helpful, though sometimes I'd prefer to manually confirm updates, like when there are breaking changes, or want to revert the updates if my tests fail.

[insin]

This is too big in scope for an nwb issue, ended up putting ideas related to it here: https://medium.com/@jbscript/a-future-for-react-development-tooling-be3bd4554a88