Need help to get started with React - javascript

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>

Related

Include React to existing web page - multiple react components

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.

Distributing code between multiple <script> tags

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

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>

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

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>

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>

Categories