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.
REACT
INTRODUCTION TO
AGENDA
▸ WHAT IS REACT
▸ WHO IS USING REACT
▸ CORE CONCEPT OF REACT
▸ WHY REACT
▸ HOW TO USE REACT
ABOUT ME
HI, I’M RIZA
CURRICULUM DIRECTOR, CO-FOUNDER
“HACKTIV8 ADA UNTUK MENCIPTAKAN
DEVELOPER HANDAL YANG BISA BERJAYA D...
ABOUT ME
HI, I’M RIZA
riza@hacktiv8.com
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
a...
REACT
WHAT
WHAT
REACT IS A JAVASCRIPT LIBRARY FOR BUILDING
USER INTERFACES. IT’S V OF MVC
USING REACT
WHO
WHO
WHO
https://www.facebook.com/FacebookforDevelopers/videos/10153626299178553/
REACT CORE CONCEPT
Component
One Way Data Flow
Virtual DOM
In React, we build component, not template
<CommentBox />
<CommentList />
<Comment />
<CommentForm />
Unidirectional Data Flow
DOM VIRTUAL DOM
REACT COMPONENTS VIRTUAL DOM
DIFF-ING THE DOMBROWSER’S DOM
VIRTUAL DOM
SEPARATION OF CONCERN
WTF???!!
2. Get template
as string
3. Append data
to template string
1. Request
4. Send template to client as HTML
Controller View/...
1. Request
Controller
2. Send template to
client as Virtual DOM
WHAT JSX ACTUALLY DOING FOR YOU
THERE IS SO MANY
ALTERNATIVES, SO WHY
REACT??!
React /
Native
Browser
Windows
Desktop
XBOX
Windows
Phone
Android
Tizen
Netflix
iOSiOS
LEARN ONCE, WRITE ANYWHERE
VIRTUAL DOM IS
CRAZY FAST!
COMPONENT-BASED
IS THE FUTURE
GREAT DEBUGGING TOOLS
AND THE BRAINS BEHIND
FACEBOOK ARE
MAINTAINING THIS PROJECT
LET’S DO SOME
REACT!
$ npm install -g create-react-app
$ create-react-app leaderboard
OUR FIRST REACT COMPONENT
1 var CommentBox = React.createClass({
2 render: function() {
3 return (
4 <div className="comme...
OUR FIRST REACT COMPONENT IN ES6 FLAVOR
1 class CommentBox extends React.Component {
2 render() {
3 return (
4 <div classN...
1 // Props
2
3 <Hello say=“Halo Bandung!” />
4
5 console.log(this.props.say) // => “Halo Bandung!”
6
7
8 // States
9 class...
WHAT WE WILL BUILD
LET’S DO SOME
REACT LIVE CODE!
REPOSITORY
THIS CODE AVAILABLE ON…
https://github.com/rizafahmi/
react-leaderboard-codepolitan
REACT
PROBLEM SET
http://bit.ly/h8-problemset
WEBINAR PROMO
PESAN SPONSOR
BEFORE WE SAY GOODBYE
IF YOU LIKE OUR WEBINAR…
http://bit.ly/hacktiv8-webinar
React Webinar With CodePolitan
React Webinar With CodePolitan
React Webinar With CodePolitan
React Webinar With CodePolitan
Upcoming SlideShare
Loading in …5
×

React Webinar With CodePolitan

3,998 views

Published on

Webinar React: Get Started, Concept and Implementation

Published in: Technology

React Webinar With CodePolitan

  1. 1. REACT INTRODUCTION TO
  2. 2. AGENDA ▸ WHAT IS REACT ▸ WHO IS USING REACT ▸ CORE CONCEPT OF REACT ▸ WHY REACT ▸ HOW TO USE REACT
  3. 3. ABOUT ME HI, I’M RIZA CURRICULUM DIRECTOR, CO-FOUNDER “HACKTIV8 ADA UNTUK MENCIPTAKAN DEVELOPER HANDAL YANG BISA BERJAYA DI NEGARA SENDIRI"
  4. 4. ABOUT ME HI, I’M RIZA riza@hacktiv8.com facebook.com/rizafahmi github.com/rizafahmi medium.com/@rizafahmi22 @rizafahmi22 appscoast.id
  5. 5. REACT WHAT
  6. 6. WHAT REACT IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES. IT’S V OF MVC
  7. 7. USING REACT WHO
  8. 8. WHO
  9. 9. WHO
  10. 10. https://www.facebook.com/FacebookforDevelopers/videos/10153626299178553/
  11. 11. REACT CORE CONCEPT
  12. 12. Component One Way Data Flow Virtual DOM
  13. 13. In React, we build component, not template
  14. 14. <CommentBox /> <CommentList /> <Comment /> <CommentForm />
  15. 15. Unidirectional Data Flow
  16. 16. DOM VIRTUAL DOM
  17. 17. REACT COMPONENTS VIRTUAL DOM DIFF-ING THE DOMBROWSER’S DOM VIRTUAL DOM
  18. 18. SEPARATION OF CONCERN
  19. 19. WTF???!!
  20. 20. 2. Get template as string 3. Append data to template string 1. Request 4. Send template to client as HTML Controller View/Template
  21. 21. 1. Request Controller 2. Send template to client as Virtual DOM
  22. 22. WHAT JSX ACTUALLY DOING FOR YOU
  23. 23. THERE IS SO MANY ALTERNATIVES, SO WHY REACT??!
  24. 24. React / Native Browser Windows Desktop XBOX Windows Phone Android Tizen Netflix iOSiOS LEARN ONCE, WRITE ANYWHERE
  25. 25. VIRTUAL DOM IS CRAZY FAST!
  26. 26. COMPONENT-BASED IS THE FUTURE
  27. 27. GREAT DEBUGGING TOOLS
  28. 28. AND THE BRAINS BEHIND FACEBOOK ARE MAINTAINING THIS PROJECT
  29. 29. LET’S DO SOME REACT!
  30. 30. $ npm install -g create-react-app $ create-react-app leaderboard
  31. 31. OUR FIRST REACT COMPONENT 1 var CommentBox = React.createClass({ 2 render: function() { 3 return ( 4 <div className="commentBox"> 5 Hello, world! I am a CommentBox. 6 </div> 7 ); 8 } 9 }); 10 11 ReactDOM.render( 12 <CommentBox />, 13 document.getElementById('content') 14 );
  32. 32. OUR FIRST REACT COMPONENT IN ES6 FLAVOR 1 class CommentBox extends React.Component { 2 render() { 3 return ( 4 <div className="commentBox"> 5 Hello, world! I am a CommentBox. 6 </div> 7 ); 8 } 9 }; 10 11 ReactDOM.render( 12 <CommentBox />, 13 document.getElementById('content') 14 );
  33. 33. 1 // Props 2 3 <Hello say=“Halo Bandung!” /> 4 5 console.log(this.props.say) // => “Halo Bandung!” 6 7 8 // States 9 class Hello extends React.Component { 10 constructor() { 11 super() 12 this.state = {say: “Halo Bogor!”} 13 } 14 render () { 15 <Hello say={this.state.say} /> 16 } 17 } ‘MODELS’ IN REACT
  34. 34. WHAT WE WILL BUILD
  35. 35. LET’S DO SOME REACT LIVE CODE!
  36. 36. REPOSITORY THIS CODE AVAILABLE ON… https://github.com/rizafahmi/ react-leaderboard-codepolitan
  37. 37. REACT PROBLEM SET http://bit.ly/h8-problemset
  38. 38. WEBINAR PROMO PESAN SPONSOR
  39. 39. BEFORE WE SAY GOODBYE IF YOU LIKE OUR WEBINAR… http://bit.ly/hacktiv8-webinar

×