How to use React.js in an html development webpage? - javascript

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>

Related

Need help to get started with React

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>

react button doesn't show up

I am a beginner in React, and I am trying to put a button on my page, but the button doesn't show up.
The following is my code(updated version after adding the div tag with a id "root" inside the body tag)
<!DOCTYPE html>
<head>
<meta charset="UTF-8"/>
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Gambling Online</title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
console.log("dha");
class Start extends React.Component{
render(){
return(
<button className="start">
testing
</button>
);
}
}
ReactDOM.render(
<Start />,
document.getElementById('root')
);
</script>
You need to include a babel transpiler in order to use text/babel script, add this in your <head> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

React CDN based page not working with Babel 6.1.19

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>

why ReactDOM is not defined in my helloworld program?

I am the new learner of Reactjs. I am trying to execute hello world program in the browser.
But I got an error. i.e
react-dom.min.js:12 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
And my code is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
I can not understand the problem.
Use react-dom.min.js after react.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

Jquery Steps doing nothing

I`m trying to use Jquery-Steps but this doesnt even like is working or loaded, it only shows the h1 and div blocks, only the html is been loaded
Here is the code that I took from them, I dont know if I need to do something else.
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript' src="jquery.steps.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
</body>
</html>
Try now ?
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script type='text/javascript' src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type='text/javascript' src="jquery.steps.min.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>
<script>
// Initialize wizard
var wizard = $("#wizard").steps();
// Add step
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});
</script>
</body>
</html>

Categories