I keep getting this error with React:
_registerComponent(...): Target container is not a DOM element.
I'm using "create-react-app" with Yarn. There's three main files of code.
Here's the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<div id="hw"></div>
</body>
</html>
And index.js:
import './index.css'
import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'
render(<Hello/>, document.querySelector('#hw'))
And Hello.js
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return
<div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I've tried everything I can think of. All files are in the same "src" directory. This all started when I was trying to render two components within index.js using this:
render(
<div>
<Hello/>
<World/>
</div>,
document.querySelector('#hw'))
I found the issues, although I don't understand why one is happening. Apparantely, it's only working when I use root as the name of the div in index.html.
<body>
<div id="root"></div>
</body>
And index.js
import './index.css'
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'
import World from './World'
ReactDOM.render(<div><Hello/><World/></div>,
document.getElementById('root'))
In the Hello.js file, I placed the div outside of the line with return. Once I moved the div to start on that line.
import './helloworld.css'
import React, {Component} from 'react'
class Hello extends Component {
render() {
return <div className="HelloWorld-hello HelloWorld-flex">
<h1>Hello</h1>
</div>
}
}
export default Hello
I think I understand why I would need to put the <div> on the same line as the return, but I'm completely clueless about why only the word root works for the div id. I've tried all kinds of other words and get the same error.
Ultimately I was trying to have two separate child components (Hello.js and World.js) nested under a parent component (index.js).
Related
I am trying to render a React component in an html file without using all too much code or too many files. The end goal is to let others render my React component in their html files with as little work for them as possible, hence the necessity for few files.
If I set up a project containing two files (index.html and index.js), one for defining the react component and another for rendering it, I do not get an error, but my component does not show up.
My files look like this:
index.html
<html>
<head>
<title>hello world</title>
</head>
<body>
<div>hello world</div>
<p>trying to load a react component</p>
<div id="root"></div>
</body>
</html>
index.js
import React from "react";
import { createRoot } from "react-dom/client";
const Component = () => {
return <div>hello this is literally react. not a joke LOL</div>;
};
const root = createRoot(document.getElementById("root"));
root.render(<Component />);
When I then run the project in the browser, the react component does not load whereas all other components do laod.
What do I do?
I have just started learning ReactJS and made my first app by following a tutorial but nothing is rendered on the screen when I run the html file.
index.js
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
index.html
<html>
<body>
<div id="root">
</div>
</body>
<script type="text/babel" src="index.js"></script>
</html>
Here I think you need to write your code in the form of function which would be called from the HTML file.
So you need to update your index.js to:
import React from "react"
import ReactDOM from "react-dom"
window.printHello = function(id){
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(id)
);
}
And your html file should be updated to the below code:
<div id="hello"></div>
<script src="index.js"></script>
<script>
printHello('hello');
</script>
Here is another solution for your query.
There is no need to add the script tag in your HTML.
If the js and HTML are part of the same component you can just use the id directly in the HTML.
So your updated code for js and HTML would be be somewhat like this.
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
And the HTML code:
<html>
<body>
<div id="root">
</div>
</body>
</html>
I hope this would be helpful to you.
For me the issue was ReactDOM getting imported from different module. After updating the import statement from
import ReactDOM from "react";
to
import ReactDOM from 'react-dom/client';
in index.js file worked.
I am working on ReactJS project and want to render an iframe which is rendering using third party script.
Kindly check the problem below:
I have an component name add-data.js.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Helmet from 'react-helmet';
import ogImage from '../../../../public/images/qcf-logo-whitebg.svg';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import ApplyNowNavbar from '../Header/ApplyNowHeader';
import ApplyNowFooter from '../Footer/ApplyNowFooter';
export default class ApplyNow extends Component {
render() {
return (
<div>
<Navbar />
<div id="iframe-container"></div> //iframe will be loadd inside this div
<Footer />
</div>
);
}
}
index.html main file
<!doctype html>
<html>
<head>
<script src="www.example.com/iframe-script.js"></script> <!--this file will load iframe in iframe-container div-->
</head>
<body>
<div id="app"></div>
<script src="../js/app.js"></script>
</body>
</html>
this code works only when reload the page but I want to render iframe without reload the page but render ReactJS component.
Can anybody help me out how can I do that.
Thanks in advance.
I am new in ReactJS
I have created a child component called footer and also installed Bootstrap package but not receiving any style in footer.
Code App.js --
import React, { Component }from 'react';
import './App.css';
import Header from './components/header';
import Footer from './components/footer';
class App extends Component {
render() {
return (
<div>
<Header />
<Footer />
</div>
);
}
}
export default App;
Footer.js under components folder
import React from 'react';
const Footer = () => {
return (
<footer className="page-footer font-small blue">
<div className="footer-copyright text-center py-3">© 2019 Copyright:
Test.com
</div>
</footer>
);
};
export default Footer;
index.js --
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();
But there is no styling in footer.
Any help is highly appreciated.
Well, the problem is that you don't import bootstrap properly, do you have import errors in your console ?
import 'bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
try to import by one of i written above.
In your app.css import bootstrap.css like this
import 'bootstrap/dist/css/bootstrap.css';
Then restart your server
That simply means you did not correctly import bootstrap, i dont know how your code is structured so i would suggest you use the cdn version below and link it in your index.html file.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
this means you have to online everytime you use it.
Another option i would suggest is that you use reactstrap which would be easier for you as a beginner. install by using npm install --save reactstrap and then you can use it any component you want. you google the documentation for more details.
I am trying to import CSS for each page of my react app but the order of the css import is wrong.
In index.js I load all common css for the site (bootstrap and custom), then go page 'A' that react router handles which also loads its own CSS file. What results is the CSS from page A being loaded before the CSS imports I had in index.js
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './common.css';
ReactDOM.render(
<Routes />,
document.getElementById('root')
);
.
//home.js
import React, { Component } from 'react';
import './home.css';
class Home extends Component {
render() {
return ( ... )
}
}
results in:
<style home.css />
<style bootstrap.css />
<style common.css />
How would I be able to make the CSS from child components load after the parent?