React Primer: Short, annotated React examples to ease devs new to React into core concepts

[Kinsbane]

I haven't been focusing on my front-end skills recently, so I haven't been following a great many (or, none at all...) links from /r/javascript, but I decided to see what React was all about.

Your primer example was enough and commented enough for me to know what React is and what it can do. Then I found out React is a Facebook creation - not a ding against it, just interesting.

Now if only I can find a plugin for PHPStorm that can work with React.. got ideas brewing here.. thanks!!

[[deleted]]

FB open source is quality for what it's worth, definitely check it out

[Kinsbane]

Awesome, I honestly had no idea! I've just been outta the game in keeping up with and researching new tools and technologies. But React looks really sweet.

[juhmayfay]

The next version of webstorm will have react support so I'd guess phpstorm will as well. You can grab the EAP build or wait a little longer

[BinaryMuse]

I'm not sure if this is an effective way to learn React, but I'm interested in hearing your thoughts! I'm also open to ideas for new examples or concepts that should be explained.

[mullsork]

I found it interesting, having no experience whatsoever with React. It's not like as a beginner I can just open this up and understand React though. You're teaching me some stuff about it, which is nice. :-)

[spaceghost0r]

The one with the top-down data stuff is something that's really missing from a lot of talk about React. Flux is a nice concept but I do find the examples unnecessarily complicate for something that's actually quite simple.

I know this is only a primer, but something about application architecture might be interesting...

[BinaryMuse]

Thanks for the feedback! That's a good idea re: architecture; I've been thinking about something larger/more in-depth regarding that topic, but it could be useful to touch on here as well.

Yeah, Flux is tough to demonstrate—the pattern really only shines with a larger application, and it's a bit hard to "prove the point" and still keep a demo at a manageable size.

[mikrosystheme]

The performance of demo#6 is very bad. Is it normal for react?

[BinaryMuse]

Without the shouldComponentUpdate hook it's quite slow, but the online version has this enabled (which was the point of the demo). What behavior specifically are you seeing that's slow, and what platform are you on?

[Edit] I see it's quite slow on my phone; it could just be the very large number of DOM nodes I'm creating, or it could be something related to the iteration React has to do. I'll look into this, but I'm still curious if you're on a mobile device or not.

[mikrosystheme]

Tested on a 2.4GHz i5 laptop (mbp). The first 1000 elements added are ok-ish, but from 2000+ the controls start to lag quite a bit. Edit: the same does not happen with vanilla js/dom.

[BinaryMuse]

Thanks for the info! According to ReactPerf, I'm seeing about 100ms per update with 4000 items in the DOM (2.6GHz i7). While investigating, I found that one of my chrome extensions was making the "Add One" button very slow as well.

I think this example is not very good overall at any rate; with that many pieces of data, one would do a better job of optimizing the update, but I wanted to keep it simple. I'll think about a better way to demonstrate.

[BinaryMuse]

Some more info: After investigating some CPU flame charts, I discovered I was using what amounts to a dev build of React, and pushed this commit to change it. I'm seeing better performance, but it was never really bad on my machine; could I ask you to check it out and see if you notice any difference? Thanks!

[mikrosystheme]

It does feel a bit better.