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?
Related
react-tabulator is a library providing an integration of Tabulator in React. Their solution to render a React component within a Tabulator formater uses this function. However, I don't think this is 100% correct, because based on the React doc on integrating React w/ plain JS, ReactDOM.unmountComponentAtNode() needs to be called on dispose in order to to some cleanup. I also communicated this to the author within a GitHub issue, and maybe he'll provide additional info.
My question: is there a hook/handler/way to receive notifications when a cell is being disposed? 1) This will allow me to call the mentioned method, so that React can do some cleanup. 2) This opens also the path towards an alternative approach, leveraging React portals.
Thank you in advance!
I have created an implementation using portals in this gist. It's a Storybook pages. I'm using semantic-ui-react in my project, so a copy/paste of the file may need adapting.
I don't know if it's OK to have thousands of portals. I.e. one per cell. Also, I didn't see any action do "dispose" a portal. I hope that disposing the DOM element where the portal was rendered suffices. Otherwise => memory leaks possible I think.
I am working on a project that already uses React, but only for specific elements of the site. The owner just requested a field on a form not rendered by React to become visible only when a checkbox is checked. I know how to do this using native event listeners, and I'm not interested in rewriting the form to be a React component (I'd need identical output that matches the server-side rendering).
Since React is already present, is there a simple way to use it setup a binding between the checkbox value and the visibility of the other field? Basically traditional progressive enhancement but with React handling the state? My research so far suggests React cannot really work with nodes it didn't render.
I'm fairly new to react; just learning it. From what I understand react gives you ability to render data more dynamically. But couldn't this be achieved using flask rest api endpoints? Kind of making AJAX calls and rendering it's response dynamically?
What's the difference?
I'm currently trying to develop a full stack application. Trying to choose what I should use for frontend, typically on a normal day I tend to use pure HTML/CS/JS to accomplish most of my front-end task without having to use JS libraries such as react to render data dynamically, I want to improve my ways around handling front-end stuff hence wanted to learn more about react and how it can benefit me; before actually diving in it.
What can help is; if someone can lay it out for me; describing work scenario using reactjs and how I can be benefiting from using the js library.
Thanks.
In my opinion, React is all about how effectively you can render your dom elements.
Rendering DOM (Painting your webpage with your HTML elements) is considered to be one of the costliest operation. And if you consider using other libraries( apart from react), there is a chance that your HTML will be rendered even if it doesnt change.
Here comes the power of React. React uses the concept of Virtual DOM which helps in rendering HTML to browser only when there is a change. For example, if you have a list of items being displayed, and if one list item changed because of some action, React will trigger a change to render only that element(of course we write very minimal code for this).
So if you use React as your front end library, you can easily benefit fast rendering of HTML and stopping unnecessary rendering of your DOM
If Cycle uses virtual dom and so does React, then why can I not use React Components inside a Cycle.js app?
Would it be possible to use wrap existing React Components into Cycle.js components ?
This question relates to : Higher order FRP with React - why is it not happening?
Because React's support for Web Components is lacking. See https://github.com/facebook/react/issues/7901 and http://staltz.com/react-could-love-web-components.html
It is technically possible to build React support in Cycle.js, but then you may also start asking whether other frameworks like Ember or Angular or Aurelia should start doing the same out of the box. Then, the question could be expanded even further by asking Aurelia components to be supported in Ember. So building support for "Foo" components in "Bar" framework is counter-productive. Web Components are the sane way to handle this.
Cycle.js is generic enough to be used along other frameworks/libraries. In fact there's redux-cycle-middleware which allows you to use React/Redux along with Cycle.js. With this middleware you wouldn't be using Cycle to handle DOM side-effects; instead you'd use React. Then when you need to handle other side-effects (HTTP, WebSockets, anything that isn't DOM...) you can use Cycle.js.
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.