Top Banner
REACT INTRODUCTION TO
43

React Webinar With CodePolitan

Apr 16, 2017

Download

Technology

Riza Fahmi
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: React Webinar With CodePolitan

REACTINTRODUCTION TO

Page 2: React Webinar With CodePolitan

AGENDA

▸ WHAT IS REACT

▸ WHO IS USING REACT

▸ CORE CONCEPT OF REACT

▸ WHY REACT

▸ HOW TO USE REACT

Page 3: React Webinar With CodePolitan

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

ABOUT ME

HI, I’M RIZA

[email protected]

facebook.com/rizafahmi

github.com/rizafahmi

medium.com/@rizafahmi22

@rizafahmi22

appscoast.id

Page 5: React Webinar With CodePolitan

REACTWHAT

Page 6: React Webinar With CodePolitan

WHAT

REACT IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES. IT’S V OF MVC

Page 7: React Webinar With CodePolitan

USING REACTWHO

Page 8: React Webinar With CodePolitan

WHO

Page 9: React Webinar With CodePolitan

WHO

Page 10: React Webinar With CodePolitan

https://www.facebook.com/FacebookforDevelopers/videos/10153626299178553/

Page 11: React Webinar With CodePolitan

REACT CORE CONCEPT

Page 12: React Webinar With CodePolitan

Component

One Way Data Flow

Virtual DOM

Page 13: React Webinar With CodePolitan

In React, we build component, not template

Page 14: React Webinar With CodePolitan

<CommentBox />

<CommentList />

<Comment />

<CommentForm />

Page 15: React Webinar With CodePolitan

Unidirectional Data Flow

Page 16: React Webinar With CodePolitan

DOM VIRTUAL DOM

Page 17: React Webinar With CodePolitan

REACT COMPONENTS VIRTUAL DOM

DIFF-ING THE DOMBROWSER’S DOM

VIRTUAL DOM

Page 18: React Webinar With CodePolitan
Page 19: React Webinar With CodePolitan
Page 20: React Webinar With CodePolitan
Page 21: React Webinar With CodePolitan

SEPARATION OF CONCERN

Page 22: React Webinar With CodePolitan
Page 23: React Webinar With CodePolitan

WTF???!!

Page 24: React Webinar With CodePolitan

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

1. Request

Controller

2. Send template to

client as Virtual DOM

Page 26: React Webinar With CodePolitan

WHAT JSX ACTUALLY DOING FOR YOU

Page 27: React Webinar With CodePolitan

THERE IS SO MANY ALTERNATIVES, SO WHY REACT??!

Page 28: React Webinar With CodePolitan

React / Native

Browser

WindowsDesktop

XBOX

WindowsPhone

Android

Tizen

Netflix

iOSiOS

LEARN ONCE, WRITE ANYWHERE

Page 29: React Webinar With CodePolitan

VIRTUAL DOM IS CRAZY FAST!

Page 30: React Webinar With CodePolitan

COMPONENT-BASED IS THE FUTURE

Page 31: React Webinar With CodePolitan

GREAT DEBUGGING TOOLS

Page 32: React Webinar With CodePolitan

AND THE BRAINS BEHIND FACEBOOK ARE

MAINTAINING THIS PROJECT

Page 33: React Webinar With CodePolitan

LET’S DO SOME REACT!

Page 34: React Webinar With CodePolitan

$ npm install -g create-react-app

$ create-react-app leaderboard

Page 35: React Webinar With CodePolitan

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

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

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

WHAT WE WILL BUILD

Page 39: React Webinar With CodePolitan

LET’S DO SOME REACT LIVE CODE!

Page 40: React Webinar With CodePolitan

REPOSITORY

THIS CODE AVAILABLE ON…

https://github.com/rizafahmi/react-leaderboard-codepolitan

Page 41: React Webinar With CodePolitan

REACTPROBLEM SET

http://bit.ly/h8-problemset

Page 42: React Webinar With CodePolitan

WEBINAR PROMOPESAN SPONSOR

Page 43: React Webinar With CodePolitan

BEFORE WE SAY GOODBYE

IF YOU LIKE OUR WEBINAR…

http://bit.ly/hacktiv8-webinar