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.
Related
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 creating a project where react is not rendering anything on django localhost
index.html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="App">
<!---all will be define in App.js-->
<h1>Index.html </h1>
</div>
</body>
{% load static%}
<script src="{% static "frontend/main.js" %}"></script>
</html>
app.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './layout/header';
class App extends Component {
render() {
return (
<h1>App.JS</h1>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
this is my project structure:
After running npm run dev and python manage.py runserver this is the status everything is fine till here:
Change this source code:
document.getElementById('app')
... to this:
document.getElementById('App')
Its because your element has id of "App" but you are trying to hook react app on element 'app'. It's case sensitive.
document.getElementById is case sensitive
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.
In index.html I have:
<div class="header-content-inner" id="example">
...
</div>
And then:
<script src="js/react-dom.js"></script>
<script src="js/react.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel" src="js/segui-info.jsx"></script>
This "segui-info" is the external js file with react code in it:
import React from 'react';
import ReactDOM from 'react-dom';
var ex = <h1>It worked!</h1>;
ReactDOM.render(ex, document.getElementById("example"));
As you can guess, the "ex" is not being appended / rendered to that div. I'm a beginner to react and I'm failing to understand why it's not working. In simple examples just like this one they use react code inside a <script> tag. I don't want to use all the react code inside a .html file. What am I doing wrong?
EDIT: This is what I get on the console:
Just remove import statements from code.
In your script first add 'react' and then add 'react-dom'. It will definitely work!
Below is the simple working example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#latest/babel.min.js"></script>
<script type="text/babel" src="ext.jsx"></script>
</head>
<body>
<div id="example"/>
</body>
</html>
In ext.jsx will have
var ex = <h1>It worked!</h1>;
ReactDOM.render(ex, document.getElementById('example'));
You can run the same code snippet on
jsfiddle
In react you use functions to return JSX, in your example var ex = <h1>It worked!</h1>; is probably typecasting to just a string, rather you need to make it a function that returns the code you want. Try this below:
import React from 'react';
import ReactDOM from 'react-dom';
const ex = () => (
<h1>It worked!</h1>;
);
ReactDOM.render(ex, document.getElementById("example"));
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).