Muhammad azamuddin introduction-to-reactjs
-
Upload
php-indonesia -
Category
Technology
-
view
613 -
download
0
Transcript of Muhammad azamuddin introduction-to-reactjs
![Page 1: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/1.jpg)
ReactJSReactJSMuhammad Azamuddin
https://www.linkedin.com/in/azamuddin
PHP Indonesia @Microsoft IndonesiaMarch, 26th 2016
![Page 2: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/2.jpg)
bit.ly/reactjs-slidebit.ly/reactjs-slide
![Page 3: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/3.jpg)
ReactJS???ReactJS???what is
![Page 4: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/4.jpg)
JavaScript Library for building
User InterfaceUser Interface
![Page 5: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/5.jpg)
MVCMVC
REACTJSREACTJS
ReactJS is V in MVC
![Page 6: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/6.jpg)
ReactJS is V in MVC
![Page 7: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/7.jpg)
ReactJS is V in MVC
![Page 8: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/8.jpg)
ReactJS is V in MVC
MERNMERN
![Page 9: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/9.jpg)
facebookfacebookADS TEAM & INSTAGRAMADS TEAM & INSTAGRAM
![Page 10: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/10.jpg)
ReactJSReactJSwhat special about it?
![Page 11: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/11.jpg)
SimplicitySimplicityif you want to learn Angular, learn Angular. But if you want to learn React, learn JavaScript
![Page 12: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/12.jpg)
ProductivityProductivityBoostBoost
![Page 13: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/13.jpg)
ComponentComponent
ProductivityProductivityBoostBoost
![Page 14: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/14.jpg)
ProductivityProductivityBoostBoost
Product Search
Product List
Product Item
Product Widget
![Page 15: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/15.jpg)
ProductivityProductivityBoostBoost
<ProductSearch/><ProductList/>
<ProductItem/>
<ProductWidget>
</ProductWidget>
<ProductItem/><ProductItem/>
ProductList.jsx
![Page 16: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/16.jpg)
ProductivityProductivityBoostBoost
ProductSearch.jsxProductList.jsxProductItem.jsx
ProductWidgetWidget
ProductWidget.jsx
![Page 17: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/17.jpg)
ProductivityProductivityBoostBoost
11561 results
![Page 18: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/18.jpg)
EasyEasyCollaborationCollaboration
ProductivityProductivityBoostBoost
Developer & Designer
![Page 19: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/19.jpg)
SEO FriendlySEO Friendly
![Page 20: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/20.jpg)
ProductionProductionReadyReady
You're on good company
![Page 21: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/21.jpg)
Production ReadyProduction Ready
Weppalyzer Sites Using ReactJS Detection
![Page 22: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/22.jpg)
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
![Page 23: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/23.jpg)
PerformancePerformance
![Page 24: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/24.jpg)
<p> Sebelum </p> <p> Sesudah </p>
<p> Sebelum </p> <p> Sesudah </p>
diff
apply
Virtual DOM
Real DOM
PATCH <p> from sebelum to sesudahPatch
![Page 25: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/25.jpg)
Data FlowData FlowClearClear
![Page 26: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/26.jpg)
Component
Component Component Component
Component Component Component
data flows from components to components through properties
![Page 27: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/27.jpg)
Run AnywhereRun AnywhereWrite OnceWrite Once
![Page 28: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/28.jpg)
Run AnywhereRun AnywhereWrite OnceWrite Once
It's Java
![Page 29: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/29.jpg)
Write EverywhereWrite EverywhereLearn onceLearn once
This is ReactJS
![Page 30: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/30.jpg)
// 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
![Page 31: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/31.jpg)
// 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
![Page 32: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/32.jpg)
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
![Page 33: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/33.jpg)
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
![Page 34: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/34.jpg)
Using Community ComponentsUsing Community Components
react-google-mapsreact-google-maps
![Page 35: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/35.jpg)
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
![Page 36: Muhammad azamuddin introduction-to-reactjs](https://reader031.fdocuments.in/reader031/viewer/2022021815/5874d8c71a28abd05f8b612d/html5/thumbnails/36.jpg)
Thank YouThank You