React Webinar With CodePolitan
-
Upload
riza-fahmi -
Category
Technology
-
view
2.378 -
download
3
Transcript of React Webinar With CodePolitan
![Page 1: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/1.jpg)
REACTINTRODUCTION TO
![Page 2: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/2.jpg)
AGENDA
▸ WHAT IS REACT
▸ WHO IS USING REACT
▸ CORE CONCEPT OF REACT
▸ WHY REACT
▸ HOW TO USE REACT
![Page 3: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/3.jpg)
ABOUT ME
HI, I’M RIZA
CURRICULUM DIRECTOR, CO-FOUNDER
“HACKTIV8 ADA UNTUK MENCIPTAKAN DEVELOPER HANDAL YANG BISA BERJAYA DI
NEGARA SENDIRI"
![Page 4: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/4.jpg)
ABOUT ME
HI, I’M RIZA
facebook.com/rizafahmi
github.com/rizafahmi
medium.com/@rizafahmi22
@rizafahmi22
appscoast.id
![Page 5: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/5.jpg)
REACTWHAT
![Page 6: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/6.jpg)
WHAT
REACT IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES. IT’S V OF MVC
![Page 7: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/7.jpg)
USING REACTWHO
![Page 8: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/8.jpg)
WHO
![Page 9: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/9.jpg)
WHO
![Page 11: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/11.jpg)
REACT CORE CONCEPT
![Page 12: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/12.jpg)
Component
One Way Data Flow
Virtual DOM
![Page 13: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/13.jpg)
In React, we build component, not template
![Page 14: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/14.jpg)
<CommentBox />
<CommentList />
<Comment />
<CommentForm />
![Page 15: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/15.jpg)
Unidirectional Data Flow
![Page 16: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/16.jpg)
DOM VIRTUAL DOM
![Page 17: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/17.jpg)
REACT COMPONENTS VIRTUAL DOM
DIFF-ING THE DOMBROWSER’S DOM
VIRTUAL DOM
![Page 18: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/18.jpg)
![Page 19: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/19.jpg)
![Page 20: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/20.jpg)
![Page 21: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/21.jpg)
SEPARATION OF CONCERN
![Page 22: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/22.jpg)
![Page 23: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/23.jpg)
WTF???!!
![Page 24: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/24.jpg)
2. Get template
as string
3. Append data
to template string
1. Request
4. Send template to client as HTML
Controller View/Template
![Page 25: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/25.jpg)
1. Request
Controller
2. Send template to
client as Virtual DOM
![Page 26: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/26.jpg)
WHAT JSX ACTUALLY DOING FOR YOU
![Page 27: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/27.jpg)
THERE IS SO MANY ALTERNATIVES, SO WHY REACT??!
![Page 28: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/28.jpg)
React / Native
Browser
WindowsDesktop
XBOX
WindowsPhone
Android
Tizen
Netflix
iOSiOS
LEARN ONCE, WRITE ANYWHERE
![Page 29: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/29.jpg)
VIRTUAL DOM IS CRAZY FAST!
![Page 30: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/30.jpg)
COMPONENT-BASED IS THE FUTURE
![Page 31: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/31.jpg)
GREAT DEBUGGING TOOLS
![Page 32: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/32.jpg)
AND THE BRAINS BEHIND FACEBOOK ARE
MAINTAINING THIS PROJECT
![Page 33: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/33.jpg)
LET’S DO SOME REACT!
![Page 34: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/34.jpg)
$ npm install -g create-react-app
$ create-react-app leaderboard
![Page 35: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/35.jpg)
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 );
![Page 36: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/36.jpg)
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 );
![Page 37: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/37.jpg)
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
![Page 38: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/38.jpg)
WHAT WE WILL BUILD
![Page 39: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/39.jpg)
LET’S DO SOME REACT LIVE CODE!
![Page 40: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/40.jpg)
REPOSITORY
THIS CODE AVAILABLE ON…
https://github.com/rizafahmi/react-leaderboard-codepolitan
![Page 42: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/42.jpg)
WEBINAR PROMOPESAN SPONSOR
![Page 43: React Webinar With CodePolitan](https://reader031.fdocuments.net/reader031/viewer/2022021503/587064a91a28ab48378b4ac5/html5/thumbnails/43.jpg)
BEFORE WE SAY GOODBYE
IF YOU LIKE OUR WEBINAR…
http://bit.ly/hacktiv8-webinar