
An all-in-one beginner's guide to modern React application development - koevet
http://www.react.express/
======
acemarke
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](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](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-...](http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-
intro/) , 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](https://www.reactiflux.com) .

~~~
JasonSage
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)

~~~
dabbott
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.

¯\\_(ツ)_/¯

~~~
acemarke
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...](http://blog.isquaredsoftware.com/2017/03/declarative-earth-
> part-1-cesium-webpack/) ) 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.

------
BinaryIdiot
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)?

~~~
dabbott
www.reactnativeexpress.com :D

Thanks for the great feedback! I should probably link to the React Native
version somewhere.

~~~
BinaryIdiot
Oh nice! Yeah please put links to each of your express sites somewhere on the
page. It would be handy _and_ should help with SEO :)

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?

~~~
dabbott
Good thinking! I haven't been considering SEO at all yet really, but I should
definitely start.

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.

------
whatnotests
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.

Hope to look at this on my laptop later.

~~~
shishy
It says "PS: I recommend viewing this guide from a desktop browser rather than
mobile, since the desktop version supports interactive examples."

So, probably best to view on the laptop :)

~~~
Rumudiez
I don't think "probably best" is a good reason for something to be entirely
unusable due to what is likely to be just a minor bug..

------
MrAwesomeSauce
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.

------
rtpg
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.

~~~
acemarke
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.

~~~
rtpg
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.

------
bertjk
What kind of React app development would be considered non-modern?

~~~
dabbott
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.

------
virtuexru
Incredibly well done; with screenshots and everything. Really excited for this
as it completely relates to what I'm doing. Thanks a million!

------
snowman311
This is a thorough beginner's guide! I would recommend it to friends.

------
chmike
Can we use react without npm ?

~~~
ch4s3
Yes you can! Use a CDN like the example in the docs[1].

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...](https://facebook.github.io/react/docs/installation.html#using-
a-cdn)

------
aidenn0
FYI Privacy Badger seems to default to blocking cdn.rawgit.com which makes all
the code examples not appear.

~~~
dabbott
Hmm, interesting... I wonder why cdn.rawgit.com is blocked?

~~~
akiselev
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](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.

------
Jpoechill
Ohh, great. I'm moving into React, and really appreciate this right now –

~~~
dabbott
:D

