Based on data streams, code is asynchronous, non-blocking and event-driven.
Cold streams are lazy and pull-based, hot streams are eager and push-based.
Functions should be side-effect free as far as possible, because multi-threading.
It's easy to overcomplicate, and this will make debugging impossible
Reactive systems are architectural principles: Responsive, resilient, elastic, and message-driven. Reactive programming enables this, but it doesn't guarantee it.
https://medium.com/@kevalpatel2106/what-is-reactive-programming-da37c1611382
Reactive programming aims for responsive UIs by shifting work out of the main thread. It's built around observables (async data objects), observers (consumers of observable data) and schedulers (which schedule works to various threads). The (RxJava) Observer interfce specifies onNext, OnError and OnCompleted callbacks.
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
https://www.baeldung.com/spring-webflux
Spring WebFlux builds reactive REST clients and servers based on Project Reactor and Flux(stream, similar to Observable)/Mono(singleton) objects. WebClient is the Spring reactive client. It starts with a connection and then lets you build reactive pipelines using a fluent interface.
It's not using websockets out of the box, but can be integrated.
https://spring.io/guides/gs/reactive-rest-service/
You can also configure routing for your server-side handling using a configuration bean of type RouterFunction<T> rather than explicit controller classes.
https://docs.spring.io/spring-framework/docs/5.0.0.M1/spring-framework-reference/html/web-reactive.html
https://reactjs.org/docs/hello-world.html
React is based on building modules, which combine business logic and presentation in reuseable blocks. JSX is a javascript extension which allows mixing of JS and HTML code in one format. It constructs a "React DOM", which manages state and is more lightweight than the actual DOM - this does intelligent diffing to update only the parts of the DOM which actual change, which is more efficient.
A React component is a function (or class containing a function) which takes a "props" object and returns a React element (i.e. some HTML). Components can be referenced in JSX as tags (starting with a capital letter), with tags injected into the props.
Components can store state - make them as classes, store any state in fields, and manage them using lifecycle callbacks (un/mount is adding and removing from the DOM). It can also set up its own scheduled callbacks internally. Calling the setter methods triggers (asychronously) the UI to rerender, so updates are reflected on the screen. Components can pass state data into the props of child components, and the child cannot distinguish this from other props it receives.
Methods can be registered as event listeners. There's some voodoo magic about binding "this" which should live in the constructor, because the function doesn't actually have a "this" reference otherwise.
For conditional rendering, either use a factory method with an "if", or make a class which stores the elements as fields, then return the appropriate one, or just us a JSX expression. You can also && the element with a conditional - if the condition is true, the object renders, otherwise it doesn't. A component can declare that it should not be rendered by returning null from its render method.
React can handle lists, but it needs list items to have an id field so it can track the identity of each entry to identify changes. The key goes on the component, not the element.