SlideShare a Scribd company logo
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="Doug Neiner" />
<PostContent text="..." />
</Post>;
}
});
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 Non-empty components
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" />
<PostContent text="..." />
</Post>;
}
});
“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
JSX is optional
var Blog = React.createClass({
render: function() {
return <Post id="123" type="quote">
<Author name="Doug Neiner" />
<PostContent text="..." />
</Post>;
}
});
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: "..."})
);
}
});
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
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 automatically delegated
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!
Thank You
Twitter: @dougneiner
Email: doug@dougneiner.com
Github: dcneiner

More Related Content

What's hot

React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
Bethmi Gunasekara
 
React js
React jsReact js
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
Sunil Yadav
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
Intro to React
Intro to ReactIntro to React
Intro to React
Eric Westfall
 
Learn react-js
Learn react-jsLearn react-js
Intro to React
Intro to ReactIntro to React
Intro to React
Justin Reock
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
valuebound
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
namespaceit
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
Arno Lordkronos
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
DivyanshGupta922023
 
React and redux
React and reduxReact and redux
React and redux
Mystic Coders, LLC
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
Rob Quick
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
All Things Open
 
WEB DEVELOPMENT USING REACT JS
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JS
MuthuKumaran Singaravelu
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
Knoldus Inc.
 
reactJS
reactJSreactJS
reactJS
Syam Santhosh
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
洪 鹏发
 

What's hot (20)

React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
React js
React jsReact js
React js
 
React Js Simplified
React Js SimplifiedReact Js Simplified
React Js Simplified
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
React JS: A Secret Preview
React JS: A Secret PreviewReact JS: A Secret Preview
React JS: A Secret Preview
 
Introduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace ITIntroduction to React JS for beginners | Namespace IT
Introduction to React JS for beginners | Namespace IT
 
Introduction to React JS
Introduction to React JSIntroduction to React JS
Introduction to React JS
 
ReactJS presentation.pptx
ReactJS presentation.pptxReactJS presentation.pptx
ReactJS presentation.pptx
 
React and redux
React and reduxReact and redux
React and redux
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
 
WEB DEVELOPMENT USING REACT JS
 WEB DEVELOPMENT USING REACT JS WEB DEVELOPMENT USING REACT JS
WEB DEVELOPMENT USING REACT JS
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
reactJS
reactJSreactJS
reactJS
 
[Final] ReactJS presentation
[Final] ReactJS presentation[Final] ReactJS presentation
[Final] ReactJS presentation
 

Similar to A Brief Introduction to React.js

Web Components v1
Web Components v1Web Components v1
Web Components v1
Mike Wilcox
 
ReactJS
ReactJSReactJS
ReactJS.ppt
ReactJS.pptReactJS.ppt
React - Start learning today
React - Start learning today React - Start learning today
React - Start learning today
Nitin Tyagi
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
Sencha
 
jquery.ppt
jquery.pptjquery.ppt
jquery.ppt
HamnaGhani1
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
DayNightGaMiNg
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
DayNightGaMiNg
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
janet736113
 
Real World MVC
Real World MVCReal World MVC
Real World MVC
James Johnson
 
Academy PRO: React JS
Academy PRO: React JSAcademy PRO: React JS
Academy PRO: React JS
Binary Studio
 
Intro to React.js
Intro to React.jsIntro to React.js
Intro to React.js
Smita Prasad
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
bensmithett
 
Creating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlCreating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-html
Ilia Idakiev
 
J query
J queryJ query
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
stephskardal
 
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
SPTechCon
 
[@IndeedEng] Building Indeed Resume Search
[@IndeedEng] Building Indeed Resume Search[@IndeedEng] Building Indeed Resume Search
[@IndeedEng] Building Indeed Resume Search
indeedeng
 
Frontend meetup 2014.06.25
Frontend meetup 2014.06.25Frontend meetup 2014.06.25
Frontend meetup 2014.06.25
EU Edge
 
Webcomponents at Frontend meetup 2014.06.25
Webcomponents at Frontend meetup 2014.06.25Webcomponents at Frontend meetup 2014.06.25
Webcomponents at Frontend meetup 2014.06.25
Robert Szaloki
 

Similar to A Brief Introduction to React.js (20)

Web Components v1
Web Components v1Web Components v1
Web Components v1
 
ReactJS
ReactJSReactJS
ReactJS
 
ReactJS.ppt
ReactJS.pptReactJS.ppt
ReactJS.ppt
 
React - Start learning today
React - Start learning today React - Start learning today
React - Start learning today
 
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark BrocatoSenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
SenchaCon 2016: Ext JS + React: A Match Made in UX Heaven - Mark Brocato
 
jquery.ppt
jquery.pptjquery.ppt
jquery.ppt
 
react-slides.pptx
react-slides.pptxreact-slides.pptx
react-slides.pptx
 
react-slides.pdf
react-slides.pdfreact-slides.pdf
react-slides.pdf
 
react-slides.pdf gives information about react library
react-slides.pdf gives information about react libraryreact-slides.pdf gives information about react library
react-slides.pdf gives information about react library
 
Real World MVC
Real World MVCReal World MVC
Real World MVC
 
Academy PRO: React JS
Academy PRO: React JSAcademy PRO: React JS
Academy PRO: React JS
 
Intro to React.js
Intro to React.jsIntro to React.js
Intro to React.js
 
Styling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS EditionStyling Components with JavaScript: MelbCSS Edition
Styling Components with JavaScript: MelbCSS Edition
 
Creating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-htmlCreating lightweight JS Apps w/ Web Components and lit-html
Creating lightweight JS Apps w/ Web Components and lit-html
 
J query
J queryJ query
J query
 
jQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends ForeverjQuery and Rails: Best Friends Forever
jQuery and Rails: Best Friends Forever
 
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
 
[@IndeedEng] Building Indeed Resume Search
[@IndeedEng] Building Indeed Resume Search[@IndeedEng] Building Indeed Resume Search
[@IndeedEng] Building Indeed Resume Search
 
Frontend meetup 2014.06.25
Frontend meetup 2014.06.25Frontend meetup 2014.06.25
Frontend meetup 2014.06.25
 
Webcomponents at Frontend meetup 2014.06.25
Webcomponents at Frontend meetup 2014.06.25Webcomponents at Frontend meetup 2014.06.25
Webcomponents at Frontend meetup 2014.06.25
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
Uni Systems S.M.S.A.
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
Zilliz
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
Claudio Di Ciccio
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Microsoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdfMicrosoft - Power Platform_G.Aspiotis.pdf
Microsoft - Power Platform_G.Aspiotis.pdf
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Programming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup SlidesProgramming Foundation Models with DSPy - Meetup Slides
Programming Foundation Models with DSPy - Meetup Slides
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”“I’m still / I’m still / Chaining from the Block”
“I’m still / I’m still / Chaining from the Block”
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 

A Brief Introduction to React.js

  • 1. A Brief Introduction to React.js SQUARES CONFERENCE 2015 DOUG NEINER – @DOUGNEINER
  • 3. A React Component var Blog = React.createClass({ render: function() { return <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>; } });
  • 4. A React Component <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>
  • 5. React is similar… • Tree Structure • Custom DOM Elements • Controlled via props (similar to HTML attributes) • Empty and Non-empty components
  • 6. React is different… • Owner-Ownee vs Parents-Children • Special attributes: key and refs
  • 8. What makes React special?
  • 9. JSX var Blog = React.createClass({ render: function() { return <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>; } });
  • 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. JSX is optional var Blog = React.createClass({ render: function() { return <Post id="123" type="quote"> <Author name="Doug Neiner" /> <PostContent text="..." /> </Post>; } });
  • 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. 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. Virtual DOM • Re-render on change vs. mutate • Render is a description • Increases predicability
  • 15. Unidirectional Data Flow • Changes always flow down to via props, never up • Callbacks and actions will flow up
  • 16. Synthetic event system • Events are normalized across browsers • Events are passed into components as props • Events are automatically delegated
  • 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. Thank You Twitter: @dougneiner Email: doug@dougneiner.com Github: dcneiner

Editor's Notes

  1. React.js is an ultra-fast view layer for modern web applications. It is a library, not a framework – so it seeks to solve the challenges around the UI layer without encroaching on the rest of your application. It describes itself as the V in MVC, but for certain use cases, it can be used to power the whole app (Though at LeanKit, it lives strictly as the View layer since we use the Flux architecture pattern via Flux.js).
  2. Notice the part that looks like JavaScript? Notice the part that looks like HTML? Try to forget they are in the same file for a bit. We’ll cover why that is later! But this is a simple React component that is utilizing three other React components, Post, Author, and PostContent.
  3. Focus on this for now. Just the part that looks like HTML as we try to establish some comparisons based on what you already know about the DOM.
  4. 1. React can be visualized as a tree structure similar to DOM. Components that contain other components which in turn may contain other components. 2. React components can be thought of as custom DOM elements, but by the time they hit the actual page they are just plain DOM elements – nothing like custom HTML5 DOM elements. 3. React components can be configured from the outside using their form of attributes called props. Just like you might set a `type` on an input, you can set a prop on a component.
  5. We would never say a <div> owns a child <a>, but in React, components that are responsible for setting the props of other components are called owners. There are some extra props that you won’t find in HTML, but we won’t get into this much today.
  6. You are probably already pretty good at this… We have found a pretty close parallel at LeanKit between CSS class names and our components. If you use BEM, OOCSS or SMACSS understanding how to split your UI into discrete and right-sized components should come pretty naturally.
  7. A JavaScript syntax extension that will transpile into pure JS before its loaded into the browser.
  8. Regarding the old approach of keeping HTML and JS separate, Pete Hunt said its not about separation of concerns but rather separation of technologies. The concerns are the same concerns for both the traditional template and the code it pairs with.
  9. This turns into…
  10. … this. And you can skip JSX and just write this, but most folks generally don’t.
  11. The render methods return a description of what the DOM should look like. This is used to construct a Virtual DOM (Also referred to by the React docs as a Mock DOM). Then, when state changes, and the tree is re-rendered, the new Virtual DOM is compared to the old Virtual DOM and the smallest number of changes is produced. Its a common misconception that the new Virtual DOM is always compared to the actual DOM, when it is actual compared to the previous Virtual DOM. 1. This makes your app very easy to reason about. Given the same state and props, your component will render the same way every time. 2. Clicking a button no longer "dismisses the dialog" – It changes a value in state, that when re-rendered, will result in the dialog going away. 3. We think of "render" as "update visuals", but the render method just returns a snapshot of what the DOM *should* look like at that point. If nothing changed, no changes will be made to the page.
  12. 1. Changes in a React app flow one direction, from some part of the tree down – never up. Triggers (or actions as they are often called) can bubble up (via callbacks, messaging, or dispatcher), but any resulting change starts in one location and flows down. 2. This makes the app very easy to reason about and very predictable.
  13. 1. Events that behave the same across browsers 2. Event handlers are passed into components as props, and might look like how you've been told NOT to do thing – but in reality it wires them up correctly using delegation. You don’t need multiple handlers on the same element as you control the handler in your component.