10 ms·

An all-in-one beginner's guide to modern React application development

279 points by koevet 9y ago

whatnotests 9y ago
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 9y ago
  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 9y ago
    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..
chmike 9y ago
Can we use react without npm ?
- dabbott 9y ago
  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.
- ch4s3 9y ago
  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#using-a-cdn https://facebook.github.io/react/docs/installation.html#usin...
virtuexru 9y ago
Incredibly well done; with screenshots and everything. Really excited for this as it completely relates to what I'm doing. Thanks a million!
Jpoechill 9y ago
Ohh, great. I'm moving into React, and really appreciate this right now –
- dabbott 9y ago
  :D
aidenn0 9y ago
FYI Privacy Badger seems to default to blocking cdn.rawgit.com which makes all the code examples not appear.
- dabbott 9y ago
  Hmm, interesting... I wonder why cdn.rawgit.com is blocked?
  - akiselev 9y ago
    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.
BinaryIdiot 9y ago
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 9y ago
  www.reactnativeexpress.com :D Thanks for the great feedback! I should probably link to the React Native version somewhere.
  - BinaryIdiot 9y ago
    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 9y ago
      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.
bertjk 9y ago
What kind of React app development would be considered non-modern?
- dabbott 9y ago
  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.
- sgslo 9y ago
  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.
acemarke 9y ago
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-redux-intro/ 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 https://www.reactiflux.com .
- JasonSage 9y ago
  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 9y ago
    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. ¯\_(ツ)_/¯
MrAwesomeSauce 9y ago
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 9y ago
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 9y ago
  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 9y ago
    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.
snowman311 9y ago
This is a thorough beginner's guide! I would recommend it to friends.

279 points by koevet 9y ago

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 9y ago
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 9y ago
  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..

chmike 9y ago

Can we use react without npm ?

dabbott 9y ago
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.
ch4s3 9y ago
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#using-a-cdn https://facebook.github.io/react/docs/installation.html#usin...

virtuexru 9y ago

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

Jpoechill 9y ago

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

dabbott 9y ago
:D

aidenn0 9y ago

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

dabbott 9y ago
Hmm, interesting... I wonder why cdn.rawgit.com is blocked?
- akiselev 9y ago
  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.

BinaryIdiot 9y ago

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 9y ago
www.reactnativeexpress.com :D Thanks for the great feedback! I should probably link to the React Native version somewhere.
- BinaryIdiot 9y ago
  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 9y ago
    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.

bertjk 9y ago

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

dabbott 9y ago
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.
sgslo 9y ago
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.

acemarke 9y ago

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-redux-intro/ 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 https://www.reactiflux.com .

JasonSage 9y ago
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 9y ago
  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. ¯\_(ツ)_/¯

MrAwesomeSauce 9y ago

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 9y ago

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 9y ago
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 9y ago
  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.

snowman311 9y ago

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