Hi fellow campers,
I started digging into React with React Js fundamentals course. The course uses Webpack for packaging js and html files. Currently I dont really see the point of using Webpack over gulp. I can get SASS, code minification, rename, move and LiveReload with one gulp file. So my question is, what do you guys use? Webpack or Gulp? Also, how do you guys structure your js, css and html files? Any nice and tested react boilerplates out there?
Happy coding…
I’ve got a gulpfile that I copy into new Express projects which works pretty well for React, too. I’ve used Webpack, but didn’t really like the way it crams all that configuration into JSON format. I won’t say that I hate it, but it just doesn’t jive with me like Gulp does. It’s good to know how to use both.
If you’re wanting boilerplate, it’s hard to do better than Yeoman. I used it for a few earlier fCC projects in Angular last year, but have since found that it’s more efficient to start from an empty project and copy a few config files around. I don’t have anything against boilerplates, but I ended up spending a whole lot of time figuring out how they work instead of doing work with them. YMMV, depending on how obsessive you are.
I myself also use gulp, however I’m starting to see the value of webpack for two simple reasons. First, being able to put everything together in one file without sacrificing modularity gives your project some performance gains. Secondly, I find it easier to use babel for some added es6 fun.
With this being said,I’m also not ready to kick gulp to the curb just yet. I learned that it’s possible to trigger webpack with a gulp task, and plan to make the switch incrementally instead of trying to do the change in one big scary migration.
Glad to know that I’m not alone with the same feelings towards Webpack. Gulp kinna grew on me so it feels more natural. I actually do the same thing with config file. About the boilerplate though, I meant what would be the best way to structure the react app in general. Keeping all components in separate folders with their own css and js? Or perhaps using one js and css (compiled from sass)?
Ah, I see. As far as I know, there’s no established best practice yet, but there are certainly opinionated folks in either camp. For the fCC projects, I’ve kept the SCSS in one folder (usually broken up as main.scss and _variables.scss), and the various React/Flux components in their own folders. I felt that works best for small projects when working by myself, but in a team environment, I can see how much better it would be to keep those stylesheets with their respective components.
For what it’s worth, I learned Webpack from this tutorial last year. I felt it was a great overview on the features, best practices, and getting started with Webpack, but there may be better sources now.
@PortableStick, thanks for sharing the link and for details on file structure. I think I will go in the same direction and keep one folder for scss files.