Since i'm 'forced' to use REACT at work it's time to write down some notes.
At first REACT feels like a ClassHell made by Facebook's frontend developer super heroes causing headaches but now, after some learning and the discovery of REACT HOOKS it feels good.
First the normal JSX way:
<div className={"myblock" + (showActions ? 'is-shown' : 'is-hidden')}>But if you use transpilers like Babel, you can use the new ES6 "template strings".
This approach allows you to do neat things like that, rendering either is-shown or is-hidden:
<div className={`myblock is- ${showActions ? 'shown' : 'hidden'}`}>Be careful with the second approach, especially in large codebases, as it makes the class strings less greppable. For example, if someone searches for is-shown or is-hidden in the codebase, they won't find this code.
If you want to be a ES6 ninja try the new ES6 "array spread operator":
<div ...{...showActions
? { className: 'myblock is-shown' }
: { className: 'myblock is-hidden' }}>Outside the render part of your app create a handler function:
const onClicked = (value1, value2, e) => {
...
};and pass the stuff onSomething to it in the render block:
onClick={(e) => onClicked("foo", "bar", e)}const hashbang = document.location.hash === '#edit' ? true : false;const handleKeyDown = (e) => { //console.log(e.keyCode );
if (e.ctrlKey && e.altKey && e.keyCode === 69 ) {
// case sensitive // e.key === "e" ... want work
console.log(e.keyCode);
}
};REACT
-------------------------------------------------------------------------------
https://github.com/ruanyf/react-demos
Data Table
-------------------------------------------------------------------------------
https://react.rocks/tag/DataTable
Render huge lists:
-------------------------------------------------------------------------------
https://addyosmani.com/blog/react-window/
https://github.com/bvaughn/react-window-infinite-loader -> https://codesandbox.io/s/5wqo7z2np4
https://alligator.io/react/lists-with-react-window/ -> https://codesandbox.io/s/3m4jm8l4q
react-window & react-virtualized-auto-sizer -> https://codesandbox.io/s/3vnx878jk5
DataTable (PrimeReact) LazyLoad
-------------------------------------------------------------------------------
https://stackblitz.com/edit/react-o4egxk
https://www.primefaces.org/primereact/#/datatable/lazy
https://stackblitz.com/edit/react-5v4qyj
http://4youngpadawans.com/primereact-lazy-table-filtering/
https://codesandbox.io/s/wkonx779x8 (datatable demo)
Expandable Row
-------------------------------------------------------------------------------
https://beginningprogrammer.com/programming/how-create-a-table-with-expandable-rows-in-react/ -> https://stackblitz.com/edit/react-t4lrov
https://codepen.io/ayoungh/pen/xqRbeR
react-bs axios
-------------------------------------------------------------------------------
https://appdividend.com/2018/05/30/react-axios-tutorial-example-from-scratch/
npm install react-bootstrap-table-next bootstrap-4-react react-dom axios --save
https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/
PrimeReact
-------------------------------------------------------------------------------
https://github.com/kishore262/react-boot-primereact (React.js and Spring Data REST)
https://github.com/joeblurton/rtademo
Minimal React App with Webpack and Watch
-------------------------------------------------------------------------------
https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
React Library Concept
-------------------------------------------------------------------------------
https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b
React Dynamic Forms
-------------------------------------------------------------------------------
(hooks!) https://itnext.io/react-hooks-designing-a-simple-forms-api-part-5-dynamic-forms-b8ceea4a4ff
https://medium.com/@agoiabeladeyemi/the-complete-guide-to-forms-in-react-d2ba93f32825
https://codeburst.io/reactjs-a-quick-tutorial-to-build-dynamic-json-based-form-a4768b3151c0
https://medium.com/38th-street-studios/large-dynamically-generated-forms-in-react-part-2-b39b4ab4243c
https://github.com/jaredpalmer/formik
https://github.com/flipbyte/formik-json-schema
https://github.com/gigahunter/react-jsonschema-form-extensions <- nice one!
extension for: https://github.com/mozilla-services/react-jsonschema-form
https://medium.com/@amitgupta.gwl/fast-xml-parser-2634e614d104
React without build stack
-------------------------------------------------------------------------------
https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f
https://shinglyu.com/web/2018/02/08/minimal-react-js-without-a-build-step-updated.html
iFrame....
-----------------------
https://github.com/davidjbradshaw/iframe-resizer
React Portals
----------------------------------
https://codesandbox.io/s/2x4x1m6zj0
https://codesandbox.io/s/v54x54vp5
B¸tton
------------------------------------
https://stackoverflow.com/questions/41852930/reactjs-how-to-change-an-icon-of-a-button-on-the-click-event
Charts
------------------------------------
http://uber.github.io/react-vis
React-Bootstrap ... snippets
------------------------------------
https://github.com/chadly/react-bs-notifier
https://serverless-stack.com/chapters/adding-links-in-the-navbar.html
react-router-bootstrap -> https://github.com/react-bootstrap/react-router-bootstrap
http://www.bootstraptoggle.com/
https://reactjsexample.com/a-simple-dropdown-menu-for-react-with-bootstrap-icon-trigger/
https://fontawesome.bootstrapcheatsheets.com/#
!?!?!?!!!!!!!!!!!!!!!!!!!!!!!!!
https://blog.usejournal.com/integrate-react-with-other-applications-and-frameworks-94d443e3cc3f
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
iframe.....FTW FCK....
https://medium.com/@josh.j.pearson/handling-iframe-loading-in-react-57f044a9d0fa (loading spinner)
https://github.com/zeroasterisk/react-iframe-resizer-super
https://medium.com/@ebakhtarov/handling-of-iframes-in-react-f038be46ac24
REACT table (collapsable) example
-----------------------------------------------------
https://codesandbox.io/s/318w4qq3q1 (meins)
https://gist.github.com/markerikson/bd9f03e0808558c5951e02f1aa98c563
https://medium.com/@pauldarragh/react-collapsing-table-817173321c35
https://codepen.io/ayoungh/pen/xqRbeR
https://codepen.io/codeninja93/pen/xyyeOw
react table: https://www.npmjs.com/package/react-table
-> https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/archives/v6-examples/react-table-sub-components
REACT Router
-----------------------------------------------------
https://reacttraining.com/react-router/web/example/basic
https://codesandbox.io/s/vvoqvk78
MicroFrontend....FTW?!
-----------------------------------------------------
https://medium.com/@_rchaves_/building-microfrontends-part-i-creating-small-apps-710d709b48b7
Context API
-----------------------------------------------------
https://www.taniarascia.com/using-context-api-in-react/ (!!!!! good blog !!!!!)
Hooks
-----------------------------------------------------
https://usehooks.com/
https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 -> https://codesandbox.io/s/rm3v532lwm
https://codesandbox.io/s/7kxj9p9qm0
https://codesandbox.io/s/2zpzon2r3y
https://flaviocopes.com/react-hooks/
https://codeburst.io/react-hooks-in-5-minutes-1180f1aa0449
dialog with hooks: https://codesandbox.io/s/7kxj9p9qm0
https://reactjs.org/docs/hooks-intro.html
https://reactjs.org/docs/hooks-overview.html
https://www.mothership.de/blog/einfuehrung-react-hooks
https://medium.com/the-andela-way/how-to-get-started-with-react-hooks-controlled-forms-9b47e9fb8c8d
https://overreacted.io/a-complete-guide-to-useeffect/
https://matthamlin.me/blog/2019/february/why-you-should-useReducer/
https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-1-7531849d8381
https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-2-3ab42ba6ad5c
https://www.andreasreiterer.at/rest-api-react-hooks/
CRUD! https://www.taniarascia.com/crud-app-in-react-with-hooks/
https://dev.to/damcosset/refactor-a-form-with-react-hooks-and-usestate-1lfa
https://medium.com/@grigorylapshin/more-forms-with-react-hooks-2ea51fd60393
https://zacjones.io/handle-multiple-inputs-in-react-with-hooks
!!!! https://medium.freecodecamp.org/how-to-build-a-todo-list-with-react-hooks-ebaa4e3db3b
useState vs. reducer -> https://www.robinwieruch.de/react-usereducer-vs-usestate/#usestate-vs-usereducer
LessText...neat example: https://codesandbox.io/s/3xy0vll4y6
useState with Array... neat example: https://codesandbox.io/s/l21w38nkzz
getHight by refs -> https://codesandbox.io/s/m7vkw1rn6y
Suspense
----------------------------------------------------
"React.Suspense in simple words means we can suspend the rendering of our component or components until some condition is met( for example data from an endpoint or a resource is loaded) and until then show a fallback(for-example a spinner)"
https://hackernoon.com/magic-of-react-suspense-with-concurrent-react-and-react-lazy-api-e32dc5f30ed1
https://medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6
https://medium.freecodecamp.org/how-to-use-react-lazy-and-suspense-for-components-lazy-loading-8d420ecac58
https://itnext.io/react-suspense-with-the-fetch-api-3ac88280a0de
suspense demo: https://codesandbox.io/s/8nq4w3jj39
https://itnext.io/usefetch-react-custom-hook-for-fetch-api-with-suspense-and-concurrent-mode-in-mind-1d3ba9250e0
https://whoisryosuke.com/blog/2019/react-16-hooks-suspense-memo/
https://medium.com/crowdbotics/react-suspense-with-the-fetch-api-3a75c223409d
Bootstrap
----------------------------------------------------
https://getbootstrap.com/docs/4.3/getting-started/introduction/
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/
https://fontawesome.bootstrapcheatsheets.com
bs-table-next: https://codesandbox.io/s/r5wkvv3zro
https://react-bootstrap.github.io/
https://react-bootstrap.github.io/react-overlays/
Forms
----------------------------------------------------
https://jsonforms.io/
https://medium.com/@sairamkrish/rapid-development-of-data-collection-platform-with-reactjs-and-json-schema-ef147f4c665
Generate complex, validated and extendable JSON-based forms in React. -> http://winterfell.andrewhathaway.net/
https://codeburst.io/reactjs-a-quick-tutorial-to-build-dynamic-json-based-form-a4768b3151c0
!!!!
https://github.com/mozilla-services/react-jsonschema-form
https://react-jsonschema-form.readthedocs.io/en/latest/
https://mozilla-services.github.io/react-jsonschema-form/
layout extension: https://github.com/gigahunter/react-jsonschema-form-extensions
Confirm...
https://gist.github.com/primaryobjects/aacf6fa49823afb2f6ff065790a5b402
https://github.com/haradakunihiko/react-confirm
!!! https://www.npmjs.com/package/react-modal-hook -> https://codesandbox.io/s/v8qy4w1j77
Misc
-------------------------------------------------------------------------------
https://codeburst.io/reactjs-for-noobs-c374d79250e1
https://medium.freecodecamp.org/rock-solid-react-js-foundations-a-beginners-guide-c45c93f5a923
https://medium.com/@kellyharrop/react-for-dummies-c56a94063bfe
https://medium.freecodecamp.org/lets-build-a-react-chatroom-component-ed353982d826
-------------------------------------------------------------------------------
var url = window.location.href; //"http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
var captured = /token=([^&]+)/.exec(url)[1]; // Value is in [1] ('384' in our case)
var result = captured ? captured : 'myDefaultValue';
alert(result);
// shortest 1
var arr = document.URL.match(/token=([0-9a-zA-Z]+)/)
var result = (arr == null) ? "noToken" : arr[1];
alert(result);