React.js Introduction for People Who Know Just Enough JQuery

I haven&#x27;t gone through this page yet, but thank you for at least the attempt at reaching somebody in my state of affairs. Front End work is very hard. The front end design &amp; what I would call the back-end front-end disciplines are supposed to meld together according to job postings and over-zealous recruiters, but it&#x27;s a good deal more complex than I have been willing to put up with, mostly because of the materials to get started and the unintuitive tools that people who know what they are doing swear by.<p>Imagine being solid at design, pushing pixels, using HTML, CSS. Then suddenly these program frameworks which are created by back-end programmers not visual designers appear and the ramp up for the average technical person is immense. For me it&#x27;s been enough to turn me off them all together and make it a talking point that &quot;my javascript skills fall off at X,Y or Z&quot; so recruiters and employers know that despite being able to do a lot, I can&#x27;t suddenly become everything UI and everything back end just because the title of anything &quot;front end&quot; is so versatile.

Speaking as someone not intimately involved in the web development community, React looks decent but absolutely not worthy of the obscene amounts of hype it received... unless what web devs had before was really that horrible, because that&#x27;s the impression I got. Though from what I can tell, jQuery and React are somewhat orthogonal tools, as I have used the former and it goes beyond rendering views.<p>What I cannot figure out is all the harping on about &quot;functional style&quot;. The React examples all felt more Smalltalk-ish to me than anything else (I suppose unsurprising given JavaScript&#x27;s vague influences from Self). The use of closures doesn&#x27;t really change the conceptual patterns much. Is it because the tutorial can only cover so much ground, or is it that since some of the primary buzz around FP was the management of mutable state, to the point that people now instinctively associate the idea with FP?

Shameless plug: I wrote my own React introduction—geared more for people that know some JS and HTML, but not necessarily any other JS libraries. More specifically, it very gradually builds up from rendering a single JSX tag to enough components, state, and props to build React&#x27;s to-do example. I found React has an unusually gradual learning curve—you can really build up concepts bit-by-bit.<p>EDIT: As per usual, I forgot the link: <a href="https:&#x2F;&#x2F;github.com&#x2F;dahjelle&#x2F;Programming-Worksheets&#x2F;blob&#x2F;master&#x2F;React.js&#x2F;IntroductoryReact.markdown" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dahjelle&#x2F;Programming-Worksheets&#x2F;blob&#x2F;mast...</a>

As someone who knows Angular and Knockout. I found this great. Because react is a different way of thinking IMO that most tutorials I read were not easy to get up and running so I just threw in the towel and forgot about react. Most people make too many assumptions on the skill level of the reader (myself included when I blog) and it can be frustrating.<p>Thanks.

Maybe slightly off-topic, but the tutorial page adds entries to my (Firefox) back button as I scroll down. So when I tried to &quot;back&quot; to HN, nothing happened. Second, third back, nothing happened. Opening the back list, a dozen or so entries and they all do nothing.<p>I think this kind of design should really be avoided, it breaks my user experience.

Consumable content aside, I absolutely <i>love</i> the format of the tutorial. It&#x27;s <i>significantly</i> more pleasant to dig into compared to what seems to be the more common tutorial format (e.g. [1]).<p>Good work.<p>[1]: <a href="https:&#x2F;&#x2F;tour.golang.org&#x2F;welcome&#x2F;1" rel="nofollow">https:&#x2F;&#x2F;tour.golang.org&#x2F;welcome&#x2F;1</a>

Is React meant to replace Ember&#x2F;Angular type of frameworks? Can React also connect with backend APIs to fetch JSON and present them on the frontend? I&#x27;ve been waiting to nosedive into Angular2 (when its out), is React a better alternative to get started with?

Sorry but nowadays I feel that jQuery is like php for the frontend: people get results fast but the average code quality is so shitty. Why on earth is jQuery used for things that normal js can do instantly? There are so many libs out there based on jQuery even though this dependency is absolutely unnecessary. I might sound arrogant but people should get an understanding for JavaScript and learn how to use it before stacking layers of abstraction. Ajax with normal JS for example is not so hard. One doesn&#x27;t need all the fancy angular&#x2F;jQuery&#x2F;whatsoever helpers. If one knows the basics it&#x27;s okay to use some convenience stuff from time to time but I feel that so many low quality devs are solely relying on their precious xxx kb libs just to display a simple hello world.

I have looked at react.js a couple times after reading more and more buzz about how fantastic it is. However I&#x27;m instantly turned off of switching to it when I read that HTML (which isn&#x27;t HTML and is actually something called JSX) goes in your js files.<p>With angular I can keep all my HTML in my HTML files. Is this normal or am I completely missing something?

I see the point but noone in their right mind would write the javascript like that. When written better it&#x27;s a good amount shorter than the React solution.<p><a href="http:&#x2F;&#x2F;pastebin.com&#x2F;wbGZZs7U" rel="nofollow">http:&#x2F;&#x2F;pastebin.com&#x2F;wbGZZs7U</a>

Thank you, great intro to react. Easy for me as a backend dev to follow and get a grasp of React.<p>One thing, the page loaded constantly itself, after reading half through the tutorial (3-4 minutes), I had about a hundred entries for the same page in the tab history. This makes the website aweful.

Can React use separate HTML templates? I find this style of mixing markup and Javascript super-ugly.

OK I may be off point here - but why do people who know just enough JQuery need to know about React ?<p>Wasn&#x27;t React developed as a tool to manage complex data flow patterns inside of a big web app like Facebook ? Why does your average JQuery developer need to know or care about this whole new abstraction layer ?<p>Even though I&#x27;ve seen it a 100 times by now I&#x27;m still amazed by how fad driven programming culture is and I feel like this is a perfect example : React - come learn this complex peace of technology to solve problems you never had (and probably never will).

Can somebody explain to me what is so bad about jquery? I use jquery every single day to make web pages do the things that I want them to do.<p>But my javascript hipster friends all claim that this is wrong and stupid and that I shouldn&#x27;t use jquery because of some abstract reason that nobody ever seems to be able to articulate to me.

Also interesting to see the pitch on &quot;ClojureScript is a Product Design Tool&quot;[0], written by Precursor&#x27;s designer. A lot of this stuff can be made more accessible for designers and FE developers who don&#x27;t <i>want</i> to have to deep dive into all the new-fangled frameworks.<p>[0] <a href="https:&#x2F;&#x2F;precursorapp.com&#x2F;blog&#x2F;clojure-is-a-product-design-tool" rel="nofollow">https:&#x2F;&#x2F;precursorapp.com&#x2F;blog&#x2F;clojure-is-a-product-design-to...</a>

I&#x27;m excited for ReactJS catching fire. I&#x27;ve been using a lot of it lately, and most recently I had to go back to a set of components I built to add functionality. In total, the front-end took maybe 20 minutes: no fishing around for the right selector or clashing functions. Just &quot;here&#x27;s a new button, attach this event&quot;

If you must compare Angular with React, then at least compare it to ReactJs+Flux+more or Angular-Templates with React-Templates.<p>React is more like the view-lib of a framework. I like them both (also ember, knockout, backbone) and unfortunately think the battle isn&#x27;t decided yet. Will take some time if ever...<p>Complain to Steve Jobs(1), for killing Flash&#x2F;Flex, as you could to client-side apps with desktop performance, without the hassle of Cross-Browser testing and so on... In my opinion the concepts of Angular and React+Flux are heavily based on the features this platform provided.<p>(1) IMHO the Only good thing he ever did (for the web), as it forced the proprietary software out... but led to the great Framework-War :)<p>P.S.: Also Actionscript 3 was ECMAScript(Javascript) plus Classes, Types and more... ( I wondered about which Version that was latly and found out they implemented ECMAScript and extended it with features requested by users.)

Really well written, as a backend developer who has been playing a little bit with frontend lately this hits the sweet spot :)<p>Cheers

This tutorial is awesome! I love the tone and how it knows EXACTLY who it is written for.<p>This may be a bit late, but I would LOVE for someone to do this for JS in a Rails App (or even CoffeeScript). I am desparately searching for good tutorials for people that are &quot;borderline-decent&quot; at jQuery but are Rails devs. I can&#x27;t find any.<p>I understand, in theory, how to render some JS on a view and all this good stuff - but once you go into creating a UI that feels like a modern UI with lots of lil AJAXy elements...it can become a pain REAL quick with a bunch of `...js.erb`s all over the place with no seeming pattern to them.<p>So I would love if someone had a tutorial just like this, for how to create a simple and sexy app that looks like an Angular&#x2F;Ember app but just using CoffeeScript&#x2F;jQuery&#x2F;vanilla JS.<p>Anyone know of any such thing?

Really great tutorial - would be good in the next steps to talk about getting webpack setup etc..

Good article. Needed it two weeks ago :D<p>I did 4 years ExtJS and 1 year Ember. React was totally different but rather nice to work with. The API surface is so much smaller.

Great job, man! You make some strong points here that clearly reflect the important differences of these two approaches! Well done!

Comparing jquery to React (or Angular&#x2F;Aurelia&#x2F;etc) is obvious but the article is great for beginners though.

Great concept (tutorials for people who know just enough JQuery). Would love more tutorials (for Angular, e.g.) for such people.<p>TodoMVC was a great effort. But unfortunately, the actual Todo creations are not well documented (for beginners to figure out how and why certain things were done).

This is really neat.. one thing though: there is nothing magic about &#x27;the &quot;magic&quot; state&#x27;; it would IMHO be better to just call it state (or inner state, or so), and to explain that once the state is changed react rerenders the component automatically.

I think this article demonstrates very well why I think React should be the first choice for any new web projects... what to go with it (ember, flux (and related), or other) is open to more debate.<p>Of course there are great alternatives with similar workflows (mercury, etc).

This is the first React article I read where it actually compares and contrasts the jQuery approach and the React approach. I feel like React makes sense now, even though writing my HTML inside JS still feels off.

That is a truly impressive tutorial. Just curious, how much time did you spend on putting it together? Additional props for doing it being a dad!

My web experience is mostly custom in-house web frameworks, JSP, JSF, WebForms, jQuery and basic Angular.<p>It was a nice overview of React to me.

Would you be open to the idea of writing something similar for React Native if you are interested and&#x2F;or find the time?

This is neat! Thanks for sharing.

Wow, this is exactly what I needed.

Beautiful article man.

am I the only one fine with using just jQuery and ajax? I&#x27;ve written a chrome extension with 4k lines of code and I never had any problems. Instead of breaking things into separate classes and components, I just put them in separate files or in logical sequence. I&#x27;m sure this can get a lot messy with more than one developer but so far my projects, I almost always just use some jQuery library or plugin that does 80% of what I want to do and hack the rest.