ReactJS is a JavaScript library for building user interfaces. It uses a component-based approach to build modular and reusable UI components that make code more maintainable and boost productivity. Some key advantages of React include its simplicity, ability to easily create reusable UI components, support for one-way data binding that makes the data flow clear, ability to render on both client and server sides, and strong performance due to its use of a virtual DOM. It is used by many large companies including Facebook, Instagram, Netflix, and Airbnb.

1. ReactJSReactJS
Muhammad Azamuddin
https://www.linkedin.com/in/azamuddin
PHP Indonesia @Microsoft Indonesia
March, 26th 2016

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

3. ReactJS???ReactJS???
what is

4. JavaScript Library for building
User InterfaceUser Interface

5. MVCMVC
REACTJSREACTJS
ReactJS is V in MVC

6. ReactJS is V in MVC

7. ReactJS is V in MVC

8. ReactJS is V in MVC
MERNMERN

9. facebookfacebook
ADS TEAM & INSTAGRAMADS TEAM & INSTAGRAM

10. ReactJSReactJS
what special about it?

11. SimplicitySimplicity
if you want to learn Angular, lea
rn Angular. But if you want to le
arn React, learn JavaScript

12. ProductivityProductivity
BoostBoost

13. ComponentComponent
ProductivityProductivityBoostBoost

14. ProductivityProductivityBoostBoost
Product Search
Product List
Product Item
Product Widget

15. ProductivityProductivityBoostBoost
<ProductSearch/>
<ProductList/>
<ProductItem/>
<ProductWidget>
</ProductWidget>
<ProductItem/>
<ProductItem/>
ProductList.jsx

16. ProductivityProductivityBoostBoost
ProductSearch.jsx
ProductList.jsx
ProductItem.jsx
ProductWidget
Widget
ProductWidget.jsx

17. ProductivityProductivityBoostBoost
11561 results

18. EasyEasy
CollaborationCollaboration
ProductivityProductivityBoostBoost
Developer & Designer

19. SEO FriendlySEO Friendly

20. ProductionProduction
ReadyReady
You're on good company

21. Production ReadyProduction Ready
Weppalyzer Sites Using ReactJS Detection

22. Production ReadyProduction Ready
DESKTOP 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

23. PerformancePerformance

24. <p> Sebelum </p> <p> Sesudah </p>
<p> Sebelum </p> <p> Sesudah </p>
diff
apply
Virtual DOM
Real DOM
PATCH <p> from sebelum to sesudahPatch

25. Data FlowData Flow
ClearClear

26. Component
Component Component Component
Component Component Component
data flows from components to components through pro
perties

27. Run AnywhereRun Anywhere
Write OnceWrite Once

28. Run AnywhereRun Anywhere
Write OnceWrite Once
It's Java

29. Write EverywhereWrite Everywhere
Learn onceLearn once
This is ReactJS

30. // import declaration
import 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

31. // import declaration
import React, {Component} from 'react'
class MyComponent extends Component{
render(){
return <div>
Hello {this.props.name}
</div>
}
}
<MyComponent name="John"/>
// => "Hello John"
PropertiesProperties
UsageMyComponent.jsx

32. Using Community ComponentsUsing Community Components
// import declaration
import 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

33. Using Community ComponentsUsing Community Components
// import declaration
import 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

34. Using Community ComponentsUsing Community Components
react-google-mapsreact-google-maps

35. Give it 5 minutesGive it 5 minutes
What's next?What's next?
http://facebook.github.io/react/
JOIN US
Facebook Group @ReactJS Indonesia
Slack http://reactjsindonesia.slack.com
http://react.id

36. Thank YouThank You