Hacker News Reader

Comment by JasonSage | Hacker News Reader

I second the recommendation for the Reactiflux Discord—there's always helpful folks online who are willing to assist with whatever problems you're having, and I can't think of any better place on the web to get React-specific help.

I do wish this guide went into the specifics of dealing with Webpack and Babel. As solid as CRA is, Webpack and Babel are very leaky abstractions and I think every JS developer eventually requires some Webpack- or Babel-specific knowledge in order to solve some issue. While CRA is mostly effective at hiding these details, I'm not sure it's close to the safety and sureness you get from a comprehensive working knowledge of Webpack and Babel.

I also second the recommendation for the react-redux-links repo. I've never been in need of a reference for something React-related and been unable to find it there. It's a great , well-thought-out resource.

(Hey @acemarke, jsonnull here)

View on HN

Yeah, like any other set of abstractions, there's value in understanding what's going on underneath the hood with Webpack and Babel. I just don't want that to be a blocker for anyone who is trying to learn React, especially if they're relatively new to web development in the first place.

As an example, there was a large tutorial article about a year ago called "Cloning Yelp". It was an extremely well-written, in-depth tutorial that demonstrated how to build a fairly advanced real-world-ish example app, including use of routing, AJAX, CSS, and wrapping Google Maps.

Unfortunately, the first third of the article was devoted to setting up a production-quality Webpack+Babel config. The HN thread ( https://news.ycombinator.com/item?id=11778663 ) hit about 250 comments, and most of the discussion was complaints about build setup and "Javascript Fatigue".

In contrast, a React tutorial that uses CRA as its starting point can pretty much just start with "Run `npm install -g create-react-app; create-react-app myapp; cd myapp; npm start;` ". There's always time to learn Webpack and Babel later, after you're comfortable with React itself.

(Oh, and thanks for the links list endorsement :) )

Thanks for the feedback, guys. Great point about Reactiflux, I should add a link to that and other "further reading" resources like react-redux-links.

I have both "Quick Start" for CRA, and then the more detailed coverage of npm, Webpack, and Babel under "Build Tools". In most parts of the guide I make a more opinionated choice--however, in this case I leave it to the reader to decide how to set up, since both are valuable for different reasons. I briefly compare the two in "Environment", but it might be worth explaining in more depth.

CRA is amazing for new apps. Yet for somebody trying to learn React to bring it into their workplace, CRA may not make sense.

I'd also love to dive deeper into Webpack and Babel, but don't want the guide to slow down too much before getting into React.

¯\_(ツ)_/¯

Good point - I should have glanced at the first couple bullet sections a bit more carefully :)

Definitely a nice resource overall, and I'll be adding it to my list as well.

I'd still argue that CRA is a good starting point for a lot of "real" apps too. I'll quote a comment I made on Reddit yesterday:

> CRA can absolutely be used for real-world apps. It's not aimed at a full-blown 100% "big company"-type setup, but it is specifically intended to give you a solid build config with good defaults.

> CRA serves three primary purposes: it allows React learners to set up an environment without having to learn Webpack and Babel first; it allows experienced React devs to spin up a project without having to do all the configuration work (or copy and paste it from somewhere); and it also provides a common starting point for instructions and tutorials. For example, my recent blog post on using the Cesium.js 3D globe library with Webpack and React ( http://blog.isquaredsoftware.com/2017/03/declarative-earth-p... ) was able to start by just saying "Create a CRA project, eject, and modify these two config values".

> On that note, CRA's `npm run eject` command transfers all of the pre-written config files into your project if you want to take control and make modifications to the configuration. So, it's entirely feasible to use CRA's configs as the starting point and only have to make some edits instead of writing it all from scratch. And, those configuration files are heavily commented to act as both a learning tool and an explanation if you're trying to make edits.

Reply on news.ycombinator.com