muhammad azamuddin introduction-to-reactjs
TRANSCRIPT
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