is it possible to observe an external Javascript object or module and have it bound to a Web components property. If the external Javascript object changes my Web component property should change.
I'll try get a code example up of my problem.
Related
I am trying to build a custom mobile Front End for a forum that doesn't have a public API and I thought about having a shared invisible WebView that's accesible by a reference through all React Navigation Views. I would then inject JS into this view and scrape data off it.
Is there any way I can accomplish this task? I'm using Expo and Typescript by the way.
How does diffing props work for react natives virtual dom(whatever it is called, i.e. yoga)? What is the related source code for it?
It might be similar to updateDomProperties(https://holmeshe.me/understanding-react-js-source-code-virtual-dom-diff-VIII/)
Especially, i try to understand react native WebView (https://github.com/react-native-community/react-native-webview) source property. Changing some fictive prop of source forces refreshing of webview for the same uri.
source={{uri:"http://...", forceReload:this.state.forceReload}}
How is this possible especially for Android?
I want to learn this to make sure that this behaviour does not change and break refreshing feature of my webview.
Actually changing some fictive property on source causes virtual dom determine the change and call the setter of the source(setSource()) on the native webview.
But, native webview's setSource() checks uri and does not reload the url.
So, here is my way to refresh web view to initial url;
https://gist.github.com/expressiveco/d0063875ab15631199acc27abf633177
I'm using a hybrid AngularJS/Angular application and my use case is I want to click a button, which is in my AngularJS code, that will trigger a mat-dialog component that I've written (which also works with other Angular components). My question is how can i get this mat-dialog component to trigger from AngularJS.
I've tried playing around using $mdDialog.show({}) with various properties such as trying to point it to the template of the mat-dialog component and trying to pass in my scope variables that the Angular component needs access to but with no such luck
I figured out that I can solve this problem by adding another #Input() to another Angular component that is already using my mat-dialog component. Then make sure that this angular component is implementing onChanges to watch for changes to the input variable. When changes are detected then I can trigger a method to kick off the mat-dialog.
I have a web app developed in reactjs using typescript in which one of its component is user profile. Now the state for this user profile page gets assigned by an api call on the client side. This state is also used to assign some of the contents of the meta tags. I have used helmet for this purpose. But it does not work if the meta tags are going to be dynamically rendered. I have a dynamic url(www.MySPA.com/{username}) and whenever I share this url the meta tags shall get rendered. Can anybody suggest me some typescript definition libraries which i can use in my react web app to achieve this?
Note: I have already tried prerender, react-meta-tags, prerender.io, snapshot, etc but no typescript definitions are available for this libraries
I recently started looking into SSR(Server side rendering) and I am impressed with its advantages. To name a few Load times, SEO, No javascript configuration.
However I am trying to understand if react server side rendering is worth it.
React is known for its Virtual DOM manipulations but using react with server side rendering will not give benefits of reactJs.
Can some one shed your ideas on using reactJS for server side rendering?
Using server-side rendering in React does not imply that React will not be used on client-side.
One of completely valid approaches is to start with client-side rendering only. In this case you have to setup a single HTML element in your HTML file that will become a hook for React once it loads.
Just to give you an example, let's say we have an <div id="root"></div> element in index.html file that will be served if we HTTP GET / path on our server. Initial document (in our case index.html) should also reference javascript file that includes React and our code. It can be done by adding something like <script type="text/javascript" src="/index.js"></script> just before </body> tag.
At some point while index.js is executed, ReactDOM.render() method is called (note: we are in the browser right now) - this is a moment in time when React looks for a div element with root id attached in a document. After it's found, it becomes react-root - component tree is mounted under this element and managed by React (ie. virtual DOM, event handlers, state updates).
Please note that this approach requires that at least one javascript file is fetched, parsed and executed before browser can render anything meaningful (other than an empty div) to a user. For some scenarios, this is not acceptable and this is where SSR (server-side rendering) can help.
Server-side rendering requires that you have JavaScript runtime environment available on your server. One of the popular choices is Node.js (others include for example Nashron for JVM).
In approach, you execute React on the server and use ReactDOMServer.renderToString() (or ReactDOMServer.renderToNodeStream()) method to generate HTML response that is sent to the client - instead of an almost empty response with just one placeholder div as previously, now you can send all the markup that will be generated from your component tree (important note here is that in React 16.4(+) only UNSAFE_componentWillMount lifecycle method is called on server-side). After the initial response with a document is sent to the client, browser can render the initial markup before index.js even finishes downloading. Once it does, ReactDOM.hydrate() method kicks in. Hydration is a process of using existing server-side rendered markup and "watering" it with javascript goodies like event handlers. After it's done, this component tree is now completely managed by React with all the benefits.
Please note that in SSR, exactly the same component tree is rendered on a server-side and that's then hydrated on a client-side.
Of course, React can also be used instead of templating engines as a very powerful static HTML markup generator. All you need to do is to render the markup on the server with ReactDOMServer. renderToStaticMarkup() and send it to the client. It should be noted that this approach has a significant performance impact (https://malloc.fi/performance-cost-of-server-side-rendered-react-node-js) and uses a very limited number of React features.