react walk-thru - santa cruz js, may 2015
TRANSCRIPT
![Page 1: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/1.jpg)
React Walk-ThruSanta Cruz JS Meetup
8th May 2015
![Page 2: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/2.jpg)
Simon Sturmer Front-end Engineer @ Facebook
@simonsturmer
![Page 3: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/3.jpg)
–Some Guy on Twitter
“Building in React feels a little like Cheating.”
![Page 4: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/4.jpg)
Before we begin: ES6
• Template Strings
• Arrow Functions
• Destructuring Assignment
• Many more goodies…
![Page 5: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/5.jpg)
Template Strings
… also multi-line and backslash literals.
![Page 6: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/6.jpg)
Arrow Functions
Note the .bind(this) which is the most important part.
![Page 7: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/7.jpg)
Destructuring Assignment
the real win is using with function calls like require()
![Page 8: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/8.jpg)
… ok, now to the good stuff
Why React?
• Fresh way to build your UI
• Just the View layer
• Small API (can be learnt in a day)
• It’s an abstraction over the browser DOM
![Page 9: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/9.jpg)
React is different
react(data) → <View/>
• View is pure function of state
• Declarative
• Compositional
![Page 10: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/10.jpg)
Think of React like this…
…this is in-fact how react started.
![Page 11: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/11.jpg)
In React this would be:
oh right, JSX…
![Page 12: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/12.jpg)
JSX
• Not a templating library
• Just syntax sugar on top of JS
• Totally Optional
![Page 13: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/13.jpg)
Using State
![Page 14: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/14.jpg)
Composition
• Does not actually wrap one element with another
• Extend functionality, add defaults, etc.
![Page 15: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/15.jpg)
OK, let’s build…
![Page 16: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/16.jpg)
Who’s Using React• Netflix • AirBnB • PayPal • Yahoo • BBC • Pintrest • Instagram • WhatsApp • …and of course Facebook
![Page 17: React Walk-Thru - Santa Cruz JS, May 2015](https://reader034.vdocuments.site/reader034/viewer/2022052514/58ed0eb11a28ab4d7c8b459f/html5/thumbnails/17.jpg)
Simon Sturmer …and my little coder-in-the-making
@simonsturmer
I’ll post links to the slides and the demo code on Twitter.