ReactJSReactJSMuhammad Azamuddin

https://www.linkedin.com/in/azamuddin

PHP Indonesia @Microsoft IndonesiaMarch, 26th 2016

bit.ly/reactjs-slidebit.ly/reactjs-slide

ReactJS???ReactJS???what is

JavaScript Library for building

User InterfaceUser Interface

MVCMVC

REACTJSREACTJS

ReactJS is V in MVC

ReactJS is V in MVC

ReactJS is V in MVC

ReactJS is V in MVC

MERNMERN

facebookfacebookADS TEAM & INSTAGRAMADS TEAM & INSTAGRAM

ReactJSReactJSwhat special about it?

SimplicitySimplicityif you want to learn Angular, learn Angular. But if you want to learn React, learn JavaScript

ProductivityProductivityBoostBoost

ComponentComponent

ProductivityProductivityBoostBoost

ProductivityProductivityBoostBoost

Product Search

Product List

Product Item

Product Widget

ProductivityProductivityBoostBoost

<ProductSearch/><ProductList/>

<ProductItem/>

<ProductWidget>

</ProductWidget>

<ProductItem/><ProductItem/>

ProductList.jsx

ProductivityProductivityBoostBoost

ProductSearch.jsxProductList.jsxProductItem.jsx

ProductWidgetWidget

ProductWidget.jsx

ProductivityProductivityBoostBoost

11561 results

EasyEasyCollaborationCollaboration

ProductivityProductivityBoostBoost

Developer & Designer

SEO FriendlySEO Friendly

ProductionProductionReadyReady

You're on good company

Production ReadyProduction Ready

Weppalyzer Sites Using ReactJS Detection

Production ReadyProduction ReadyDESKTOP APP:

Atom Editor

Bracket Editor (Adobe)

SITES:

PayPal

Teespring

Uber (web App, clients, 15+ internal apps)

AirBnB

Docker

Codecademy

Web Whatsapp

More at https://github.com/facebook/react/wiki/Sites-Using-React

PerformancePerformance

<p> Sebelum </p> <p> Sesudah </p>

<p> Sebelum </p> <p> Sesudah </p>

diff

apply

Virtual DOM

Real DOM

PATCH <p> from sebelum to sesudahPatch

Data FlowData FlowClearClear

Component

Component Component Component

Component Component Component

data flows from components to components through properties

Run AnywhereRun AnywhereWrite OnceWrite Once

Run AnywhereRun AnywhereWrite OnceWrite Once

It's Java

Write EverywhereWrite EverywhereLearn onceLearn once

This is ReactJS

// import declarationimport React, {Component} from 'react'

class MyComponent extends Component{ render(){ return <div> Hello World </div> }}

<MyComponent/>

// => "Hello World"

MyComponent.jsx Usage

Creating First ComponentCreating First Component

// import declarationimport React, {Component} from 'react'

class MyComponent extends Component{

render(){ return <div> Hello {this.props.name} </div> }}

<MyComponent name="John"/>

// => "Hello John"

PropertiesProperties

UsageMyComponent.jsx

Using Community ComponentsUsing Community Components

// import declarationimport React, { Component } from 'react'import Select from 'react-select'

var options = [ { value: 'one', label: 'Australia' }, { value: 'two', label: 'New Zealand' }];

// render method<Select value="one" options={options} multi={true}/>

react-selectreact-select

Using Community ComponentsUsing Community Components

// import declarationimport React, { Component } from 'react'import GoogleMap from 'react-google-maps'

// render method<GoogleMap containerProps={{ ...this.props, style: { height: `100%`, }, }} defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }} />

react-google-mapsreact-google-maps

Using Community ComponentsUsing Community Components

react-google-mapsreact-google-maps

Give it 5 minutesGive it 5 minutesWhat's next?What's next?

http://facebook.github.io/react/

JOIN USFacebook Group @ReactJS Indonesia

Slack http://reactjsindonesia.slack.comhttp://react.id

Thank YouThank You