It's a pretty good document. That said, I personally would advise new learners against trying to deal with Webpack and Babel. Instead, they should use the official Create-React-App tool ( https://github.com/facebookincubator/create-react-app ) for setting up projects. It creates a project with a solid build setup, with no configuration needed on your part. Learning to configure Webpack shouldn't _have_ to be a prerequisite for learning React.
For anyone looking for more information past what this guide offers, I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. I also published an "Intro to React (and Redux)" presentation at http://blog.isquaredsoftware.com/2017/02/presentation-react-... , which is a good overview of the basic concepts for both React and Redux.
Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at https://www.reactiflux.com .
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.
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.
You have noble intent, but you're just trading upfront ease for difficulty down the road.
Understanding the intricacies of and building a custom pipeline with gulp + webpack-stream took me about 3 nights. A paltry about of time for the value it brings to the table.
Opinionated frameworks with several already-configured tools are just big black magic boxes with many moving parts.
Learning how to implement your own pipeline allows you to come to grips with those moving parts one at a time, without feeling overwhelmed.
I mean it's 2017, the unfortunate truth is that having this kind of skillset in your webdev toolbelt is a requirement.
I didn't say people should _never_ learn Webpack or Babel or other similar build tools. I said that those build tools shouldn't have to be a required prerequisite you have to spend time learning and configuring just so you can starting learning React itself :)
You absolutely _can_ use React with just a script tag, but the most common usages do involve compilation (for JSX at a minimum, and likely for ES6 and not-yet-finalized features like the Class Properties syntax). So yes, a build setup is generally needed, but someone who just wants to learn React shouldn't have to worry about that part... _yet_.
I guess we just have differing philosophies on it.
As it happens, I've been learning React the last week as I move away from templating languages, and your list has been in a pinned tab in case I needed it. Thank you so much for the time you've spent aggregating everything.
It's been smooth sailing so far but Redux's documentation leaves a lot to be desired, and Dan's readthesource episode had too many distractions.
I was going to check out some of the Redux tuts you listed, and since you're here... any particular recommendations on which to start with for someone now already familiar with React?
Well, normally I'd say you _should_ start with the Redux docs and Dan's videos on Egghead, both of which try to teach Redux from first principles. The front page of my links list also has a "best-of / getting started" selection of articles on key Redux concepts like "side effects" and "normalization".
I'm very curious - what issues and concerns do you have with Redux's documentation? Any specific pain points or topics that are missing? A large part of my contributions to Redux thus far have been adding sections to the docs (the Redux FAQ and the "Structuring Reducers" section), so if you've got suggestions on how the docs can be improved, I'm always looking for ideas.
I'm not entirely sure what articles to recommend past that, because I'm not sure what topics you've picked up thus far and what info you need next. If you'd like to see some examples of Redux being used to build an actual app, you might want to check out the "Building a Simple CRUD App with React and Redux" series [0], and my own "Practical Redux" tutorial series [1]. I've also got an "Intro to React and Redux" slideset as well [2].
I'd also definitely like to invite you to drop by the Reactiflux chat channels on Discord [3]. Feel free to ping me there and we can figure out what info would best help you continue learning Redux.
I haven't read the Structuring Reducers page yet, though from a glance it looks thorough. I'm still using the docs as a reference and will probably be doing so for a while.
I'm not sure what it is in particular about the docs I have read, but somehow I came out feeling a little overwhelmed. I think the code wasn't explained well enough in some places, and while I understand the concepts behind Redux, it just seems a bit dense in areas. Also, and this may seem silly, but seeing another Todo app as an example was extremely off-putting and made it hard to pay attention to the example code. No one is ever making a Todo app with the tech they are learning and it's getting played out hard. Eventually I decided that a more hands-on tutorial is what I needed.
I've got the first link you mentioned in a tab somewhere, but since you wrote it I think I will start with Practical Redux today and see how it goes. I will try to pop in to Reactiflux tonight to share my progress.
Yeah, there's pros and cons to the proliferation of Todo apps in examples. On the one hand, a Todo app provides just enough of an implementation to demonstrate the basic concepts of a tool, without getting caught up in too much complexity. On the other hand, there's a ton of real-world use cases that a Todo app won't cover. It's a tough balance - teaching basic library/tool concepts vs actual usage.
As for the help - you're welcome, and hopefully things click soon :)
This is really solid. Nice job. Introductions to new languages, frameworks, etc where there is a nice progression but isn't too wordy and let's you jump into code is one of the best ways I personally learn.
Any thoughts about extending this to also include React Native (or creating a separate off shoot for it)?
Hey this looks great, and I'd like to read it now, but something is wrong with the scrolling-- I can't make it to the bottom of the first gist on my iPhone 6 / chrome.
I loved React Native Express for being such a concise and useful tutorial to learn with so I'm super glad you made a React version. Really looking forward to going through this when I have the time, looks like an outstanding job.
One thing about the state management recommendations: They talk about either storing the app state in component `state`, or using Redux.
An alternative I ended up going with is simply storing the app state in its own object, completely outside the React system.
This is a bit similar to using Redux, but you end up not getting lost in that tooling. You have to remember to manually send data over to the components (for example when you get API responses), since you don't get the auto-updating `setState` simply from storing app state in a component. But ultimately it lets you nicely separate the "backend" of your app with the view.
I suppose that's a viable approach, but I'm genuinely curious: if you're going to go to that route, why _not_ use Redux? Besides, the wrapper components generated by the React-Redux `connect()` function help serve that purpose of encapsulating store subscription and interaction, and keeping your real components agnostic of where the data is coming from.
The simplest reason? One less thing to learn. Once you get a feel for things you can pull in redux, but people already have a kinda hard time getting setup.
It's mostly just a buzzword I guess :P. But I intended to imply: ES2016+ using JSX and bundled via Webpack. Back in 2014 I was writing React with ES5 (React.createElement, no async/await) without Babel or Webpack, etc.
Its the difference between a React app using Browserify or something like Sprockets (Rails) written in ES5 vs a React app using Webpack + ES2015+ syntax.
Yes, the former exists in production, I have worked on them at more than one company.
Yes! You can directly include the React library via a script tag, or however else you want. However, it's definitely most common to use node to bundle your app with webpack, browserify, rollup, etc.
PrivacyBadger is a bit more aggressive in blocking CDNs than uMatrix/Ghostery/uBlock Origin because it's more than just an ad blocker: it's meant for privacy across the board.
According to https://github.com/EFForg/privacybadger/issues/746 CDNs are often blocked because they set localstore/cookies and do some stuff that might look like canvas fingerprinting. I would update your privacybadger, if you haven't. It might have been fixed.
For anyone looking for more information past what this guide offers, I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics. I also published an "Intro to React (and Redux)" presentation at http://blog.isquaredsoftware.com/2017/02/presentation-react-... , which is a good overview of the basic concepts for both React and Redux.
Finally, the Reactiflux chat channels on Discord are a great place to hang out, ask questions, and learn. The invite link is at https://www.reactiflux.com .