Unable to run code of Reactjs code on live server - javascript

I am a newbie and wrote this code from a tutorial. This code is not giving "Hello World" output when I open it with live server
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
crossorigin
src="https://unpkg.com/react#17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"
></script>
<title>Learning React</title>
</head>
<body>
<div id="root"></div>
<script>
class App extends React.component {
render() {
return React.createElement("div", null, "Hello World");
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById("root")
);
</script>
</body>
</html>


React.component needs to be with capital c: React.Component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
crossorigin
src="https://unpkg.com/react#17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"
></script>
<title>Learning React</title>
</head>
<body>
<div id="root"></div>
<script>
class App extends React.Component {
render() {
return React.createElement("div", null, "Hello World");
}
}
ReactDOM.render(
React.createElement(App, null),
document.getElementById("root")
);
</script>
</body>
</html>

Related

How to add files with JSX to Html

Tell me please, how to connect external files with JSX to Html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" src="index.js"></script>
</body>
</html>
index.js:
ReactDOM.render(<input value={null} />, document.getElementById('root'))
But if I copy code inside the "script" tag, everything works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(<input value={null} />, document.getElementById('root'))
</script>
</body>
</html>

index.html
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Add React in OneMinute</title></head><body><div id="input_container"></div><script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="input.js"></script></body></html>
input.js
"use strict";const e = React.createElement;class InputContainer extends React.Component {constructor(props) {super(props);}render() {
return e("input");}}const domContainer =document.querySelector("#input_container");ReactDOM.render(e(InputContainer), domContainer);

Import/export module in JavaScript

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./app.js"></script>
</body>
</html>
app.js
import { hello } from './hello';
hello();
hello.js
export function hello() {
console.log('Hello!');
}
Uncaught SyntaxError: Cannot use import statement outside a module app.js:1

I think you need to add type to the script tag:
<script type="module" src="./app.js"></script>
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

When using and import statement and HTML I get no output. Why?

I am getting a blank page when using import. I have a simple program that is just to test the import statement. I don't know why I am not getting any output. Here is my code in app js:
import TestComponent from "./components/Testcomponentfile"
pageBuild();
function pageBuild(){
TestComponent();
}
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
And Here is the index.HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script src="./JS/app.js"></script>
</body>
</html>
What am I missing??

Use type="module" in your html while using the script
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script type="module" src="./JS/app.js"></script>
</body>
</html>

calling pageBuild(); after defining the function did not solve the problem>
I am using google chrome browser. It should be working.
import TestComponent from "./components/Testcomponentfile"
function pageBuild(){
TestComponent();
}
pageBuild();
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
an update to the first answer
tc.js
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
ap.js
import TestComponent from "./tc.js"
function pageBuild(){
console.log(TestComponent());
}
pageBuild();
tested and it works

How to use React v16 without a build process

In React v15 I can easily do the following:
<html>
<head>
<meta charset="UTF-8">
<title>React v15</title>
</head>
<body>
<div id="divContainer"></div>
<script src="https://unpkg.com/react#15.6.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.6.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.min.js"></script>
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return <h2>Hello World !</h2>;
}
});
ReactDOM.render(<HelloWorld />
, document.getElementById('divContainer')
)
</script>
</body>
</html>
Once I reference react#16, react-dom#16 it no longer works, I understand that React.createClass() has been deprecated and removed. So what is its replacement?
I need a minimalist way of doing the same without a build process e.g. browserify, webpack, require, import, etc. I just want to reference libraries via a CDN or locally as I have shown in the example.

After you include React 16 libs you can access the React instance directly and extend React.Component
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>React Hello World</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/jsx">
class MyApp extends React.Component {
render() {
return <span>Hello world</span>;
}
}
ReactDOM.render(<MyApp />, 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>

Categories