Muhammad azamuddin introduction-to-reactjs
6 likes974 views
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.
![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](https://image.slidesharecdn.com/zuwf63rtr7kbkzjotdcj-signature-3af86a26bec91fd44231f0c97b424c432d945dad3ef0dedbff8bb10ce9d5548f-poli-160327053841/85/Muhammad-azamuddin-introduction-to-reactjs-32-320.jpg)
Muhammad azamuddin introduction-to-reactjs
- 1. ReactJSReactJS Muhammad Azamuddin https://www.linkedin.com/in/azamuddin PHP Indonesia @Microsoft Indonesia March, 26th 2016
- 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
- 11. SimplicitySimplicity if you want to learn Angular, lea rn Angular. But if you want to le arn React, learn JavaScript
- 14. ProductivityProductivityBoostBoost Product Search Product List Product Item Product Widget
- 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
- 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
- 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