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

http://www.react.express/

by koevet • 9 years ago

279 35 9 years 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• 9 years 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• 9 years 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• 9 years ago

Can we use react without npm ?

dabbott7• 9 years 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• 9 years 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#usin...

virtuexru• 9 years 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• 9 years ago

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

dabbott7• 9 years ago

aidenn0• 9 years ago

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

dabbott7• 9 years ago

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

akiselev• 9 years 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 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.

BinaryIdiot2• 9 years 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)?

dabbott7• 9 years ago

www.reactnativeexpress.com :D

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

BinaryIdiot2• 9 years 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?

bertjk• 9 years ago

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

dabbott7• 9 years 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• 9 years 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.

acemarke7• 9 years 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 ) 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 .

JasonSage• 9 years 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)

dabbott7• 9 years 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.

¯\_(ツ)_/¯

acemarke7• 9 years ago

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 :) )

kakarot3• 9 years ago

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.

acemarke7• 9 years ago

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

MrAwesomeSauce• 9 years 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.

rtpg2• 9 years 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.

acemarke7• 9 years 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.

rtpg2• 9 years 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• 9 years ago

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

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

Related Stories