Make a layout with material-ui - javascript

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.

Related

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.

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.

ng-content in root Angular 2 component

The page shows basic markup, comforting message and loading indicator.
<html>
...
<body app>
...page layout and loading stuff...
</body>
</html>
And root component is
#Component({
selector: 'body[app]',
template: `<ng-content></ng-content>`
})
App {}
A plunker that demonstrates the problem is here.
After SPA initialization it is supposed to bootstrap body element and compile components while saving existing basic layout.
However, root component just ignores ng-content.
This leads to two options. The initial layout should be dumped and shown only after bootstrapping. Or it should be duplicated in both root component template and HTML document (likely with server-side templating). None of them looks good enough.
body contains sensitive markup that cannot be just wrapped into child component to overcome this limitation. I intend to use Angular Universal to provide SPA with neat static preview, but not at this stage.
It looks like it is a known problem but I'm unable to find a workable solution.
How can it be fixed?
The link below has been given the status fixed by ivy. Ivy is a milestone for angular v7.0.
Transcludes are not supported on the root element, you can't pass anything to it because index.html isn't part of angular. If you can't embed the html within another component then I wouldn't expect it to work with ng-content either.
From https://github.com/angular/angular/issues/1858#issuecomment-207993202
Components only work as components when referenced in the template of
another component, yet they are expected to be used outside of this
which causes confusion
Using <ng-content> in root component planned to be implemented.
https://github.com/angular/angular/issues/4946

How react works with javascript ui components that modifies html

most javascript ui components, like jquery ui, bootstrap or kendo ui takes some html element and renders itself dynamically.
Someting like this:
$('#someselect').autocomplete();
I wonder if these frameworks can be effectively used with react.
Let's say, I would like to wrap such component into react component. When component state changes, e.g. SelectedValue, react rerenders the html. but since the html is just some container where the javascript ui components renders itself(e.g autocomplete), it's not very effective.
Can react be effectively used with most javascript ui components or they have to be built with react-like rendering in mind
This article "Working with the Browser" from the react documentation discusses this.
Using operating on the DOM directly using something like jQuery is not considered good practice for a few reasons:
React intentionally discourages using DOM attributes as selectors with the rationale that tracing props down through the component hierarchy is more scalable.
These plugins don't make use of React's event lifecycle. You would have functionality that was dependent on the DOM being fully mutated, and others that were regular react components.
Still, If necessary you can perform operations on the DOM with something like jQuery inside of componentDidMount.
Here's an example of using React with jQuery UI Sortable.

where to place dynamic nav component code using vue?

I am new in vue. I have a dynamic nav, which look like this:
<nav>home/news/setting</nav>
The content in nav may change dynamically on different url(I am using vue-router, too). Now, I have a file named Nav.vue. But I don't know where should I use this Nav.vue component.Should I use it in <App/> or should I write a decorator like makeNav(element) and composite it with all my pages?

Categories

Resources