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>
Related
I made two apps one is for angularjs and one is to react. Now the problem is I include the react build in angularjs app and try to initialize the '' component but when I run the code it says Test is not defined.
Can someone help me with this or give me any idea how I can get out of this problem.
React Component:
import React from 'react';
import ReactDOM from 'react-dom';
class Test extends React.Component {
render() {
return (
<div>
Hello
</div>
);
}
}
angular Js Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="angular-app">
<div id="root"></div>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></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://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script src="react/dist/build.js"></script>
<script>
ReactDOM.render(<Test/>, document.getElementById('root'));
</script>
</body>
</html>
You should write the following code in your react app and then load your bundle file in angularJS app.
ReactDOM.render(<Test/>, document.getElementById('root'));
Thing is, you cannot use jsx inside browser, jsx is usually transpiled using Babel into JavaScript function calls.
So 1. <Test /> will never work inside browser, you need to Babel that.
You need to expose react to you angularjs, best way I can think of is
// In react, instead of exporting component, export a function that mount component in given HTML
Export default (elm) => ReactDOM.render(<Test/>, elm)
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>
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
I am trying to include cdn link for my react js app. What would be the link to include material ui.
http://www.material-ui.com/#/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First React App</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://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="container" style="font-style: italic;"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(
<h1>My First App</h1>,
destination);
</script>
</body>
</html>
The way to include material ui is through npm rather than a CDN link like traditional Frontend frameworks or libraries.
The correct way to to do it is through npm packages.
You install the library by running
npm install material-ui
Then you can use it inside your react component as below
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
You can read more about it here http://www.material-ui.com/#/get-started/installation
I have a simple React App that I'm trying to load through using a CDN vs NPM.
My options.html file:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<script src="https://fb...me/react-0.14.3.js"></script>
<script src="https://fb...me/react-dom-0.14.2.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>Hello world</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
When I load up options.html in a browser, nothing is showing up when I expected to see Hello world. I checked the debugger and no errors are coming up.
What am I doing wrong?
I believe :
There is no need of type="text/babel"
<script src="index.js" type="text/babel"></script>
so it should be
<script src="index.js" ></script>