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
Related
I have a NextJS app page that should be SSG. I'll fetch all the data that it needs during build time.
But a small part of the code (social media share link) needs information about the device of the user. Basically, I want to know whether I'm on desktop or mobile.
What is the recommended approach for that scenario?
Should I render one of the two possibilities on build time and add some client useEffect code to detect and change it if necessary?
Yes, I believe that regardless of what strategy you use to detect what device you are on (or screen size if you need to sync with css media queries), you should render a default option and then inside of a useEffect call you can update state to determine which option should end up in the DOM.
You just want to make sure that the default state is not based on data that can only be determined in the browser or else you will likely end up with a hydration error.
To check whether you are on desktop or mobile you can use some library like react-device-detect, react-responsive
Or if you are using material-UI then you can use useMediaQuery with theme.breakpoints.
Or you can use the traditional way navigator.userAgent.
I heard "grommet with reactjs" has good UI. So I want to try "grommet" on my environment. But I couldn't understand how to use "grommet". Because I expected this module can work on usual internet browser only. But sometime some websites explained "to use node.js" for grommet. Is this serverside module? Can't use "grommet" internet browser only?
https://v2.grommet.io/
I already read component's page but I wasn't able to understand.
https://v2.grommet.io/components
React is a framework for creating UI components.
Grommet is a set of components built with React. If you need a calendar in your application, you can use the calendar provided by Grommet instead of building your own.
Another example of a component library similar to Grommet is Blueprint.
You can use Grommet wherever you use React. React is meant to be displayed in a browser. React can also be rendered server-side (into static HTML) and then made 'dynamic' again on the client (browser side).
React is javascript, and if you want to see React in a browser, the browser needs to fetch the javascript and HTML from the website from a server/website. You can, but do not have to, use Node.js to serve your React/Grommet website.
If I were to render all of my content for React on the server, would I still need to import React in the browser? I don't plan on using React-Router, and I know React is a bigger file, so it would be nice if I didn't have to load it each time.
You can skip loading React in browser only when you don't need what react gives - extended interaction. Your HTML will work as always. If you have links (a tag) they will work, if you have html form (form tag) with standard submit buttons - it will work as well.
What will not work is all stuff written in react components, like you click on button/div/image... and some state changes.
All things which is not in basic HTML & basic HTML events, won't work.
No matter how you render html on server side if it's react, pure js, php, asp, .net, python or even C. Browser gets HTML and displays it, binds default events, applies default browser styling, then override stuff with your css/js code.
You do need it if you are planning to allow the user to interact with the components or your app, if you are just rendering text without any button or any other interaction, then I guess it would not be required.
The question here is not about is this a good idea or not, because there is a real use-case : I'm scraping a specific website from a headless browser for an internal service and I need to extract data from react.
From an active production application, I would like to retrieve props from the root component using only "pure" JavaScript. The only thing I got is a div right now.
The constraints are:
It must be done using pure JavaScript (or using standard React lib)
I cannot add/setup react-devtools extensions or things like that
So far I could always hack into an event handler that I would trigger to manage to enter into React context but I'm looking for cleaner alternatives, any ideas?
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.