Beginners Guide to React and Redux

Beginners guide to React and Redux

Trimikha Valentius
Senior Developer @ Ogilvy Australia
Co-initiator/organizer @ BaliJS

Bekraf Developer Day – Bali, May 2017

React
React adalah library Javascript untuk membuat User
Interface.
•  Virtual DOM
•  Fokus ke UI/View, bukan sebuah framework
•  One way data flow

Virtual DOM
DOM API is slow.
(akan terlihat penurunan performance ketika kita
mencoba me-render ulang DOM)

Virtual DOM
Source: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

Manfaat Virtual DOM
•  Read/write operations hanya per-bagian.
•  Sub-tree update yang efisien.
•  Meng-improve performa secara general

Contoh Syntax
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="main.js"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
index.html

Contoh Syntax 2
import React from 'react';
import ReactDOM from 'react-dom';
const exampleElement = document.getElementById('example');
ReactDOM.render(<h1>Halo, Bali!</h1>, exampleElement);
main.js

JSX
JSX adalah syntax tambahan pada Javascript, yang
mirip dengan XML/HTML
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

Merender Component
main.js
const App = () => {
return (<p>Halo, Bali!</p>);
}
const exampleNode = document.getElementById('example');
ReactDOM.render(<App />, exampleNode);

Merender Component
Index.html
<body>
<div id="example">
<p> 
Hello World!
</p> 
</div>
</body>

Component terpisah
profile.js
const Profile = ({avatar, name}) => {
return (
<div>
<img src={avatar} />
<span>{name}</span>
</div>
);
}

Component terpisah 2
main.js
import Profile from ‘./profile';
const App = () => {
return (
<div>
<h1>Halo, Bali!</h1>
<Profile avatar="http://test.png" name="Trimikha" />
</div>
);
}
const exampleNode = document.getElementById('example');
ReactDOM.render(<App />, exampleNode);

Component terpisah 3
Index.html
<body>
<div id="example">
<div> 
<h1>Hello World!</h1>
<div> 
<img src="http://test.png" />
<span>Trimikha</span>
</div> 
</div> 
</div>
</body>

Stateless Function Components
Functional Programming:
- hindari changing-state
- hindari mutable data
- Memanggil fungsi lebih dari satu kali dengan
argumen yang sama akan menghasilkan hasil
yang sama

Manfaat functional programming

- Mudah dimengerti
- Mudah untuk di test

Kesimpulan React

-  Kita bisa membuat component kita sendiri
-  Functional programming
-  Semua aktifitas code di kendalikan di JS

Redux

Redux memungkinkan kita untuk me-manage state
dengan minimal API tapi dan mudah untuk
dimengerti.

React
- Facebook, Firefox, Airbnb , Instagram, dll
Redux
- Firefox, Docker, Airbnb, Zapier, dll

Web App
Interactive App
Web dengan feature yang dinamis & Real time

Kapan tidak menggunakan React?

Web Statis
Landing Page
Website Berita (News site)

Link yang bermanfaat
•  https://github.com/facebookincubator/create-
react-app
•  https://redux.js.org
•  https://facebook.github.io/react/

Terima Kasih
Matur Suksma!
https://github.com/tvalentius
http://tvalentius.com/

https://www.meetup.com/BaliJS/
https://web.facebook.com/BaliJS

BaliJS Meetup

Beginners Guide to React and Redux

Recommended

Recommended

More Related Content

Similar to Beginners Guide to React and Redux

Similar to Beginners Guide to React and Redux (20)

Beginners Guide to React and Redux