React Component not displayed in HTML - javascript

I am just learning react and cant display my component.
I have a welcome html file with the following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://thymeleaf.org"><head>
<meta 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>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script type = "text/babel" src= "App.js"> </script>
<script>
import {Component} from "react";
class App extends Component {
render() {
return(
<h1>Hello everyone nice to see it finally works!!!</h1>)
}
}
ReactDOM.render(<App />, document.querySelector(".root"));</script>
</body>
</html>
This is my App.js
import React, {Component} from 'react'
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
name: '',
appVersion: ''
}
}
render(){
return(
<h1>Hello everyone nice to see it finally works!!!</h1>
)
}
}
Note: After my App.js didnt work i tried using the component inline of the html file as you can see. But even that doesnt help. Hope someone can give me a hint.

I think it doesn't work to use external scripts (<script src="...">) together with the in-browser-babel-transpiler (not sure though).
It does work with either
JSX and inline code, or
external script without JSX
The most common approach is to set up a node.js project including webpack, server, babel etc., e.g. with create-react-app.
1. JSX and inline code
Here you don't need (and can't use) the import.
React is already imported into the global scope by the <script ...> tag. To use Component you can instead use React.Component:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta 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/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script type="text/babel">
class App extends React.Component {
render() {
return(
<h1>Hello everyone nice to see it finally works!!!</h1>
);
}
}
ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>
2. external script, without JSX
Importing <script src="app.js"> apparently works only without JSX inside the app.js (i.e. without babel-transpiler), because of CORS restrictions:
// index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://thymeleaf.org">
<head>
<meta 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/babel.min.js"></script>
</head>
<body>
<div class="root"></div>
<script src="app.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.querySelector(".root"));
</script>
</body>
</html>
// app.js
class App extends React.Component {
constructor( props ){
super(props);
this.state = {
name: 'some name',
appVersion: ''
};
}
render(){
return [
React.createElement( 'h1', null, 'it works, but without JSX! ' ),
React.createElement( 'p', null, 'Name: ' + this.state.name ),
];
}
}

Related

why my react code not working although other stuff is okay

decided to make react project for the first time, noticed that it's not working, css is good, but not react code, checked a lot tutorials but haven't found any solution:(
P.s this is my first time using react,therefore sorry guys and thanks for feedback
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="restaurant"></div>
<script src="js.js" type="text/babel"></script>
</body>
</html>
js.js:
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
ReactDOM.render(<App />, document.getElementById("restaurant"))
ReactDOM.render(<h1>hiii</h1>, document.getElementById("restaurant"))
App.js:
import React from "react"
import Header from 'header'
export default function App() {
return(
<Header />
)
}
Header.js :
import React from 'react'
export default function Header(){
return (
<div className='container'>
<div className='head-part'>
<h1>HopeLake</h1>
<div className='icons'>
<span>i1</span>
<span>i2</span>
<span>i3</span>
</div>
<div className='list-pages'>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MENU</li>
<li>ORDER</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
)
}
Here is my example to use React.JS by CDN.
No need to export default but need to import file in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- Import new component before use here!!! -->
<script type="text/babel" src="./App.js"></script>
<script type="text/babel" src="./Header.js"></script>
<script type="text/babel" src="./index.js"></script>
</body>
</html>
App.js
const App = () => {
return <Header/>
}
Header.js
const Header = () => {
return <div>This is my header</div>
}
index.js
const container = document.querySelector("#root");
const root = ReactDOM.createRoot(container);
root.render(<App />);
Hope this will help you...

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>

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.

Reactjs console errors: 'Components object is deprectated' & 'ReferenceError: require is not defined'

I'm trying to use jsx with classes create a simple hello world program to print 'Hello world' in my browser(firefox).
I can get a single page [html with embedded jsx][1] to work. But not when I try to use classes.
I am receiving the following in my console output
Download the React DevTools for a better development experience: https://fb .me/react-devtools
You might need to use a local HTTP server (instead of file://): https://fb .me/react-devtools-faq react-dom.development.js:21347:9
unreachable code after return statement[Learn More]
babel.js:61389:2
You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/ babel.js:61666:4
The Components object is deprecated. It will soon be removed. index.html
ReferenceError: require is not defined[Learn More]
<anonymous> file:///Users/Jacob/temp/index.html:5
run https://unpkg.com/babel-standalone#6.26.0/babel.js:61531
check https://unpkg.com/babel-standalone#6.26.0/babel.js:61597
loadScripts https://unpkg.com/babel-standalone#6.26.0/babel.js:61624
onreadystatechange https://unpkg.com/babel-standalone#6.26.0/babel.js:61549
jsx/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello World</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>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel' src='jsx/index.js'></script>
</body>
</html>
​
A quick fix in firefox for your problem would be to change your jsx/index.jsx to
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
i.e remove 'import'
Go through this for babel usage with babel-standalone.
As you are using babel-standalone it would be best if you change your code to
<!DOCTYPE html>
<html>
<head>
<title>Hello World</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>
<!--
<script data-main="scripts/main" src="https://requirejs.org/docs/release/2.3.6/minified/require.js"></script> #caused other errors
-->
<meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="root"></div>
<script type='text/babel'>
class NavBar extends React.Component {
render() {
return (
<div>
Hello world
</div>
);
}
}
ReactDOM.render(<NavBar />, document.querySelector('#root'))
</script>
</body>
</html>

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>

Categories