SlideShare a Scribd company logo
Learning React - I 
Senior Front-End Manager 
Mitch Chen
Outline 
• Showcase 
• Overview 
• Tutorial 
• Where To Go From Here 
• Q & A
Showcase 
• Facebook 
• Instagram 
• Khan Academy 
• The New York Times 
• Mobile Web App
Facebook Lookback Video
Instagram
Khan Academy
NYTimes
Learning React - I
Learning React - I
Overview 
• What is React? 
• Why React Rock? 
• Components, Not Templates 
• Re-render 
• Virtual DOM
What Is React ?
• A Library for creating user interfaces 
• Not yet another JS framework 
• Renders your UI and responds to Events 
• Aka: The V in MVC
Why React Rock?
• Battle-tested on Facebook and Instagram 
• Building Large Applications with data that 
changes over time 
• Components are so Encapsulated, make code 
Reuse, Testing and Separation of Concerns 
easy 
• Browser support back to IE8
Components, Not Templates
• Separation of Concerns: 
Reduce Coupling, increase Cohesion 
• Components are the right way to separate concerns 
• Display Logic and Markup are highly Cohesive: 
They both show the UI 
• React component use Expressive power of programming 
language(JSX) to build UIs 
• React component: 
A highly Cohesive building block for UIs Loosely Coupled 
with other components
• Components are Reusable, Composable and 
Unit Testable 
• Build many simple components that does 
one thing really well 
• Then compose them into a bigger functional 
unit 
• Which allows you to structure the application 
better with more flexibility
Learning React - I
Learning React - I
Re-Render
• State has data you own, Props has data you 
borrow 
• When the state(data) changes, React Re-renders 
the Entire Component 
• No magical data binding 
• No model dirty checking 
• No more explicit DOM operations: 
Everything is declarative
ReactJS v.s. AngularJS
Data flow when a user event results in a DOM update
Virtual DOM
Traditional 
Web App 
React 
Web App
• Makes re-rendering on every change fast 
• Computes minimal DOM operations 
• Batched reads and writes for optimal DOM 
performance 
• Usually faster than manual DOM operations 
• 60fps, even in a UIWebView on the iPhone
Learning React - I
React V.S. Doom 3 
Doom 3 
React
On Every Update… 
• React builds a new virtual DOM 
subtree 
• Diff it with the old one 
• Computes the minimal set of DOM 
mutations and puts them in a queue 
• Batch executes all updates
Tutorial 
• Example: Youtube Most Popular
Learning React - I
Where To Go From Here 
• React JSX 
• State and Props 
• Component Specifications and Lifecycle 
• Communicate Between Components 
• Flux v.s. MVC 
• ……
Q & A
Reference 
http://facebook.github.io/react/ 
http://www.slideshare.net/floydophone/react-preso-v2 
http://www.funnyant.com/reactjs-what-is-it/ 
http://calendar.perfplanet.com/2013/diff/ 
http://lincolnloop.com/blog/architecting-your-app-react-part- 
1/

More Related Content

What's hot

Intro to React
Intro to ReactIntro to React
Intro to React
Justin Reock
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
Anjali Chawla
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
Manish Shekhawat
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
Tariqul islam
 
React for Beginners
React for BeginnersReact for Beginners
React for Beginners
Derek Willian Stavis
 
Getting started with Next.js
Getting started with Next.jsGetting started with Next.js
Getting started with Next.js
Gökhan Sarı
 
Spring ppt
Spring pptSpring ppt
Spring ppt
Mumbai Academisc
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
Sergey Romaneko
 
Intro to Rails ActiveRecord
Intro to Rails ActiveRecordIntro to Rails ActiveRecord
Intro to Rails ActiveRecord
Mark Menard
 
The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!
Baharika Sopori
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
Thanh Tuong
 
Learn react-js
Learn react-jsLearn react-js
React js
React jsReact js
React js
Alireza Akbari
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
Javascript Roadmap - The Basics
Javascript Roadmap - The BasicsJavascript Roadmap - The Basics
Javascript Roadmap - The Basics
Aswin Barath
 
Cucumber presenation
Cucumber presenationCucumber presenation
Cucumber presenation
Oussama BEN WAFI
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
Emanuele DelBono
 
React workshop
React workshopReact workshop
React workshop
Imran Sayed
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
Andrew Hull
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
GDSC UofT Mississauga
 

What's hot (20)

Intro to React
Intro to ReactIntro to React
Intro to React
 
Webpack Introduction
Webpack IntroductionWebpack Introduction
Webpack Introduction
 
Introduction to Angularjs
Introduction to AngularjsIntroduction to Angularjs
Introduction to Angularjs
 
React js programming concept
React js programming conceptReact js programming concept
React js programming concept
 
React for Beginners
React for BeginnersReact for Beginners
React for Beginners
 
Getting started with Next.js
Getting started with Next.jsGetting started with Next.js
Getting started with Next.js
 
Spring ppt
Spring pptSpring ppt
Spring ppt
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
Intro to Rails ActiveRecord
Intro to Rails ActiveRecordIntro to Rails ActiveRecord
Intro to Rails ActiveRecord
 
The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!The Benefits of Using React JS for Web Development!
The Benefits of Using React JS for Web Development!
 
ReactJS presentation
ReactJS presentationReactJS presentation
ReactJS presentation
 
Learn react-js
Learn react-jsLearn react-js
Learn react-js
 
React js
React jsReact js
React js
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
Javascript Roadmap - The Basics
Javascript Roadmap - The BasicsJavascript Roadmap - The Basics
Javascript Roadmap - The Basics
 
Cucumber presenation
Cucumber presenationCucumber presenation
Cucumber presenation
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
React workshop
React workshopReact workshop
React workshop
 
React JS and why it's awesome
React JS and why it's awesomeReact JS and why it's awesome
React JS and why it's awesome
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 

Viewers also liked

Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
GO LL
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
Simon Su
 
Node.js 進攻桌面開發
Node.js 進攻桌面開發Node.js 進攻桌面開發
Node.js 進攻桌面開發
Fred Chien
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
Fred Chien
 
學好 node.js 不可不知的事
學好 node.js 不可不知的事學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
 
Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!
Fred Chien
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
Visual Engineering
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
Joseph Chiang
 
Stem is JavaScript OS
Stem is JavaScript OSStem is JavaScript OS
Stem is JavaScript OS
Fred Chien
 
Introduction to Grunt.js on Taiwan JavaScript Conference
Introduction to Grunt.js on Taiwan JavaScript ConferenceIntroduction to Grunt.js on Taiwan JavaScript Conference
Introduction to Grunt.js on Taiwan JavaScript Conference
Bo-Yi Wu
 
Vlad Trifa - Final PhD Thesis Defense at ETH Zurich
Vlad Trifa - Final PhD Thesis Defense at ETH ZurichVlad Trifa - Final PhD Thesis Defense at ETH Zurich
Vlad Trifa - Final PhD Thesis Defense at ETH Zurich
Vlad Trifa
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Bo-Yi Wu
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
Ron Reiter
 
Elixir & Phoenix 推坑
Elixir & Phoenix 推坑Elixir & Phoenix 推坑
Elixir & Phoenix 推坑
Chao-Ju Huang
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding style
Bo-Yi Wu
 
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
鍾誠 陳鍾誠
 
用十分鐘搞懂 《電腦如何解方程式》
用十分鐘搞懂  《電腦如何解方程式》用十分鐘搞懂  《電腦如何解方程式》
用十分鐘搞懂 《電腦如何解方程式》
鍾誠 陳鍾誠
 
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
鍾誠 陳鍾誠
 
用十分鐘決定要不要念大學《資訊工程系》
用十分鐘決定要不要念大學《資訊工程系》用十分鐘決定要不要念大學《資訊工程系》
用十分鐘決定要不要念大學《資訊工程系》
鍾誠 陳鍾誠
 

Viewers also liked (20)

Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
 
NodeJS基礎教學&簡介
NodeJS基礎教學&簡介NodeJS基礎教學&簡介
NodeJS基礎教學&簡介
 
Node.js從無到有 基本課程
Node.js從無到有 基本課程Node.js從無到有 基本課程
Node.js從無到有 基本課程
 
Node.js 進攻桌面開發
Node.js 進攻桌面開發Node.js 進攻桌面開發
Node.js 進攻桌面開發
 
我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary我編譯故我在:誰說 Node.js 程式不能編成 binary
我編譯故我在:誰說 Node.js 程式不能編成 binary
 
學好 node.js 不可不知的事
學好 node.js 不可不知的事學好 node.js 不可不知的事
學好 node.js 不可不知的事
 
Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!Java script 全面逆襲!使用 node.js 打造桌面環境!
Java script 全面逆襲!使用 node.js 打造桌面環境!
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
Stem is JavaScript OS
Stem is JavaScript OSStem is JavaScript OS
Stem is JavaScript OS
 
Introduction to Grunt.js on Taiwan JavaScript Conference
Introduction to Grunt.js on Taiwan JavaScript ConferenceIntroduction to Grunt.js on Taiwan JavaScript Conference
Introduction to Grunt.js on Taiwan JavaScript Conference
 
Vlad Trifa - Final PhD Thesis Defense at ETH Zurich
Vlad Trifa - Final PhD Thesis Defense at ETH ZurichVlad Trifa - Final PhD Thesis Defense at ETH Zurich
Vlad Trifa - Final PhD Thesis Defense at ETH Zurich
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
 
Writing HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAEWriting HTML5 Web Apps using Backbone.js and GAE
Writing HTML5 Web Apps using Backbone.js and GAE
 
Elixir & Phoenix 推坑
Elixir & Phoenix 推坑Elixir & Phoenix 推坑
Elixir & Phoenix 推坑
 
PHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding stylePHP & JavaScript & CSS Coding style
PHP & JavaScript & CSS Coding style
 
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
 
用十分鐘搞懂 《電腦如何解方程式》
用十分鐘搞懂  《電腦如何解方程式》用十分鐘搞懂  《電腦如何解方程式》
用十分鐘搞懂 《電腦如何解方程式》
 
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》
 
用十分鐘決定要不要念大學《資訊工程系》
用十分鐘決定要不要念大學《資訊工程系》用十分鐘決定要不要念大學《資訊工程系》
用十分鐘決定要不要念大學《資訊工程系》
 

Similar to Learning React - I

React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
Chenguang ZHANG
 
React js
React jsReact js
React js
Nikhil Karkra
 
React introduction
React introductionReact introduction
React introduction
Kashyap Parmar
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
Geoff Harcourt
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
Marc Cyr
 
Meteor + React
Meteor + ReactMeteor + React
Meteor + React
Taggart Bowen-Gaddy
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
jobinThomas54
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
Austin Garrod
 
Mastering react with redux
Mastering react with reduxMastering react with redux
Mastering react with redux
Gaurav Singh
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
Jennifer Estrada
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
Alan Hecht
 
React js Introduction
React js IntroductionReact js Introduction
React js Introduction
Maneesha Caldera
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
Mike Melusky
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
Tech Talk on ReactJS
Tech Talk on ReactJSTech Talk on ReactJS
Tech Talk on ReactJS
Atlogys Technical Consulting
 
Building High-Performance Force.com Applications in React
Building High-Performance Force.com Applications in ReactBuilding High-Performance Force.com Applications in React
Building High-Performance Force.com Applications in React
Salesforce Developers
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
Mike Melusky
 
l1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfl1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdf
Hương Trà Pé Xjnk
 
Introduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptxIntroduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptx
SHAIKIRFAN715544
 

Similar to Learning React - I (20)

React Tech Salon
React Tech SalonReact Tech Salon
React Tech Salon
 
React js
React jsReact js
React js
 
React introduction
React introductionReact introduction
React introduction
 
React.js at Cortex
React.js at CortexReact.js at Cortex
React.js at Cortex
 
ReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOMReactJS - Re-rendering pages in the age of the mutable DOM
ReactJS - Re-rendering pages in the age of the mutable DOM
 
Meteor + React
Meteor + ReactMeteor + React
Meteor + React
 
Reactjs notes.pptx for web development- tutorial and theory
Reactjs  notes.pptx for web development- tutorial and theoryReactjs  notes.pptx for web development- tutorial and theory
Reactjs notes.pptx for web development- tutorial and theory
 
Introduction to React
Introduction to ReactIntroduction to React
Introduction to React
 
Mastering react with redux
Mastering react with reduxMastering react with redux
Mastering react with redux
 
Comparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAsComparing Angular and React JS for SPAs
Comparing Angular and React JS for SPAs
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
React js Introduction
React js IntroductionReact js Introduction
React js Introduction
 
Progressive Web Apps and React
Progressive Web Apps and ReactProgressive Web Apps and React
Progressive Web Apps and React
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
Tech Talk on ReactJS
Tech Talk on ReactJSTech Talk on ReactJS
Tech Talk on ReactJS
 
Building High-Performance Force.com Applications in React
Building High-Performance Force.com Applications in ReactBuilding High-Performance Force.com Applications in React
Building High-Performance Force.com Applications in React
 
Introduction to react native with redux
Introduction to react native with reduxIntroduction to react native with redux
Introduction to react native with redux
 
l1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdfl1-reactnativeintroduction-160816150540.pdf
l1-reactnativeintroduction-160816150540.pdf
 
Introduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptxIntroduction to ReactJS UI Web Dev .pptx
Introduction to ReactJS UI Web Dev .pptx
 

Recently uploaded

A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
kalichargn70th171
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdf
karim wahed
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
Philip Schwarz
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
DNUG e.V.
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
taskroupseo
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
AUGNYC
 
active-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptxactive-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptx
sudsdeep
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
sachin chaurasia
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
Srinivas Dukka
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
908dutch
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
AsifKarimJim
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
sheqnetworkmarketing
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
Mitchell Marsh
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
shivamt017
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
Introduction_to_Security_Assessments.ppt
Introduction_to_Security_Assessments.pptIntroduction_to_Security_Assessments.ppt
Introduction_to_Security_Assessments.ppt
sudsdeep
 
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdfWhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
onemonitarsoftware
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
Hironori Washizaki
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
karim wahed
 

Recently uploaded (20)

A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdfAWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdf
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) .pdf
 
Folding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a seriesFolding Cheat Sheet #7 - seventh in a series
Folding Cheat Sheet #7 - seventh in a series
 
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdfdachnug51 - HCL Sametime 12 as a Software Appliance.pdf
dachnug51 - HCL Sametime 12 as a Software Appliance.pdf
 
Leading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptxLeading Project Management Tool Taskruop.pptx
Leading Project Management Tool Taskruop.pptx
 
NYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdfNYC 26-Jun-2024 Combined Presentations.pdf
NYC 26-Jun-2024 Combined Presentations.pdf
 
active-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptxactive-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptx
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
 
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
AWS DevOps-Tutorial CHANAKYA SRIYAN DUKKA.
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
 
welcome to presentation on Google Apps
welcome to   presentation on Google Appswelcome to   presentation on Google Apps
welcome to presentation on Google Apps
 
Safe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work PermitsSafe Work Permit Management Software for Hot Work Permits
Safe Work Permit Management Software for Hot Work Permits
 
MVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptxMVP Mobile Application - Codearrest.pptx
MVP Mobile Application - Codearrest.pptx
 
Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.Shivam Pandit working on Php Web Developer.
Shivam Pandit working on Php Web Developer.
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
Introduction_to_Security_Assessments.ppt
Introduction_to_Security_Assessments.pptIntroduction_to_Security_Assessments.ppt
Introduction_to_Security_Assessments.ppt
 
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdfWhatsApp Tracker -  Tracking WhatsApp to Boost Online Safety.pdf
WhatsApp Tracker - Tracking WhatsApp to Boost Online Safety.pdf
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
 
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
AWS Cloud Practitioner Essentials (Second Edition) (Arabic) Course Introducti...
 

Learning React - I

  • 1. Learning React - I Senior Front-End Manager Mitch Chen
  • 2. Outline • Showcase • Overview • Tutorial • Where To Go From Here • Q & A
  • 3. Showcase • Facebook • Instagram • Khan Academy • The New York Times • Mobile Web App
  • 10. Overview • What is React? • Why React Rock? • Components, Not Templates • Re-render • Virtual DOM
  • 12. • A Library for creating user interfaces • Not yet another JS framework • Renders your UI and responds to Events • Aka: The V in MVC
  • 14. • Battle-tested on Facebook and Instagram • Building Large Applications with data that changes over time • Components are so Encapsulated, make code Reuse, Testing and Separation of Concerns easy • Browser support back to IE8
  • 16. • Separation of Concerns: Reduce Coupling, increase Cohesion • Components are the right way to separate concerns • Display Logic and Markup are highly Cohesive: They both show the UI • React component use Expressive power of programming language(JSX) to build UIs • React component: A highly Cohesive building block for UIs Loosely Coupled with other components
  • 17. • Components are Reusable, Composable and Unit Testable • Build many simple components that does one thing really well • Then compose them into a bigger functional unit • Which allows you to structure the application better with more flexibility
  • 21. • State has data you own, Props has data you borrow • When the state(data) changes, React Re-renders the Entire Component • No magical data binding • No model dirty checking • No more explicit DOM operations: Everything is declarative
  • 23. Data flow when a user event results in a DOM update
  • 25. Traditional Web App React Web App
  • 26. • Makes re-rendering on every change fast • Computes minimal DOM operations • Batched reads and writes for optimal DOM performance • Usually faster than manual DOM operations • 60fps, even in a UIWebView on the iPhone
  • 28. React V.S. Doom 3 Doom 3 React
  • 29. On Every Update… • React builds a new virtual DOM subtree • Diff it with the old one • Computes the minimal set of DOM mutations and puts them in a queue • Batch executes all updates
  • 30. Tutorial • Example: Youtube Most Popular
  • 32. Where To Go From Here • React JSX • State and Props • Component Specifications and Lifecycle • Communicate Between Components • Flux v.s. MVC • ……
  • 33. Q & A
  • 34. Reference http://facebook.github.io/react/ http://www.slideshare.net/floydophone/react-preso-v2 http://www.funnyant.com/reactjs-what-is-it/ http://calendar.perfplanet.com/2013/diff/ http://lincolnloop.com/blog/architecting-your-app-react-part- 1/