I was following the 'Add React to a Website' guide on https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx but it does not seem to work correctly for some reason.
The code that does not work:
index.html:
<html>
<head>
<!-- Load React -->
<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>
<!-- Load React component. -->
<script src="test.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
test.js:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
The code above will produce a blank page but when I add the react code on the index.html page like this:
<script>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
It does work.
I have tried to replace
<script src="test.js"></script>
with
<script src="/test.js"></script>
and
<script src="./test.js"></script>
but that still does not work.
Also when I inspect element on the blank page it does show that it loads test.js
Can someone please tell me what I am doing wrong?
As the guide says:
Now you can use JSX in any <script> tag by adding type="text/babel"
attribute to it.
So you need <script src="test.js" type="text/babel"></script>.
Even you can do it without adding text/babel by just using React.creatElement API as recommneded by Dan Abramov, author of redux and part of Reactjs core team.
Here is the working codesanbox: React with no build config
Related
I am creating Spring boot application and i want my frontend to be with React. The problem comes from the fact that i cannot find a way to properly integrate the react component in my jsp page.
Here is the declaration of the component:
ReactDOM.render(<App />, document.getElementById('root'));
I want to point out that my jsp page is inside WEB-INF directory and i can successfully redirect to it via a controller, but my import of the component does not work and does not throw an error!
I tried to import it by the element id:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Intellij is trash</title>
</head>
<body>
ala bala
<div id="root"></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>
</body>
</html>
Am i doing something wrong or missed some configuration?
Thanks in advance for your help!
After importing the React and ReactDOM scripts, import another script where you have written your component App. Assuming it is in App.js,
<script src="App.js"></script>
Now you need to render the component in the div with id="root". I will use babel to compile but you can do without it too. So after the import write:
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
Conclusion: Basically you need to import 4 files in this order: React, ReactDOM, Babel and your component.js files. Then you need to render the component in the div for it to work.
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="App.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
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>
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>
Hi i am very new to Reactjs. instead of setting up webpack and babel, i am executing examples with React cdn references.i also want to use react-datepicker component,when i included this through cdn it throughs some error,guys help me out how to get rid of this and make it work
<!DOCTYPE html>
<html>
<head>
<title> React Basic Example </title>
</head>
<body>
<div id="root"></div>
<!-- React Libraries -->
<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>
<!-- Babel -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<!-- moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!-- React date picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/0.47.0/react-datepicker.min.js"></script>
<script type="text/babel">
var App = React.createClass({
render:function(){
return (
<h1> Hello this is an APP </h1>
);
}
});
ReactDOM.render(<App />,document.getElementById('root'));
</script>
</body>
</html>
and the error i am getting in the console is
just began to learn React and here are my very simple JSX and HTML files. I don't see any error in Console (Chrome) when I run it from my http-server. However the button Im expecting to see won't show in the browser. I'm not sure why it does not and what is missing.
Can anyone please help? Also why should we specify type=text/babel" in the tag? If I don't do this, I get an error (unexpected syntax <) in console.
Thanks!
Prem
HTML Code:
<html>
<head>
<title>
!My first React JS Component!
</title>
</head>
<body>
<div id="root"></div>
<script src="react.js"></script>
<script src="script.jsx" type="text/babel"></script>
</body>
</html>
my JSX File:
var Button = React.createClass({
render: function () {
return (
<button> Go! </button>
)
}
});
ReactDOM.render(<Button />, document.getElementById("root"));
You cannot just include the jsx in your site like that - it won't work :)
You need to transpile your jsx via a tool like Webpack.
The official documentation really is excellent and easy to understand, and it should explain how you setup a basic environment.
Also, there are dozens of tutorials on this, but here's a free one that I found helpful and easy to understand on youtube:
React + Redux + Webpack (Feel free to skip the redux part for a starter - really just a popular addon to React for managing state, which you can expand upon later)
For good measure, something like this should work:
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
App.jsx:
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('app')
);