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
The most common approach is to set up a node.js project including webpack, server, babel etc., e.g. with create-react-app.
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>
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 ),
];
}
}