مدیاویکی:Experimental-react-demo.js

mw.loader.using('ext.gadget.experimental-reactjs').then(function () {
	// Adopted from https://reactjs.org/docs/hooks-reference.html
	var useState = React.useState, useEffect = React.useEffect,
		createElement = React.createElement, useReducer = React.useReducer;
	
	var initialState = { count: 1 };
	
	function reducer(state, action) {
		switch (action.type) {
		case 'reset':
			return initialState;
		case 'increment':
			return {count: state.count + 1};
		case 'decrement':
			return {count: state.count - 1};
		default:
			// A reducer must always return a valid state.
			// Alternatively you can throw an error if an invalid action is dispatched.
			return state;
		}
	}
	
	function Counter() {
	    var stateDispatchPair = useReducer(reducer, initialState);

	    return createElement('div', {},
			createElement('br'),
			'Count: ' + stateDispatchPair[0].count,
			createElement('button', { onClick: function () { stateDispatchPair[1]({ type: 'reset' }); } }, 'Reset'),
			createElement('button', { onClick: function () { stateDispatchPair[1]({ type: 'increment' }); } }, '+'),
			createElement('button', { onClick: function () { stateDispatchPair[1]({ type: 'decrement' }); } }, '-')
		);
	}
	
	ReactDOM.render(createElement(Counter, initialState), document.getElementById('mw-content-text'));
});