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>
I'm new in ReactJs n my first code test. The tuto says that this will work:
HTML(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react test</title>
</head>
<body>
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React code -->
<script src="pba.js"></script>
</body>
</html>
JS(pba.js):
const element = {<h1>Hello, world!</h1>};
ReactDOM.render(
element,
document.getElementById('root')
);
Problem:
pba.js:3 Uncaught SyntaxError: Unexpected token '<'
You should use a build tool like
create react-app, gatsby or next.js
What you are doing here is loading a javascript file directly into an html document.
However the Javascript file has no idea, what React is. If you don't want to use an independent build tool like suggested above, you can use webpack to bundle your code.
Here is a tutorial on how to do this: https://www.valentinog.com/blog/babel/
otherwise look into create react app:
https://www.google.com/search?q=create+react+app&oq=create+react+app&aqs=chrome..69i57j0l7.3442j1j7&sourceid=chrome&ie=UTF-8
Your element component needs to be a function or a class component. Note that doing the following will also work, but using one component as a root component for your app is better than just rendering one element.
const greeting = 'Hello World';
const element = <h1>{greeting}</h1>;
// or const Element = [<h1>{greeting}</h1>, <h1>Hello again</h1>];
ReactDOM.render(element, document.getElementById('root'));
Using function/class component
// pba.js
const Element = () => (<h1>Hello World</h1>)
ReactDOM.render(<Element />, document.getElementById('root'));
and also you need to add babel cdn to transpile your react code, add type text/babel to your script tag. <script type="text/babel" src="pba.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react test</title>
</head>
<body>
<div id="root"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<!-- Load our React code -->
<script type="text/babel" src="pba.js"></script>
</body>
</html>
Just change your pba.js file as follows:
const element = React.createElement("h1", {}, "Hello, world!");
ReactDOM.render(element, document.getElementById("root"));
While this is possible, there are a couple of things wrong with your code.
It looks like goto1 is correct, you can just use the () syntax for this, but you need to use () instead of {}
While goto1 is correct, the first argument in ReactDOM.render(...) does not have to be a function or class (just valid JSX), I am 110% recommending you stick to using functions or classes...
You need to use something like Babel Standalone so your React code can be translated into something a browser will understand
I have made a lot of comments with examples in the demo below, which should help you out.
Demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>react test</title>
</head>
<body>
<div id="root"></div>
<div id="root-two"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load Babel Standalone -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Load our React code -->
<!-- Notice the 'type="text/babel"' attribute -->
<script type="text/babel">
// This was done for the sake of simplicity, you can still load your .js file here
// While goto1 is technically correct, I recommend sticking
// to using functions or classes..
const Element = () => {
return ( <h1>Hello, world!</h1> );
}
// This means you can do things like:
// Notice our component from above, Element, is reusable here..
const AnotherElement = () => {
return (
<div style={{textAlign: 'center', color: 'blue'}}>
<Element />
</div>
);
}
// Keep in mind using `()` syntax versus a function or class, means this is not reusable at all..
// The following is NOT reusable!
// const element = ( <h1>Hello, world!</h1> );
// You could also drop the `()` as it is used to group lines of code,
// something like this is also not reusable (but would still work in
// this scenario)!
// const element = <h1>Hello, world!</h1>
// For example, this wouldnt work
// const anotherElement = ( <element /> );
// This would also not work
// class SomeClass extends React.Component {
// render() { return ( <div><element /></div> ) }
// }
// This would not work either
// const SomeComponent = () => {
// return ( <div><element /></div> );
// }
ReactDOM.render(
// goto1 is correct, it looks like you can use an object as you were.
// Please be mindful of this as it is not reusable!
// I recommend sticking to either functions or classes, until you are more comfortable with React
<Element />,
document.getElementById('root')
);
// For the second example, demonstrating how using functions or classes
// is reusable, whereas your original example was not:
ReactDOM.render(
<AnotherElement />,
document.getElementById('root-two')
);
</script>
</body>
</html>
How to import js file with code on Babel if i'm not using npm? I'm write my own server on Golang and serving html and js files.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TODO APP</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type='text/babel' src="./js/App.js"></script>
<script type='text/babel' src="./js/Info.js"></script>
</body>
</html>
App.js
class App extends React.Component {
render(){
return(
<div>
<span onClick={() => {alert('clicked')}}>{Date.now().toString()}</span>
<Info />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
Info.js
export default class Info extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: true,
};
this.handleClick = this.handleClick.bind(this);
}
render() {
const text = <label htmlFor="new-text">{this.state.isOpen ? 'Open' : "Closed"}</label>
return (
<div>
<button onClick={this.handleClick}>
{text}
</button>
</div>
)
}
handleClick(e) {
this.setState({
isOpen: !this.state.isOpen,
})
}
}
So i didn't know how to add Info to App. import didn't work cause i'm not using npm.
Import and export won't work. You need to add the script tags in proper order so that the dependencies are resolved.
index.html
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Order is important -->
<script src="/info.js" type="text/babel"></script>
<script src="/index.js" type="text/babel"></script>
</body>
</html>
info.js
class Info extends React.Component {
render(){
return(
<div>
Hello World Info
</div>
)
}
}
index.js
class App extends React.Component {
render(){
return(
<div>
Hello World
<Info/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
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>
see I am new in react.js and include react and react dom ...but here, I am including cdn but the error will come with the console.kindly help me.
<html>
<head>
<script src="https://unpkg.com/react#0.14.7/dist/react.js">
</script>
<script src="https://unpkg.com/react-dom#0.14.7/dist/react-
dom.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let HocCompont= (BasicComponent) => class extends
react.Component {
render(){
return(
<div className="abc"> <BasicComponent/> </div>
)
}
}
const StatelessCoponent = () =>{
return( <button>I am button</button>
)
}
let ExtendedButton = HocCompont(StatelessCoponent);
ReactDOM.render(<ExtendedButton/>,document.getElementById("app"));
</script>
</body>
</html>