An all-in-one beginner's guide to modern React application development
react.express
react.express
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 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)
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 :) )
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.
¯\_(ツ)_/¯
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.
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.
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_.
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?
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.
[0] http://www.thegreatcodeadventure.com/building-a-simple-crud-...
[1] http://blog.isquaredsoftware.com/series/practical-redux/
[2] http://blog.isquaredsoftware.com/2017/02/presentation-react-...
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.
Thank you so much for your help!
As for the help - you're welcome, and hopefully things click soon :)
Any thoughts about extending this to also include React Native (or creating a separate off shoot for it)?
Thanks for the great feedback! I should probably link to the React Native version somewhere.
Do you have a whole bunch of these or just these two so far? Like are you trying to build up a set of properties with express introductions?
These are the only two so far, but I have a few others in mind. I really like how these have turned out, and I like this style of guide in general.
Hope to look at this on my laptop later.
So, probably best to view on the laptop :)
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.
Yes, the former exists in production, I have worked on them at more than one company.
I've done this for a static site that has some dom manipulation, and it's quite nice as a jquery replacement in that use case.
[1]https://facebook.github.io/react/docs/installation.html#usin...
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.