React Webinar With CodePolitan

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

riza@hacktiv8.com

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

REACTPROBLEM SET

http://bit.ly/h8-problemset

WEBINAR PROMOPESAN SPONSOR

BEFORE WE SAY GOODBYE

IF YOU LIKE OUR WEBINAR…

http://bit.ly/hacktiv8-webinar