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.
Related
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 ),
];
}
}
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>
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>
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>
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>