Tampilkan postingan dengan label React. Tampilkan semua postingan
Minggu, 28 Mei 2017
Tutorial Redux Latihan dengan Input Data dan Update State
Jaka Prima Maulana
pada tutorial kali ini kita akan membuat ulang dari hasil teori dan praktek yang sudah di bahas pada artikel sebelumnya, dengan membuat fungsi penjumlahan dimana ada inputan 1 dan 2 yang menghasilkan state hasil.
berikut adalah hasil codenya dengan bold yang menjadi fokus penambahan latihan sesuai judul kita ini
<!DOCTYPE html>
<html>
<head>
<title>redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
di klik sebanyak: <span id="value">?</span> berapa kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<div>
penjumlahan
<input type="number" name="input1" id="input1">
<input type="number" name="input2" id="input2">
=
<span id="hasil"></span>
<button id="tombolJumlah">jumlahkan</button>
</div>
<script type="text/javascript">
var store = Redux.createStore(reducerFunction);
var valueElement = document.getElementById('value');
var valueHasil = document.getElementById('hasil');
function render(){
valueElement.innerHTML = store.getState().object1;
valueHasil.innerHTML = store.getState().propObjHasil;
}
render();
store.subscribe(render);
function reducerFunction(stateSaatIni, aksi){
var stateAwal = {object1: 0, propObjHasil: 0};
var stateSelanjutnya = Object.assign({}, stateSaatIni);
if (stateSaatIni === undefined){
stateSelanjutnya = stateAwal;
return stateSelanjutnya;
}
switch (aksi.type){
case 'decrement':
stateSelanjutnya.object1 = stateSaatIni.object1 - 1;
return stateSelanjutnya;
case 'increment':
stateSelanjutnya.object1 = stateSaatIni.object1 + 1;
return stateSelanjutnya;
case 'menjumlahkan':
stateSelanjutnya.propObjHasil = parseInt(aksi.input1) + parseInt(aksi.input2);
return stateSelanjutnya;
default:
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
var aksi = {type: 'decrement'};
store.dispatch(aksi);
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
var aksi = {type: 'increment'};
store.dispatch(aksi);
}, 1000
);
});
document.getElementById('tombolJumlah').addEventListener('click',function(){
var a = document.getElementById('input1').value;
var b = document.getElementById('input2').value;
var aksi = {type: 'menjumlahkan', input1: a, input2: b};
store.dispatch(aksi);
});
</script>
</body>
</html>
Selengkapnya..
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
pada tutorial kali ini kita akan membuat ulang dari hasil teori dan praktek yang sudah di bahas pada artikel sebelumnya, dengan membuat fungsi penjumlahan dimana ada inputan 1 dan 2 yang menghasilkan state hasil.
berikut adalah hasil codenya dengan bold yang menjadi fokus penambahan latihan sesuai judul kita ini
<!DOCTYPE html>
<html>
<head>
<title>redux basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
di klik sebanyak: <span id="value">?</span> berapa kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<div>
penjumlahan
<input type="number" name="input1" id="input1">
<input type="number" name="input2" id="input2">
=
<span id="hasil"></span>
<button id="tombolJumlah">jumlahkan</button>
</div>
<script type="text/javascript">
var store = Redux.createStore(reducerFunction);
var valueElement = document.getElementById('value');
var valueHasil = document.getElementById('hasil');
function render(){
valueElement.innerHTML = store.getState().object1;
valueHasil.innerHTML = store.getState().propObjHasil;
}
render();
store.subscribe(render);
function reducerFunction(stateSaatIni, aksi){
var stateAwal = {object1: 0, propObjHasil: 0};
var stateSelanjutnya = Object.assign({}, stateSaatIni);
if (stateSaatIni === undefined){
stateSelanjutnya = stateAwal;
return stateSelanjutnya;
}
switch (aksi.type){
case 'decrement':
stateSelanjutnya.object1 = stateSaatIni.object1 - 1;
return stateSelanjutnya;
case 'increment':
stateSelanjutnya.object1 = stateSaatIni.object1 + 1;
return stateSelanjutnya;
case 'menjumlahkan':
stateSelanjutnya.propObjHasil = parseInt(aksi.input1) + parseInt(aksi.input2);
return stateSelanjutnya;
default:
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
var aksi = {type: 'decrement'};
store.dispatch(aksi);
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
var aksi = {type: 'increment'};
store.dispatch(aksi);
}, 1000
);
});
document.getElementById('tombolJumlah').addEventListener('click',function(){
var a = document.getElementById('input1').value;
var b = document.getElementById('input2').value;
var aksi = {type: 'menjumlahkan', input1: a, input2: b};
store.dispatch(aksi);
});
</script>
</body>
</html>
Tutorial Redux Store State Reducer Action Dispatch Subcribe (update state)
Jaka Prima Maulana
pada tutorial kali ini kita akan membahas mengenai " Tutorial Redux Store State Reducer Action Dispatch (update state) " pada tutorial sebelumnya kita telah membahas hal tersebut namun hanya sebatas menjawab bagaimana mendefinisikan default state.
pada tutorial kali ini akan di jelaskan untuk menjawab bagaimana mengupdate state, script sebelumnya bisa dilihat di tutorial sebelumnya disini.
sebelum kita memulai ada baiknya kita pahami dahulu teori tentang store, dispatch, dan subcribe
Selengkapnya..
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,pada tutorial kali ini kita akan membahas mengenai " Tutorial Redux Store State Reducer Action Dispatch (update state) " pada tutorial sebelumnya kita telah membahas hal tersebut namun hanya sebatas menjawab bagaimana mendefinisikan default state.
pada tutorial kali ini akan di jelaskan untuk menjawab bagaimana mengupdate state, script sebelumnya bisa dilihat di tutorial sebelumnya disini.
sebelum kita memulai ada baiknya kita pahami dahulu teori tentang store, dispatch, dan subcribe
Dispatch
dispatch adalah member dari store dengan script berikut store.dispatch(object) yang berisikan object yang di passkan ke reducer, dispatch ini adalah jawaban untuk bagaimana caranya update state
Subcribe
subscribe adalah member dari store yang berfungsi untuk merender ulang hasil dari pengolahan state ke innerhtml
berikut contoh hasil coding update state :
<!DOCTYPE html>
<html>
<head>
<title>reduc basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
di klik sebanyak: <span id="value">?</span> berapa kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<script type="text/javascript">
var store = Redux.createStore(reducerFunction); // STORE
var valueElement = document.getElementById('value');
function render(){
valueElement.innerHTML = store.getState().object1; // STATE
}
render();
store.subscribe(render); //SUBSCRIBE
function reducerFunction(stateSaatIni, aksi){ // REDUCER
var stateAwal = {object1: 0};
var stateSelanjutnya = Object.assign({}, stateSaatIni);
if (stateSaatIni === undefined){
stateSelanjutnya = stateAwal;
return stateSelanjutnya;
}
switch (aksi.type){
case 'decrement':
stateSelanjutnya.object1 = stateSaatIni.object1 - 1;
return stateSelanjutnya;
default:
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
var aksi = {type: 'decrement'};
store.dispatch(aksi); // DISPATCH
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
valueElement.innerHTML = parseInt(valueElement.innerHTML) + 1;
}, 1000
);
});
</script>
</body>
</html>
Tutorial Redux Store State Reducer Action Dispatch (definisikan default state)
Jaka Prima Maulana
Pada tutorial sebelumnya telah dibuat Javascript murni yang di jadikan contoh, lalu dalam penggunaan redux library sekarang masuk dalam teori penting yang harus selalu diingat kunci penting dalam penggunaan redux yaitu Store State Reducer Action dan Dispatch
Selengkapnya..
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
Pada tutorial sebelumnya telah dibuat Javascript murni yang di jadikan contoh, lalu dalam penggunaan redux library sekarang masuk dalam teori penting yang harus selalu diingat kunci penting dalam penggunaan redux yaitu Store State Reducer Action dan Dispatch
State
State adalah sebuah object yang akan di manage oleh Store, state berisi object yang terdapat value untuk ditampilkan ke plain javascript .innerHtml : store.getState()
Store
store adalah fungsi library redux yang berisi parameter reducer untuk mengolah state : Redux.createStore(function reducer);
Hubungan State dan Store
state digunakan untuk mengambil data state dari store hasil olahan reducer yang mengembalikan nilai state. sedangkan store digunakan untuk membuat store yang berisikan parameter reducer
Reducer
reducer adalah sebuah function yang berisi parameter state saat ini dan action. function ini yang digunakan untuk menentukan nilai value state awal dan proses perubahan state
Hubungan Store dan Reducer
ketika store pertama kali dipanggil maka reducer akan dijalankan dan state akan berstatus undefined karena belum didefinisikan nilainya, maka di dalam reducer tersebut akan didefinisikan state awalnya
berikut hasil script dari teoritis diatas
<!DOCTYPE html>
<html>
<head>
<title>reduc basic example</title>
<script src="https://npmcdn.com/redux@latest/dist/redux.min.js"></script>
</head>
<body>
<div>
<p>
CLICKED: <span id="value">?</span> berapa kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<script type="text/javascript">
var store = Redux.createStore(reducerFunction);
var valueElement = document.getElementById('value');
function render(){
valueElement.innerHTML = store.getState().object1;
}
render();
function reducerFunction(stateSaatIni, Action){
var stateAwal = {object1: 0};
var stateSelanjutnya = Object.assign({}, stateSaatIni);
if (stateSaatIni === undefined){
stateSelanjutnya = stateAwal;
return stateSelanjutnya;
}
}
document.getElementById('decrement').addEventListener('click', function(){
valueElement.innerHTML = parseInt(valueElement.innerHTML)- 1;
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
valueElement.innerHTML = parseInt(valueElement.innerHTML) + 1;
}, 1000
);
});
</script>
</body>
</html>
Tutorial Redux Dasar Redux Normal Javascript
Jaka Prima Maulana
pada tutorial kali ini kita akan membahas mengenai " Tutorial Redux Dasar Redux Normal Javascript ", sebelum masuk kedalam redux admin membuat contoh dasar normal javascript yang biasa dipakai
seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Redux Dasar Redux Normal Javascript</title>
</head>
<body>
<div>
<p>
DKLIK sebanyak: <span id="value">?</span> kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<script type="text/javascript">
var valueElement = document.getElementById('value');
function render(){
valueElement.innerHTML = 0;
}
render();
document.getElementById('decrement').addEventListener('click', function(){
valueElement.innerHTML = parseInt(valueElement.innerHTML)- 1;
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
valueElement.innerHTML = parseInt(valueElement.innerHTML) + 1;
}, 1000
);
});
</script>
</body>
</html>
dari javascript dasar berikut kita akan membuat redux agar dapat di prediksi, manage dan di maintenance lebih mudah statenya. lanjut ke tutorial selanjutnya
Selengkapnya..
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
pada tutorial kali ini kita akan membahas mengenai " Tutorial Redux Dasar Redux Normal Javascript ", sebelum masuk kedalam redux admin membuat contoh dasar normal javascript yang biasa dipakai
seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Redux Dasar Redux Normal Javascript</title>
</head>
<body>
<div>
<p>
DKLIK sebanyak: <span id="value">?</span> kali
<button id="decrement">decrement</button>
<button id="increment">increment</button>
</p>
</div>
<script type="text/javascript">
var valueElement = document.getElementById('value');
function render(){
valueElement.innerHTML = 0;
}
render();
document.getElementById('decrement').addEventListener('click', function(){
valueElement.innerHTML = parseInt(valueElement.innerHTML)- 1;
});
document.getElementById('increment').addEventListener('click', function(){
setTimeout(
function increment(){
valueElement.innerHTML = parseInt(valueElement.innerHTML) + 1;
}, 1000
);
});
</script>
</body>
</html>
dari javascript dasar berikut kita akan membuat redux agar dapat di prediksi, manage dan di maintenance lebih mudah statenya. lanjut ke tutorial selanjutnya
Minggu, 23 April 2017
Tutorial JSX, React, Babel dan Webpack
Jaka Prima Maulana
1. buka terminal ketik mkdir tutorialprimasajacom
2. masuk ke folder tutorialprimasajacom
3. ketikkan npm init
4. enter saja terus
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
dan ini
Selengkapnya..
Artikel Berepisode
Selamat datang pengunjung www.primasaja.com,
- Pengenalan
1. buka terminal ketik mkdir tutorialprimasajacom
2. masuk ke folder tutorialprimasajacom
3. ketikkan npm init
4. enter saja terus
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)
5.ketik yes
6. ketikkan ini
primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ npm install --save react react-dom
primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ npm install --save react react-dom
dan ini
$ sudo npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react css-loader style-loader html-webpack-plugin webpack webpack-dev-server
7. ketik vim package.json
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
maka akan ada dependencies baru
8. buat index.js dan index.css
pada index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./index.css');
// komponen punya state
// live cycle event
// UI of Component
class App extends React.Component {
render(){
return (
<div>
Hello World
</div>
)
}
}
ReactDOM.render(
<App />,
document.getELementById('app')
);
9. pada index.css
body {
background: green;
}
10. buat webpack.config.js masukkan
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //ada di dependencies package.json
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader'},
// style loader disini agar require css pada index.js dapat dikenali
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'app/index.html'
})]
}
11. buat index.html masukkan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
12. untuk run package buka package.json lalu
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"env",
"react"
]
},
"author": "",
"license": "ISC",
"devDependenciesk": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"devDependencies": {
"webpack-dev-server": "^2.4.3"
}
}
13. ketik npm run create
14. primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ sudo npm install --save-dev webpack-dev-server
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
maka akan ada dependencies baru
8. buat index.js dan index.css
pada index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./index.css');
// komponen punya state
// live cycle event
// UI of Component
class App extends React.Component {
render(){
return (
<div>
Hello World
</div>
)
}
}
ReactDOM.render(
<App />,
document.getELementById('app')
);
9. pada index.css
body {
background: green;
}
10. buat webpack.config.js masukkan
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //ada di dependencies package.json
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader'},
// style loader disini agar require css pada index.js dapat dikenali
{ test: /\.css$/, use: ['style-loader', 'css-loader']}
]
},
plugins: [new HtmlWebpackPlugin({
template: 'app/index.html'
})]
}
11. buat index.html masukkan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
12. untuk run package buka package.json lalu
{
"name": "tutorialprimasajacom",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"babel": {
"presets": [
"env",
"react"
]
},
"author": "",
"license": "ISC",
"devDependenciesk": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-env": "^1.4.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.16.1",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
},
"devDependencies": {
"webpack-dev-server": "^2.4.3"
}
}
13. ketik npm run create
14. primasaja@primasaja-X45U:~/Documents/tutorialprimasajacom$ sudo npm install --save-dev webpack-dev-server
15. buka package.json
"scripts": {
"start": "webpack-dev-server --open",
"create": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
16 ketik npm run start
Langganan:
Postingan
(
Atom
)
