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)
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>
I'm kinda new to ReactJS and don't even know if it's possible but I want my react app to be working in the browser from the .html file. without the need for calling the server and have it, working, only that way. ( I don't mind having a server to serve it obviously) just need to be able to have by calling the .html file
the public/index.html file:
<head>
<meta charset="utf-8">
<script src="/my_library/my_library.min.js"></script> <!-- needed for the project in the same folder the index.html is -->
<title>Demo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
the index.js (in src folder):
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
);
The App.jsx in the src folder
import * as React from 'react';
import './App.css';
import { MyContainer } from './components/MyContainer/index';
class App extends React.Component {
render() {
return (
<div className={ 'App' }>
<header className={ 'App-header' }>
<h1 className={ 'App-title' }>
</h1>
</header>
<MyContainer />
</div>
);
}
}
export default App;
PS: I have been able to add React to my file... But this particular component that I want to add only works with NPM Start. and as you can see in the index.html file shown above is says
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
which is exactly what I aim to change. if any one can provide some guidance or help about this, would be much appreciated.
If you just want to use React within an HTML file within a browser maybe you could just include the React library with a script tag as well as your custom React scripts with script tags as well. Their documentation has a nice example of just using React within an HTML file. I created a Codebox with their sample example for this below where the like button is using react. However, if you want to use JSX syntax you will have to use Babel, to transpile JSX into native JavaScript, and link the library like such:
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
create_react_app gives you a lot of bells and whistles so you don't have to worry about setting up build configurations using tools such as webpack, babel, eslint, etc.. but this meant to give you a head start on building out an application so you can focus on the application itself and not configuration settings. Behind the scenes it's using webpack-dev-server to serve up your application, but for your use case I think it would be best to just add React as a script tag to an existing HTML page
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<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>
<!-- Load our React component. -->
<script src="like_button.js"></script>
</body>
</html>
Hopefully that helps!
I am following a tutorial in React. I have created my very first component and expecting to see component in my application homepage, but I don't. I am not getting any error either.
In my homePage.Js (This is a component that I am trying to render), I have :
var React = require('react');
var Home = React.createClass({
render: function(){
return(
<div className="jumbotron">
<h1>Administration</h1>
<p>React, React Router.</p>
</div>
);
}
});
module.exports = Home;
In my Main.js file I have (This main.js serves as the base file for referencing my components):
$ = jQuery = require('jquery');
var React = require('react');
var Home = require('./components/homePage');
React.render(<Home />, document.getElementById('app'));
and in my index.html file I have :
<html>
<head>
<title>Administrator</title>
<link rel="stylesheet" href="css/bundle.css" />
</head>
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
</body>
</html>
When I run the app, I see an empty page, and when I check the page source code I can see below HTML in the BODY tag:
<body>
<div id="app"></div>
<script src="scripts/bundle.js"></script>
<script src="//localhost:35729/livereload.js?snipver=1" async="" defer="">
</script>
</body>
You import Home using
require('./components/homePage')
which is fine for default import, but your's isn't the default.
Use
require('./components/homePage').Home
or export using
module.exports.default = Home;
By the way, React.createClass is deprecated. If you want to learn React I recommend the use of ES6 class or function component. Try create-react-app to begin with.
You need to call the render method from react-dom when mounting the app.
ReactDOM.render(element, container[, callback])
Any pointers would be appreciated. I'm new to React and JSX and Babel and am just trying to get something bare-bones working. I've been at this for a while and I'm at a dead end.
Here's my html page:
<!DOCTYPE html>
<html>
<head>
<title>Test React</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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-core/5.8.34/browser.min.js"></script>
<script type="text/babel" src="../TestReact/res/js/main.jsx"></script>
</head>
<body>
<div>Page to Test React Library</div>
<p></p>
<div>
<button onclick="addComponent()">Add Component</button>
</div>
<p></p>
<div id="root">
</div>
</body>
</html>
And here's my "main.jsx" file:
addComponent = function (){
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
};
I'm using Chrome 61.
If I include either type="text/babel" or type="text/jsx" on my script tag, I get an exception: "Uncaught ReferenceError: addComponent is not defined".
If I remove this type attribute on the script tag, then (of course) I get an error for "unexpected token <" because the html/xml is not going to be transpiled.
When I have the type attribute (for jsx/babel) on the script tag removed AND I enclose the html in my addComponent method in quotes, then I get no errors, but I end up with the literal string
"<h1>Hello, world!</h1>"
rendered on the page in the 'root' div instead of an embedded header element - naturally, but at least that tells me that my small javascript and ReactDOM library are imported and working.
So it seems like the problem is that the JSX transpiling is not happening for some reason.
<---- UPDATE 201710011830 ---->
It seems that the problem I'm having is related to having ReactDOM.render called from within a javascript function ("addComponent") in my JSX file that is supposed to handle a button onclick event. If I remove the addComponent function so that main.jsx looks like this:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
then the h1 element is inserted on the page as it should be.
So the question then becomes, why won't it work the way I initially intended? Is it because of the syntax I used to define that addComponent function within the original JSX script?
You need to add bundle.js to your index.html file like below.
<body>
....
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
bundle.js is the distribution which packs all the react components and dependencies and put them together in your dev environment using webpack.
Add type="text/babel" to your script tag will transform your code which in main.jsx file. I think this transform effect your addComponent function that makes your code doesn't work.
You can try just put the jsx or react component code in main.jsx, like: window.Hello = <h1>hello</h1>; then in the html（or somewhere out of main.jsx）, you can write
addComponent = function (){
const Hello = window.Hello;
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
};
But I highly recommend use webpack, a simple demo: https://github.com/yujiangshui/react-i18n-demo
Im building a new React app but get the following error -
"require is not defined"
hello-world.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react/react.js"></script>
<script src="react/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="example"></div>
<script type="text/babel" src="hello-world.js">
</body>
</html>
hello-world.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(
<App />,
document.getElementById('example')
);
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
Im running this from my client and don't have any web server running.
I tried to include http://requirejs.org/docs/release/2.2.0/minified/require.js
but it gives a totally different error.
You're trying to use a CommonJS module from within your browser.
This will not work.
How are you using them?
When you write import ... from ... in ES6 Babel will transpile these calls to a module definition called CommonJS and since CommonJS isn't around in the browser you'll get an undefined error from require().
Furthermore, you're also trying to load RequireJS which uses a different module definition pattern called AMD, Asynchronous Module Definition, and will not take care of the require calls for you. You can wrap them in RequireJS specific calls.
If you want to use CommonJS modules in your code base you need to first bundle them with either Browserify or webpack. The two tools will transform your require calls to some glue magic that you can use within the browser.
But in your specific case, if you remove the import calls and just let the browser take care of and attach the classes you've created to the window object your code should work.
Also, note that when you are using submodules from React without another transpiler you will have to reference the top-level modules. I just know that in some cases there are people who will not wish refactor their projects and alter directories to handle webpack/browserify module imports.
So instead of using the CommonJS import React, {useState, useEffect} from 'react' you can instead reference hooks with React.useEffect() , React.useState().
Just another solution for those who don't want to deal with any refactoring.
Here is a basic hello world example on hooks
The code samples on react website doesn't show the full html document. In summary use React.useEffect and React.useState. Get rid of the import statement.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Example() {
const [count, setCount] = React.useState(0);
// Similar to componentDidMount and componentDidUpdate:
React.useEffect(() => { // Update the document title using the browser API
document.title = `You clicked ${count} times`; });
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('root')
);
</script>
</body>
</html>