Live data from Hacker News

How to Structure React Projects

reactjsnews.com

21–30 of 45 posts

Re: How to Structure React Projects

#21

I'm not in tune with the whole web thing, but nothing says overbearing framework like "structure guides" and scaffolding tools. I'm particularly in awe because I just visited the ReactJS site to find out what all the fuzz is about and it makes the bold claim "just the UI", and "the V in MVC".

React itself is very, very simple. The ecosystem around it isn't but it's getting better.

Re: How to Structure React Projects

#22
I have been using this:

https://github.com/erikras/react-redux-universal-hot-example

It's a little heavy, but it includes react-redux bindings, webpack, Babel for ES6 support, mocha for testing, SASS/LESS for styles. There's more info on the GitHub page but it seems to be pretty comprehensive in terms of bundling next-gen front end engineering frameworks.

Re: How to Structure React Projects

#23

I have been using this: https://github.com/erikras/react-redux-universal-hot-example It's a little heavy, but it includes react-redux bindings, webpack, Babel for ES6 support, mocha for testing, SASS/LESS for styles. There's more info on the GitHub page but it seems to be pretty comprehensive in terms of bundling next-gen front end engineering frameworks.

I have been using the same thing. I find the distinction between containers (aka smart components) and components pretty neat.

Re: How to Structure React Projects

#24
So I use mocha and eslint, how do I configure those tools to allow test files in the same directories as the source?

The sticking point I found is enabling different lint rule for test and source in a way that doesn't require linting twice and that is automatically understood by my editor (vim + syntastic)

Re: How to Structure React Projects

#25
This is great but it really only applies to SPAs. I know single pagers are all the rage these days but it often makes a lot of sense to structure your application in a hybrid way where you have full page reloads for different sections of a site and each section is a container for a different SPA. I've got a decent setup for this but I'll be damned if I can find anyone who shares their setup for this sort of use case.

Re: How to Structure React Projects

#27
I've used a structure similar to the one suggested by Ryan Florence in this Gist [1] with some success.

The gist of it is:

> The file structure maps directly to the route hierarchy, which maps directly to the UI hierarchy.

> It's inverted from the model that we've used in other systems. If we consider all folders being either a "generic" or a "feature" folder, we only have one "feature" folder but many "generic" folders.

[1] https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346

Re: How to Structure React Projects

#28
post #27

I've used a structure similar to the one suggested by Ryan Florence in this Gist [1] with some success. The gist of it is: > The file structure maps directly to the route hierarchy, which maps directly to the UI hierarchy. > It's inverted from the model that we've used in other systems. If we consider all folders being either a "generic" or a "feature" folder, we only have one "feature" folder but many "generic" fold…

So basically, the default behaviour of ember.

Re: How to Structure React Projects

#29

Does anyone use React with RoR? How do you combine them?

I know of these two projects that offer some guidance to combining RoR with React:

https://github.com/shakacode/react_on_rails

https://github.com/netguru/react_webpack_rails

Basically, you introduce webpack as part of your dev/build pipeline, it interacts nicely with the asset pipeline.

Post reply on HN