LIKE @arrowfunxtion
.
functional setState
REACT
ARROWFUNXTION SERIAL
LIKE @arrowfunxtion
.
SHARE NOW
kalo kamu suka serial ini
LIKE @arrowfunxtion
.
functional setState
REACT
LIKE @arrowfunxtion
setState({counter: this.state.counter + 1}).
setState( (state, props) => {
return {counter: state.counter + }
})Apa bedanya dua cara setState di bawah ini?
1
2
LIKE @arrowfunxtion
setState({counter: this.state.counter + 1}).
setState( (state, props) => {
return {counter: state.counter + }
})1
2
function
object
Apa bedanya dua cara setState di bawah ini?
LIKE @arrowfunxtion
setState({counter: this.state.counter + 1}).
-
kita menggantungkan perubahan state yg akan kita lakukan pada this.state
-
pada kenyataannya React melakukan set state secara asynchronous
-
terkadang React menunda beberapa perubahan state untuk dilakukan berbarengan (batching) -
hal ini menyebabkan kemungkinan nilai this.state tidak seperti yang kita kehendaki jika dalam aplikasi kita banyak pemanggilan setState
LIKE @arrowfunxtion
/* Misal saat ini state = { counter : 1 } */
// Lalu kita melakukan perubahan state seperti di bawah ini
this.setState({counter: this.state.counter + 1})
this.setState({counter: this.state.counter + 1})
this.setState({counter: this.state.counter + 1})
/*
* Kita menghendaki 3 kali perubahan,
* sehingga kini state = { counter: 4 }
*
* tetapi React melakukan batching,
* semua object perubahan dimerge
* sehingga hasil akhir state = { counter: 2}
* seolah hanya sekali setState,
* bukan seperti yang kita harapkan
*/.
LIKE @arrowfunxtion
.
setState( (state, props) => {
return {counter: state.counter + }
})2
function
Solusinya menggunakan functional setState
LIKE @arrowfunxtion
.
setState( (state, props) => {
return {counter: state.counter + }
})-
functional setState merupakan cara yang lebih bisa diandalkan untuk melakukan perubahan state
-
argumen state dan props nilainya lebih terjamin dengan kondisi state component
-
selain itu kita bisa membuat perubahan state yang terpisah dari komponen kita dan bisa kita gunakan ulang (reusable)
LIKE @arrowfunxtion
.
/*
Di manapun, diluar komponen kita
Definisikan perubahan state kita dalam function
*/
var increment = (state, props) => {
return { counter: state.counter + 1}
}
var decrement = (state, props) => {
return { counter: state.counter - 1}
}
/* Di komponenSatu kita */
this.setState(increment)
/* Di komponenLainnya */
this.setState(increment)
/* Di komponenLainnyaLagi */
this.setState(decrement)reusable kan?
LIKE @arrowfunxtion
.
lawan
BSIP
1. dua pemain TERDEPAN bsip sejajar
2. dan berada di belakang garis tengah (daerah sendiri)
3. siap untuk intercept umpang lawan
BASIC DEFENSE
lawan
BSIP
posisi pandangan kita JANGAN lurus dengan pembawa bola, usahakan agak menyamping, sehingga kita bisa melihat lebih luas, sekaligus mengamati pergerakan lawan. maintain this behavior during the match
#2 BASIC DEFENSE
WHETHER WE THINK WE CAN OR WE CAN'T, WE'RE RIGHT
BSIP CHAMPIONE
2017
LIKE @arrowfunxtion
.
BASIC SCOPE
JavaScript
MINI SERIAL
LIKE @arrowfunxtion
.
var competitionName = 'SEA GAMES 2017';
function printCompetition(){
console.log(competitionName);
}
function splitCompetitionName(){
console.log(competitionName);
}GLOBAL SCOPE
competitionName merupakan global variable
variable competitionName bisa digunakan di function manapun di bawahnya
LIKE @arrowfunxtion
.
function shoutTeam(){
var teamName = 'Indonesia';
console.log(teamName)
}
function shoutAgain(){
console.log(teamName)
}
console.log(teamName)LOCAL SCOPE
teamName merupakan local variable yang didefinisikan di function shoutTeam
menggunakan variable teamName di luar function shoutTeam akan menyebabkan error teamName is not undefined
LIKE @arrowfunxtion
.
function parentFunction(){
var outter = 'Indonesia';
function childFunction(){
var inner = 'Garuda Muda';
console.log(outter)
}
console.log(inner)
}LOCAL SCOPE #2
variable outter dapat digunakan dr dalam parentFunction dan function-function di dalamnya, termasuk childFunction
variable inner digunakan di block parentFunction padahal dideklarasikan di dalam childFunction. Error is not defined
LIKE @arrowfunxtion
.
function outterFunction(){
var outter = 'Indonesia';
function innerFunction(){
var inner = 'Garuda Muda';
console.log(outter)
}
console.log(inner)
}LOCAL SCOPE #3
childFunction bisa mengakses variable-variable yang dideklarasikan di parentFunction
tapi, parentFunction tidak bisa mengakses variable yang dideklarasikan di childFunction
LIKE @arrowfunxtion
.
if (true) {
// block if tidak membuat scope baru
var name = 'Azam'; // name tetaplah seolah-olah global scope
}
console.log(name); // logs 'Azam', sehingga ini tidak error.BLOCK STATEMENT
LIKE @arrowfunxtion
.
SHARE NOW
kalo kamu suka serial ini
LIKE @arrowfunxtion
.
$('#signup').click(function(){
$(this).attr('disabled', 'disabled')
var data = $('form').serizalize();
data = Application.toObject(data)
Application.save(data, function(err, res){
$(this).attr('disabled', '');
if(err){
Application.alert('Cant do that');
}
Application.sendEmail(res.user.email, function(err, res){
if(err) return
Application.redirect('/')
})
})
})CALLBACK
LIKE @arrowfunxtion
.
var saveUser = function(err, res){
$('#signup').attr('disabled', 'disabled')
var data = $('form').serialize()
data = Application.toObject(data)
return Application.save(data)
}
var sendEmail = function(err, res){
return Application.sendMail(res.user.email)
}
var notifyUser = function(reason){
Application.alert(reason)
}
var enableButton = function(){
$('#signup').attr('disabled', '')
}
$('#signup')
.click()
.then(saveUser)
.then(sendEmail)
.always(enableButton)
.catch(notifyUser)PROMISE-BASED
LIKE @arrowfunxtion
.
Higher Order Component
React
MINI SERIAL
LIKE @arrowfunxtion
.
Higher Order Component (HoC) adalah
Sebuah Komponen yang menghasilkan Komponen baru
LIKE @arrowfunxtion
.
Maksudnya? Lalu buat apa?
Ya, HoC mengambil sebuah komponen untuk menghasilkan komponen baru dengan tambahan fungsi
LIKE @arrowfunxtion
.
REUSABLE
Selain itu, tambahan fungsi pada HoC bisa digunakan berulangkali di komponen lainnya.
LIKE @arrowfunxtion
.
ANALOGI
HoC
tambah smile
komponen biasa
komponen + smile
LIKE @arrowfunxtion
.
ANALOGI
HoC
tambah smile
komponen biasa
komponen + smile
LIKE @arrowfunxtion
.
export let tambahSmile = (PlainComponent) => {
return class extends React.Component {
constructor(props){
super(props)
}
smile(siapa){
alert(siapa + ' tersenyum...')
}
render(){
<PlainComponent
{...this.props}
smile={this.smile.bind(this)}
/>
}
}
}HoC Tambah Smile
tambahan fungsi
LIKE @arrowfunxtion
.
import { tambahSmile } from './hoc/tambah-smile')
let Student = ({smile}) => {
return <div>
Komponent Student.
<button onClick={e => smile('Student')} >Small</button>
<div>
}
export let tambahSmile(Student)Penggunaan HoC di komponen Lain (Student)
tambahan fungsi
supaya komponent Student bisa menggunakan smile() function dari HoC tambahSmile
LIKE @arrowfunxtion
.
import { tambahSmile } from './hoc/tambah-smile')
let Professor = ({smile}) => {
return <div>
Komponent Student.
<button onClick={e => smile('Professor')} >Small</button>
<div>
}
export let tambahSmile(Professor)Penggunaan HoC di komponen Lain (Professor)
tambahan fungsi
supaya komponent Professsor bisa menggunakan smile() function dari HoC tambahSmile
LIKE @arrowfunxtion
.
var competitionName = 'SEA GAMES 2017';
function printCompetition(){
console.log(competitionName);
}
function splitCompetitionName(){
console.log(competitionName);
}GLOBAL SCOPE
competitionName merupakan global variable
variable competitionName bisa digunakan di function manapun di bawahnya
USAGES
.
SPREAD PROPERTIES
Menggabung Array
var buah = ['pisang', 'mangga', 'durian']
var sayur = ['bayam', 'kangkung']
var persediaan = [...buah, ...sayur]
console.log(persediaan)
// Array ['pisang', 'mangga', 'durian', 'bayam', 'kangkung'].
SPREAD PROPERTIES
Menggabung Array
var buah = ['pisang', 'mangga', 'durian']
var sayur = ['bayam', 'kangkung']
var persediaan = [...buah, ...sayur]
//***************************************************************//
console.log(persediaan)
/* Array ['pisang', 'mangga', 'durian', 'bayam', 'kangkung'] */.
SPREAD PROPERTIES
Menyisipkan Array
var buah = ['pisang', 'mangga', 'durian']
var persediaan = ['kangkung', ...buah, 'bayam']
//***************************************************************//
console.log(persediaan)
/* Array ['kangkung', 'pisang', 'mangga', 'durian', 'bayam'].
SPREAD PROPERTIES
Menggantikan function.apply()
var params = [1,2,3]
var functionKu = function(a,b,c){ // kode ... }
// sebelum: memasukan array sebagai parameter dengan apply
functionKu.apply(null, params);
// sekarang: dengan spread properties
functionKu(...params)
.
SPREAD PROPERTIES
Meng-copy Array
var array1 = ['a', 'b', 'c'];
var array2 = [...array1] // seperti array1.slice()
array2.push('d')
console.log(array2)
// Array ['a', 'b', 'c', 'd']
// array1 tidak berubah.
SPREAD PROPERTIES
Meng-cloning & merge Object
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }
var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }.
SPREAD PROPERTIES
REACT
LICENSE ISSUE
Amankah memakai react
LIKE @arrowfunxtion
?
Apa maksud kalimat ini?
LIKE @arrowfunxtion
Beberapa orang menafsirkan bahwa:
LIKE @arrowfunxtion
-
kita tidak boleh berkompetisi dengan facebook
-
facebook boleh menggunakan codebase project yang kita kembangkan
-
kita tidak boleh menuntut facebook
-
inilah kenapa Microsoft & Google tidak pakai react
TIDAK SEPENUHNYA BENAR.
LIKE @arrowfunxtion
LIKE @arrowfunxtion
Facebook menggunakan
BSD + patent
LIKE @arrowfunxtion
Facebook menggunakan
BSD + patent
Kuis CSS
div.nomor-satu {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
box-sizing: content-box;
}
div.nomor-dua {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
box-sizing: border-box;
}