I need to append my react app component directly to body as first child.
My solution is something like this (but its seem to me like overkill):
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const $container = document.createElement('div');
document.body.insertBefore($container, document.body.firstChild)
ReactDOM.render(<App />, $container);
What its the react way to do this action?
Thank You!
If your goal is to insert your <App /> component as the first element in the document body, you could remove the two lines that set up the $container variable and append it, and in your last line, use document.body as your second argument, like so:
ReactDOM.render(<App />, document.body);
Based on your code snippet, it looks like you also need a wrapper div, in which case you could implement that within ./components/App.js
Edit: I should also mention that appending directly to the body is discouraged by the creators of react-dom. You will get a console warning if you do this.
In my opinion, your body can have the first child for reactjs to append.
<body>
<div id="root"></div>
<div>.....</div>
</body>
and you can write the index.js as usual.
ReactDOM.render(<App />, document.getElementById('root'));
Related
So I'm in a situation where I have to use <style> tag, That is because I have multiple pages (I'm using react router DOM) so I cant apply the same style to every page as that would mess things up. Is there a way I can use <style> tag in JSX?
I have to use style tag like this:
function RandomScreen(){
return (
<div>
<style></style>
</div>
)
}
You can simply import a stylesheet into your page:
import './main.css'
Another solution is to use Emotion and the Global component:
https://emotion.sh/docs/globals
Can you use separate css file for every component and import every css file in every component you need.
import './RandomScreen.css';
Is there any way to customize Material-UI elements with CSS sheets?
I mean, I know about the {makeStyles} method and overriding with JSS, but it looks awful in the code, and moduling it on other arcives gets confusing, I was wondering if there is any workaround to put it all together in a css archive of sorts.
You can have your makeStyles code on a separate JS file. You would typically store the object it returns in a hook called useStyles (this is what you export), and at that point you can use the hook in the relevant components.
However, If you must use raw CSS to customize your MUI components and have those custom CSS prioritized, you can opt to reorder where the MUI stylesheet is injected
The StylesProvider component has an injectFirst prop to inject the
style tags first in the head (less priority)
import { StylesProvider } from '#material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree. */}
</StylesProvider>
LOL I just needed some more specific Google-fu
This is how I solved it:
import React from 'react';
import ReactDOM from 'react-dom';
import { StylesProvider } from "#material-ui/styles";
import App from './App';
import './GlobalCSS.css'
ReactDOM.render(
<React.StrictMode>
<StylesProvider injectFirst>
<App />
</StylesProvider>
</React.StrictMode>,
document.getElementById('root')
);
The point is adding the tag inside your tag in index.js, and pointing your css in that same file, now you can use the predefined class names or override your class name.
I'm not really sure what is happening when the component tries to find the div, but here is my render and my div.
HTML:
<div id="app"></div>
Render function:
Meteor.startup(() => { ReactDOM.render(<App />, document.getElementById('app')); });
I get this error in the console: Error: Target container is not a DOM element.
I also put a console.log after my render function trying to find the div id but returned = null.
What packages have you got installed?
if you've still got blaze-html-templates or templating, remove them both and replace with static-html
Otherwise Meteor will render the html as a blaze template some time after startup. (Also if you're using React, you probably don't want to ship Blaze to the client as well!)
See http://archive.is/g20il#selection-399.104-399.186
Hard to see without your full html but your script tag to the .js script should be after the div id "app" tag.
I'm very new to React.js but exploring it I expected something that I'm not able to do.
Say that I have a component:
var SampleComponent = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
Is this the only way to add it to the DOM?
React.render(
<SampleComponent />,
document.getElementById('content')
);
I hoped I would be able to do something like this directly in HTML after having defined the component:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<SampleComponent />
</body>
</html>
Am I missing something? Thanks
No, using React.render() is the "only way" to do it.
You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).
There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.
In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.
I'm very new to React.js but exploring it I expected something that I'm not able to do.
Say that I have a component:
var SampleComponent = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
Is this the only way to add it to the DOM?
React.render(
<SampleComponent />,
document.getElementById('content')
);
I hoped I would be able to do something like this directly in HTML after having defined the component:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<SampleComponent />
</body>
</html>
Am I missing something? Thanks
No, using React.render() is the "only way" to do it.
You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).
There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.
In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.