Functional React POC

Developer
Leonardo
Size
4,908 Kb
Views
12,144
  1. Functional React POC Previews
  2. Functional React POC HTML Codes
  3. Functional React POC JS Codes

How do I make an functional react poc?

What is a functional react poc? How do you make a functional react poc? This script and codes were developed by Leonardo on 01 October 2022, Saturday.

Functional React POC Previews
IQ Test

Functional React POC - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Functional React POC</title>
</head>
<body> <div id="app"></div> <script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.1.0/redux-thunk.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Functional React POC - Script Codes JS Codes

'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
// POC React - Redux - Rambda
// https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b#.fimh2ejbl
// https://github.com/acdlite/recompose/
// http://guide.elm-lang.org/architecture/
// https://jsonplaceholder.typicode.com/
// http://ramdajs.com/0.22.1/docs/
// https://redux.js.org/docs/advanced/AsyncActions.html
var initialState = { items: [], isFetching: false, filter: { q: '' }
};
function reducer(state, action) { var currentState = state || initialState; if (action.type == 'UPDATE_QUERY') { return Object.assign({}, currentState, action.data); } if (action.type == 'REQUEST_ITEMS') { return Object.assign({}, currentState, { isFetching: true }); } if (action.type == 'RECEIVE_ITEMS') { return Object.assign({}, currentState, { isFetching: false, items: action.data }); } return currentState;
}
// middleware
function loggerMiddleware(_ref) { var getState = _ref.getState; return function (next) { return function (action) { console.log('dispatching', action); var val = next(action); console.log('state', getState()); return val; }; };
}
function thunkMiddleware(store) { return function (next) { return function (action) { typeof action === "function" ? action(store.dispatch, store.getState) : next(action); }; };
}
// Setup store
var store = Redux.createStore(reducer, initialState, Redux.applyMiddleware(thunkMiddleware, loggerMiddleware));
// helpers
var trace = function trace(x) { console.log(x); return x;
};
var combine = function combine(f, o) { return function (state) { return React.createElement( 'div', null, f(state), ' ', o(state) ); };
};
var combine_ = function combine_() { for (var _len = arguments.length, components = Array(_len), _key = 0; _key < _len; _key++) { components[_key] = arguments[_key]; } return function (state) { return React.createElement( 'div', null, components.reduce(function (prev, actual) { return actual(state); }, []) ); };
};
var combineComponents = function combineComponents() { for (var _len2 = arguments.length, props = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { props[_key2] = arguments[_key2]; } var first = props[0]; var rest = props.slice(1); return R.reduce(function (acc, c) { return combine(acc, c); }, first, rest);
};
// actions
var updateQuery = function updateQuery(q) { return { type: 'UPDATE_QUERY', data: q };
};
var requestItems = function requestItems() { return function (dispatch, getState) { dispatch({ type: 'REQUEST_ITEMS' }); $.ajax({ url: 'https://jsonplaceholder.typicode.com/todos', method: 'GET', data: { q: getState().filter.q } }).then(function (data) { dispatch({ type: 'RECEIVE_ITEMS', data: data }); }); };
};
// Components
var ItemList = function ItemList(children) { return React.createElement( 'tbody', null, children );
};
var ItemListRow = function ItemListRow(item) { return React.createElement( 'tr', null, React.createElement( 'td', null, item.id ), React.createElement( 'td', null, item.title ), React.createElement( 'td', null, '' + item.completed ) );
};
var ItemListHeader = function ItemListHeader() { return React.createElement( 'thead', null, React.createElement( 'tr', null, React.createElement( 'th', null, 'ID' ), React.createElement( 'th', null, 'TITLE' ), React.createElement( 'th', null, 'COMPLETED' ) ) );
};
var ItemFilter = function ItemFilter(_ref2) { var filter = _ref2.filter; var onUpdateQuery = _ref2.onUpdateQuery; var onMakeQuery = _ref2.onMakeQuery; return React.createElement( 'div', null, React.createElement('input', { type: 'text', onChange: function onChange(ev) { return onUpdateQuery({ filter: { q: ev.target.value } }); }, value: filter.q }), React.createElement( 'button', { onClick: function onClick() { return onMakeQuery(); } }, 'Search' ) );
};
var ItemListContainer = function ItemListContainer(children) { return React.createElement( 'table', null, children );
};
var Header = function Header(isFetching) { return React.createElement( 'h1', null, 'POC React - Redux - Rambda ', isFetching ? 'Loading...' : '' );
};
// Connectors - https://github.com/acdlite/recompose/
var ItemListConnect = R.compose(ItemList, R.map(ItemListRow), R.prop('items'));
var ItemFilterConnect = R.compose(ItemFilter, function (props) { return { filter: props.filter, onUpdateQuery: function onUpdateQuery(x) { return props.dispatch(updateQuery(x)); }, onMakeQuery: function onMakeQuery() { return props.dispatch(requestItems()); } };
});
var HeaderConnect = R.compose(Header, R.prop('isFetching'));
var ItemListCtrl = R.compose(ItemListContainer, combineComponents(ItemListHeader, ItemListConnect));
var App = combineComponents(HeaderConnect, ItemFilterConnect, ItemListCtrl);
var getRender = function getRender(node) { return function (app) { return ReactDOM.render(app, node); };
};
var getDomElement = function getDomElement(selector) { return document.getElementById(selector);
};
var render = getRender(getDomElement('app'));
store.subscribe(function () { render(React.createElement(App, _extends({}, store.getState(), { dispatch: store.dispatch })));
});
// start
store.dispatch(requestItems());
Functional React POC - Script Codes
Functional React POC - Script Codes
Home Page Home
Developer Leonardo
Username llewan
Uploaded October 01, 2022
Rating 3
Size 4,908 Kb
Views 12,144
Do you need developer help for Functional React POC?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Leonardo (llewan) Script Codes
Name
OGone template
OGone template2
A Pen by Leonardo
ExtendedJS
Satisfaction Survey
OGone Dynamic Template
Type mapper
Curry
IsValidImage
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!