Taming jQuery Selectors with React

Lots of websites start out using jQuery to add client-side interactivity. But before long, all those jQuery selectors start to be repeated over and over in the code. Show something, use the selector. Hide it, use the selector. Change its text, use the selector. React offers a solution in the form of components. And unlike some other JS framworks, you can add React slowly a page (or a piece of a page) at a time. We'll cover how React works, how it can simplify your JS UI code, and see some examples of it in action.

Transcript

1. Taming jQuery Selectors with React Sean Carpenter @scarpenter sean@seancarpenter.net
2. What’s wrong with jQuery? • Nothing! • But it can get a little repetitive • $(“.slider.main”).show();
 $(“.slider.main”).text(“Hi there!”);
 $(“.slider.main”).hide();
3. Lots of Options • Application frameworks • Angular • Ember • MV(C|VM) • Backbone • Knockout
4. React • Facebook and Instagram open source project • Just concerned with the “V” in MVC • Declarative UI construction • Can be added piece by piece to an existing application
5. Simple React Sample https://github.com/scarpenter/cposc-2014
6. Notes About the Sample • No jQuery used, but it could have been • It’s easy (easier?) to use React on one page or part of a page • React plays well with other libraries
7. React Resources http://facebook.github.io/react/ • Lots of good documentation • A great intro tutorial • Blog with announcements and tips
8. Everything Else • react-rails gem for using React easily with Rails • Relatively easy to use React from Coffescript • Use React without JSX: React.DOM.div • With JSX, using backticks to treat JSX as JS • react-tools npm package to transform JSX to JS
9. Questions?