The following React code works when the Babel-Core CDN is changed to version 5.8.24 but not when the version is 6.1.19 as included. I am heavily confused as to why this would matter? Shouldn't things be forward-compatible? Or am I just missing something really obvious here?
Thanks in advance.
<html>
<head>
<script src="https://unpkg.com/react#15/dist/react.min.js">
</script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-
core/6.1.19/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />,
document.getElementById('app'));
</script>
</body>
</html>
Use this script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
Check the babel-standalone DOC.
Check the working code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="John" />,
document.getElementById('app'));
</script>
</body>
</html>
Related
im getting started with React and im trying to start with basics. Now, this is my code
index.html
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
<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 type="text/babel" src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="index.js" type = "text/babel "></script>
</head>
<body>
<div id = 'try'></div>
<script type= "text/babel">
const element = <Welcome />;
ReactDOM.render(
element,
document.getElementById('try')
);
</script>
</body>
</html>
and this is my index.js
class Welcome extends React.Component {
render(){
return <h1> hello</h1>;
};
};
it is supposed to show me "hello" on index.html but the page stills blank, where is the error?
pd: also tried using "text/jsx" instead of "text/babel"
Try calling Welcome without setting to const.
ReactDOM.render(
<Welcome />,
document.getElementById('try')
);
Try this, this should work:
class Welcome extends React.Component {
render(){
return <h1> hello</h1>;
};
};
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="try"></div>
<script type="text/babel">
const element = <Welcome/>
ReactDOM.render(element, document.getElementById("try"));
</script>
</body>
</html>
I am trying to include React to an web page. i would like to break up the components into it's own .js files. i am not having any luck.
My index.html file looks like this.
<html> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hello React!</title>
<script src = "https://unpkg.com/react#16/umd/react.development.js ">/script>
<script src = "https://unpkg.com/react-dom#16/umd/react-dom.development.js "></script>
<script src = "https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
</head>
<body>
<div id="root">
</div>
<script src="app.js" type="text/babel"> </script>
<script src="greetings.js" type="text/babel"> </script>
</body>
My app.js file looks like this.
class App extends React.Component {
render() {
return (
<div>
<Greetings />
<h1>Hello World!</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
My greetings.js file looks like this
class Greetings extends React.Component {
render() {
return <h1>Hi</h1>
}
}
So i was expecting "Hi" followed by "Hello world!" but i am getting "Greetings is not defined".
Can you help me?
I am answering my own question. The order which loads the .js files was the problem.
it has to be
<script src="greetings.js" type="text/babel"> </script>
<script src="app.js" type="text/babel"> </script>
Then it displayed the web page correctly.
Assume I have the following code inside my HTML file, within the <body> tags:
<div id="root"></div>
<script type="text/babel">
class Element extends React.Component {...}
ReactDOM.render(<Element />, document.getElementById("root");
</script>
The above code works flawlessly. However, if I change it to the following:
<div id="root"></div>
<script type="text/babel">
class Element extends React.Component {...}
</script>
<script type="text/babel">
ReactDOM.render(<Element />, document.getElementById("root");
</script>
I just see a blank screen.
Why does React not work if the ReactDOM.render() call is made from a separate tag?
Because your scripts are of type text/babel, which means they'll get transformed into JavaScript and evaluated in different scopes. You can possibly store the class in a global variable, and retrieve it to use it in a different scope, like so:
<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>
<div id="root"></div>
<script type="text/babel">
class Element extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
);
}
}
window['Element'] = Element;
</script>
<script type="text/babel">
var Element = window['Element'];
ReactDOM.render(
<Element />,
document.getElementById("root")
);
</script>
It works fine
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<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 type="text/babel">
class Element extends React.Component {
render(){
return (
<div>Hello</div>
)
}
}
</script>
<script type="text/babel">
ReactDOM.render( <Element/>, document.getElementById('root') );
</script>
</body>
</html>
This is the another demo on CodeSandbox: https://codesandbox.io/s/92qv025204
I'm trying to get this code to work but it just won't display anything onto my google chrome page. It's saved as a .html file on my computer.
<DOCTYPE! html>
<html>
<head>
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type='text/jsx'>
ReactDOM.render(
<h1>Hello World!</h1>,
document.getElementById('container')
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type='text/babel'>
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('container'));
</script>
</body>
</html>
I have read some articles for beginners about ReactJs. The article I read showed only code fragments. I'm having trouble with my first component:
full code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
When I open the page I see embedded:11 Uncaught TypeError: React.renderComponent is not a function
Can anyone please point me in the right direction?
I've also tried this with no luck:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
The problem with your first example is that React.renderComponent is not a function, you need to use ReactDOM.render instead. You should save yourself a lot of effort now and just use create-react-app and use this application. It takes all of the pain out of the tooling that you will need to make React fast to use (webpack hot module reloading). It is extremely simple compared to the average tooling you will need to setup taking any other route and is made by the people that make React. I can tell by the version number of React that you are using, the tutorial you are going of of is very old, a very longtime before Facebook released create-react-app when things were more difficult.
If you are going to go about it inline, use this in your head -
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
Full working example on React 15 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js" integrity="sha256-cLWs9L+cjZg8CjGHMpJqUgKKouPlmoMP/0wIdPtaPGs=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js" integrity="sha256-M5lc1yUhpXlm2VZjGk4aoFwqR9H1OJ0p5MR5xpipulk=" crossorigin="anonymous"></script>
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script>
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
</script>
</body>
</html>
EDIT: I see that you use babel-core browser.js, which has been deprecated, remove it and use React directly.
Remove script type and replace everything with:
var HelloWorld = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello world!!");
}
});
ReactDOM.render(React.createElement(HelloWorld, null), document.getElementById("content"));
jsbin demo