Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
A Brief Introduction
to React.js
SQUARES CONFERENCE 2015
DOUG NEINER –
@DOUGNEINER
What is React?
A React Component
var Blog = React.createClass({
render: function() {
return <Post id="123" type="quote">
<Author name="Do...
A React Component
<Post id="123" type="quote">
<Author name="Doug Neiner" />
<PostContent text="..." />
</Post>
React is similar…
• Tree Structure
• Custom DOM Elements
• Controlled via props (similar to HTML attributes)
• Empty and N...
React is different…
• Owner-Ownee vs Parents-Children
• Special attributes: key and refs
Componentization
What makes React special?
JSX
var Blog = React.createClass({
render: function() {
return <Post id="123" type="quote">
<Author name="Doug Neiner" />
...
“We strongly believe that components are the right way to
separate concerns rather than "templates" and "display logic."
W...
JSX is optional
var Blog = React.createClass({
render: function() {
return <Post id="123" type="quote">
<Author name="Doug...
JSX is optional
var Blog = React.createClass({
render: function() {
return React.createElement(Post, {id: "123", type: "qu...
JSX Gotchas
• Empty elements must include the closing slash: <MyElement />
• class and for attributes are reserved in Java...
Virtual DOM
• Re-render on change vs. mutate
• Render is a description
• Increases predicability
Unidirectional Data Flow
• Changes always flow down to via props, never up
• Callbacks and actions will flow up
Synthetic event system
• Events are normalized across browsers
• Events are passed into components as props
• Events are a...
At this point, I switched to live code and
showed how to start with a static comp
and turn it into a React component.
No s...
Thank You
Twitter: @dougneiner
Email: doug@dougneiner.com
Github: dcneiner
Upcoming SlideShare
Loading in …5
×

A Brief Introduction to React.js

3,255 views

Published on

This is the first half of a presentation I gave at Squares Conference 2015 where I provided a brief introduction to React JS, then did live coding for 20 minutes to show more of the specifics of usage. Your milage may vary as the live code part was where the bulk of the teaching happened!

Published in: Technology
  • Be the first to comment

A Brief Introduction to React.js

  1. 1. A Brief Introduction to React.js SQUARES CONFERENCE 2015 DOUG NEINER – @DOUGNEINER
  2. 2. What is React?
  3. 3. A React Component var Blog = React.createClass({ render: function() { return <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>; } });
  4. 4. A React Component <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>
  5. 5. React is similar… • Tree Structure • Custom DOM Elements • Controlled via props (similar to HTML attributes) • Empty and Non-empty components
  6. 6. React is different… • Owner-Ownee vs Parents-Children • Special attributes: key and refs
  7. 7. Componentization
  8. 8. What makes React special?
  9. 9. JSX var Blog = React.createClass({ render: function() { return <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>; } });
  10. 10. “We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.” – React Docs
  11. 11. JSX is optional var Blog = React.createClass({ render: function() { return <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>; } });
  12. 12. JSX is optional var Blog = React.createClass({ render: function() { return React.createElement(Post, {id: "123", type: "quote"}, React.createElement(Author, {name: "Doug Neiner"}), React.createElement(PostContent, {text: "..."}) ); } });
  13. 13. JSX Gotchas • Empty elements must include the closing slash: <MyElement /> • class and for attributes are reserved in JavaScript, so they are written as className and htmlFor in JSX • The style attribute takes an object literal of key/values not a string • There are more: • http://facebook.github.io/react/docs/dom-differences.html • http://facebook.github.io/react/docs/jsx-gotchas.html
  14. 14. Virtual DOM • Re-render on change vs. mutate • Render is a description • Increases predicability
  15. 15. Unidirectional Data Flow • Changes always flow down to via props, never up • Callbacks and actions will flow up
  16. 16. Synthetic event system • Events are normalized across browsers • Events are passed into components as props • Events are automatically delegated
  17. 17. At this point, I switched to live code and showed how to start with a static comp and turn it into a React component. No slides for this part, sorry!
  18. 18. Thank You Twitter: @dougneiner Email: doug@dougneiner.com Github: dcneiner

×