The div id on line 9 is not getting invoked.
The output does not show the text invoked under the reactDom.render function. It only prints only the "Hello World from the index form within the HTML" on line 10. What am I missing ???
Using the express web server to run.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<title>React App</title>
</head>
<body>
<h1>Hello world from the index</h1>
<div id="app1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>HELLLLLOO</h1>,
document.getElementById('app1')
);
</script>
</body>
</html>
The CDN links looks outdated. This works just fine:
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/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/babel">
ReactDOM.render(
<h1>Hello</h1>,
document.getElementById('root')
);
</script>
Ah, I think your issue in the updated code seems to be with babel link. It should be babel not browser.
So, for example, just replace:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js
With:
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js
Here's a working fiddle.
Here are the list of links through which you may consider using specific version:
https://cdnjs.com/libraries/react
https://cdnjs.com/libraries/react-dom
https://cdnjs.com/libraries/babel-standalone
That seems to be an old version of React in your script which doesn't include the ReactDOM object. However with the latest React version and changing ReactDom to ReactDOM your code compiles fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudfare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</head>
<body>
<h1>Hello world from the index form within HTML</h1>
<div id="app1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>HELLLLLOO</h1>,
document.getElementById('app1')
);
</script>
</body>
</html>
Related
I'm working on a project, which has already a webserver. The webserver runs PHP and it is limited. Many software cannot be installed.
I understand that React does not require any installation but adding JSX to a project needs to run these commands:
Step 1: Run npm init -y
Step 2: Run npm install babel-cli#6 babel-preset-react-app#3
Unfortunately, I cannot add NodeJS to the webserver.
JSX coding syntax would be very useful for me using the JavaScript files.
Option for adding it to HTML
I understand that I could add JSX to an HTML file:
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
But I would like to use in .js files.
Examples
I have 2 examples:
Example is working but it has no JSX.
Example has JSX but it is not working.
The HTML file is the same.
1. Example project: Unexpected token error with JSX
const myelement1 = <h1>JSX should work</h1>;
ReactDOM.render(
myelement1,
document.getElementById('reactRoot')
);
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My React example page</h1>
<div id="reactRoot"></div>
<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 src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
2. Example project: React is working without JSX
const myelement2=React.createElement('h1', {}, 'No JSX!');
ReactDOM.render( myelement2, document.getElementById('reactRoot'));
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>My React example page</h1>
<div id="reactRoot"></div>
<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 src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
My Question
How could I fix 1. Example project, if no program installation is possible?
you have to set type attribute as text/babel, this way the problems will be resolved, e.g:
<html>
<body>
<div id="reactRoot"></div>
<script type="text/babel">
const myelement1 = <h1>JSX should work</h1>;
ReactDOM.render(
myelement1,
document.getElementById('reactRoot')
);
</script>
<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 src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</body>
</html>
My code is as below, but "hello world" is not displayed
is there problem with my code ?
please help
<html>
<head>
<script src="theme/public/js/react.production.min.js"></script>
<script src="theme/public/js/react-dom.production.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
you also need to import babel
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
This is from the official docs which is using the development version docs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
<!--
Note: this page is a great way to try React but it's not suitable for production.
It slowly compiles JSX with Babel in the browser and uses a large development build of React.
To set up a production-ready React build environment, follow these instructions:
* https://reactjs.org/docs/add-react-to-a-new-app.html
* https://reactjs.org/docs/add-react-to-an-existing-app.html
You can also use React without JSX, in which case you can remove Babel:
* https://reactjs.org/docs/react-without-jsx.html
* https://reactjs.org/docs/cdn-links.html
-->
</body>
</html>
Following is code for simplest webpage in React.js. If I write that in notepad and open it in web-browser as html doc, shouldn't it display "Hello World"? As opposed, browser displays nothing. Any other dependency is required for React.js to work?
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script type="text/babel">
<div id="app"></div>
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app');
);
</script>
</body>
</html>
The following is a fully functional example tested in Firefox and Chrome. Below I analyze the parts where your posted example had some problems:
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app')
);
</script>
</body>
</html>
If you start with your original example and look at the developer console when opening the web page (F12 on most browsers), you'll see the following error on line 13:
SyntaxError: missing ) after argument list
That error is occurring because of the extra semicolon after the document.getElementById('app');. Remove that:
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app') // No more semicolon here
);
Then the console will show the following error:
ReferenceError: ReactDOM is not defined
That's because you have some nesting issues with your script tags and the fbme links to the React libraries don't go through. Change to this and add the Babel library:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Now your example should work fine.
Modifying your code produces the desired output
<!DOCTYPE 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">
<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://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app')
);
</script>
</body>
</html>
Make use of babel-standalone and wrap the React contents within <script type="text/babel">
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
<div id="app"></div>
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app');
);
</script>
Although I would suggest you to make use of webpack as a transpiler. You can set up a React app with create-react-app too
I tried to render a simple text, but it renders nothing. I already installed react, reactdom, webpack, and bable. Any idea on why is it not working?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and Spring Boot</title>
</head>
<body>
<div id='root'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
</script>
</body>
</html>
Removing import statements works for me. Please check the working snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React and Spring Boot</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id='root'></div>
<script type="text/babel">
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
</script>
</body>
</html>
It works...its just that import is not understood by the browser
ReactDOM.render(
<h1>Test</h1>, document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react-dom.js"></script>
<div id="root"></div>
This is my first project using React.js and I follow this steps for create a Hello World (https://facebook.github.io/react/docs/hello-world.html)
I import React.js in head tag but why my code doesn't works? index.html is just only blank page
index.html
<html>
<title>
My first project using React.js
</title>
<head>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
Because you forgot to give the reference of babel, use this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
And specify the type of the script also type=text/babel.
Check the working code:
<!DOCTYPE html>
<html>
<title>
My first project using React.js
</title>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
</head>
<body>
<div id="root"/>
<script type='text/jsx'>
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>