Trying to render a hello world but nothing is displayed on the page. There are no messages displayed in the console. What am I missing here? Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<scriptt src="https://unpkg.com/#babel/standalone/babel.min.js."></script>
</head>
<body>
<div id="app"></div>
<!-- Signal to babel that we would like it to handle the execution of the JS inside this script tag -->
<script type="text/babel">
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
var mount = document.querySelector('#app');
ReactDom.render(<App />, mount);
</script>
</body>
</html>
Your issue is that it is ReactDOM not ReactDom
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
Related
Very new to React + Django
The frontend/src/components/App.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>React App</h1>
}
}
ReactDOM.render(<App />, document.getElementById('app'));
The frontend/src/index.js:
import App from './components/App';
Then I have the frontend/templates/frontend/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
<title>Lead Manager</title>
</head>
<body>
<div id="app"></div>
{% load static %}
<script src="{% static "frontend/main.js" %}"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
</body>
</html>
When I run the server and go to localhost:8000:
The <div id="app"></div> remains empty. No errors raised.
I am not sure what the issue might be. I double checked the file against the tutorial I am following.
I am at requirement that I have build some ReactJs components but need to use them inside Custom HTML tags( just like normal tags )
I am trying to create a "Board" component which just displays a text "In board...". Now I am trying to use this in my HTML page as .
My board.js file:
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
My HTML page:
<html>
<head>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="board.js" type="text/babel"></script>
</head>
<body>
<Board />
</body>
</html>
tag must be treated like an HTML tag and should load React component and display the text "In board....".
In your case, you have to create using customElements API. You can use customElements.define Method to create your own but name should be hyphen separated.
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
this.innerHTML = '';
}
}
);
Below is the Working Example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board </title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script>
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
this.innerHTML = '';
}
});
</script>
<script type="text/babel">
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
ReactDOM.render(
<Board />,
document.getElementsByTagName('message-board')[0]
);
</script>
<script>
</script>
</head>
<body>
<message-board />
</body>
</html>
Creating a custom element and rendering React component to this custom element can be done as below. Assuming "Board" is an React component.
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
ReactDOM.render(<Board />, this);
}
});
A working solution to convert a simple React component to HTML Custom element
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Board </title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/#webcomponents/webcomponentsjs#2.0.3/custom-elements-es5-adapter.js"></script >
<script type="text/babel">
class Board extends React.Component {
render() {
return (
<div>
<div className="status"> In board.... </div>
</div>
);
}
}
window.customElements.define('message-board',
class extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
ReactDOM.render(<Board />, this);
}
});
</script>
</head>
<body>
<div>
<message-board />
</div>
<div>
<message-board />
</div>
</body>
</html>
Please,can somebody help to solve my problem with react.I am trying to render Hello World in div named header,but is shows nothing. I use localhost with server.js
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="main.js"></script>
</body>
</html>
Link on image:
http://prntscr.com/j2r5wr
errors:
http://prntscr.com/j2rd5s
Mistake in dom render at first:
ReactDOM.render(
<Helloworld />,
document.getElementById('header')
);
3 ways of creating component. Dont need to use React.createClass(as in picture)
simple functional component that directly returns some jsx
const HelloWord = () => (
Hello word!!
)
normal funtional component
const HelloWord = () => {
return (
Hello word!!
)
}
Class component
class HelloWord extends React.Component {
render() {
return (
Hello word!!
)
}
}
and then use it like
render(<HelloWord />, document.querySelector('#root'));
I am trying to use some pre-builtin react component from a library called ant design. Also, I would like to call the react and the component library through a cdnjs(don't wish to use webpack or else). How could I accomplish it? My approaches are like below and it's not working for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
import Button from 'antd/lib/button';
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
You don't need to import, because when you use prebuilt version, it's already injected into a global variable call 'antd' (just like React)
I also updated a little bit your scripts because for React you need . the umd version and antd needs the with locale version.
However, using prebuilt version is strongly NOT RECOMMENDED be careful.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { Button } = antd;
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
I have a simple React App that I'm trying to load through using a CDN vs NPM.
My options.html file:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<script src="https://fb...me/react-0.14.3.js"></script>
<script src="https://fb...me/react-dom-0.14.2.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>Hello world</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
When I load up options.html in a browser, nothing is showing up when I expected to see Hello world. I checked the debugger and no errors are coming up.
What am I doing wrong?
I believe :
There is no need of type="text/babel"
<script src="index.js" type="text/babel"></script>
so it should be
<script src="index.js" ></script>