REACT INTRODUCTION TO
REACTINTRODUCTION 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 DI
NEGARA SENDIRI"
ABOUT ME
HI, I’M RIZA
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
appscoast.id
REACTWHAT
WHAT
REACT IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES. IT’S V OF MVC
USING REACTWHO
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/Template
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
WindowsDesktop
XBOX
WindowsPhone
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="commentBox"> 5 Hello, world! I am a CommentBox. 6 </div> 7 ); 8 } 9 }); 10 11 ReactDOM.render( 12 <CommentBox />, 13 document.getElementById('content') 14 );
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 );
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
WHAT WE WILL BUILD
LET’S DO SOME REACT LIVE CODE!
REPOSITORY
THIS CODE AVAILABLE ON…
https://github.com/rizafahmi/react-leaderboard-codepolitan
WEBINAR PROMOPESAN SPONSOR
BEFORE WE SAY GOODBYE
IF YOU LIKE OUR WEBINAR…
http://bit.ly/hacktiv8-webinar