Misaliperver: Browser Rendering React & Redux

Merhaba,

React sonuçta bir javascript ve Browser rendering ile çalışabilmeli. Gıcık olurum öyle herşeye cli yüklemeye. Canım sıkıldı birşeyler yapalım dedim ve bu yazıyı yazmaya karar verdim.

  <script src="https://unpkg.com/htm@2.2.1"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js" ></script>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" ></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" ></script>

Bu yukarıdaki abileri bir html dosyasına yükleyeyim ve sırasıyla app.js ve redux.js dosyalarımızı html'e ekleyelim. Html'imiz ve dosya dizinimizin görünümü aşağıdaki gibi olması gerekiyor.

Şimdi app.js ve redux.js içini dolduralım.

const counter = (state = 0, action) => {

switch (action.type){

case "Increament":

return state + 1;

case "Decreament":

return state -1;

default:

return state;

}

}

// getState(), dispatch(), subscribe()

const {

createStore

} = Redux;

const {Counter} = App;

const store = createStore(counter);

const html = htm.bind(React.createElement);

const render = () =>{

ReactDOM.render(html`<${Counter} value=${store.getState()} />`,

document.getElementById('root'));

}

render();

store.subscribe(render);

document.addEventListener('click', (e)=>{

store.dispatch({

type : "Increament"

});

});

(function (global, factory) {

typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :

typeof define === 'function' && define.amd ? define(['exports'], factory) :

(global = global || self, factory(global.App = {}));

}(this, function (exports) {

'use strict';

function Counter({value}){

return html`<h1>${value}</h1>`

}

exports.Counter = Counter;

Object.defineProperty(exports, '__esModule', { value: true });

})

);