Develop Reference

How to append or inject React Class Component in a Modal outside React Tree

We have a project build in PHP MVC Framework and we use jQuery as a global JS framework in handling UI activity etc, however, we are now using react js. Therefore, my question is how can I inject or append React Functional/Class-based Component to a current jquery built-in modal() component? I try to run the following code but the modal content shows [object Object]...
onClick handler:
this.testHandler = () => {
const x = `<div>${<Component />}</div>`
$('#test-123').modal()
$('#test-123 #modal-body').append(x)
}
This Component Returns a Table with a list of data coming from api endpoint, the table is working and displaying properly when i render it. But my main goal is to use it outside and inject it as a modal content.
Thanks in advance!

The way to render a react component outside of react is to call ReactDOM.render, passing in the react element you want to render and the dom element you want to put it in. For sites that are fully done in react, you would typically call this exactly once. But if necessary, you can do it on the fly or multiple times, targetting specific pieces of your dom.
const element = $('#test-123 #modal-body').get(0);
ReactDom.render(<div><Component /></div>, element);
Be aware that React assumes it is the only piece of code modifying the part of the dom tree that you tell it to operate in. So you should avoid making any further changes to the #modal-body element using jquery.

Make a layout with material-ui

I don't know how to make a layout with a child page like this with material-ui. How do I build this?

If you know how to setup angularjs, you also can setup material-ui.
Same angularjs. [ index file - setup data-ng-app="myapp" in html tag
for router use ui-router
setup app.js
use
for ui aesthetic
make individual view same all like angularjs
And whatever styling you want use material ui, as the document says.

For styling you can use material-ui grid, then you can use React Router Link or something else and wrap the elements inside the Link (and set the Route in App.js if you use React Router). If you want your page as a child component, just import it as a component to the parent component and return it in the DOM.

How to make from react component local working library (that render component to dom element, like jquery)?

I have made SPA create-react-app. In the core there is a pharsal player with translations:
It has many dependencies like wavesurfe.js, material-ui, lodash, etc.
Under the hood there is a simple table with content:
Now I want to make a single js file for just a player. For add it directly to html file with and it'll render player from DOM element
<div id="frazy-player">Content of material </div>
But whole app has router, drawers with heading (playlist), homepage etc. - that I don't need in local version.
How to bield react component with many dependencies to single js file, which will be rendered into given DOM element locally, in simple HTML file?
Working demo with player is here.

React Native render HTML to string for alert function

As the title said, i don't want to render in component, just to strings.
i want to pass it on Alert function
I know there are a lot of library for rendering html, but all of them render to component.

Sketch component for React

Is there any sketchJS components for React?
I'm trying to find a sketch/canvas area component where the user can draw something and submit the result into a base64 field as in png/jpeg mime type. SketchJS does it but I was wondering whether there is any pure react component that does the trick?
I'm new with Javascript/React and I see that sketch uses JQuery, is there any other alternative, because I do not want to add JQuery inside my project?