This is a very simplified version of my React component:
my-panel.js (my-panel-bundle.js)
import React from 'react'
import { render } from 'react-dom'
class MyPanel extends React.Component {
render () {
<input type='text' />
}
}
export default MyPanel
The full version is composed by several other components. I am using webpack to create a bundle file for the component. Now I want to use this component in an existing web application, which is not implemented using React. My challenge is, how do I load the React module, and create an instance of this component in a web page?
I have tried to use RequireJS, like this:
index.html
<!DOCTYPE html>
<html>
<body>
<div id='root'></div>
<script src="require.js" data-main="index.js"></script>
</body>
</html>
index.js
require.config({
paths: {
react: 'react',
reactDom: 'react-dom',
myPanel: 'my-panel'
}
})
require(['react', 'reactDom', 'myPanel'], function(React, ReactDOM, MyPanel) {
ReactDOM.render(
React.createElement(MyPanel),
document.getElementById('root')
)
})
The code fails reporting that MyPanel is undefined. Can anyone please help me identify the missing pieces?
Firstly, you forgot the return value in render function of your MyPanel component.
class MyPanel extends React.Component {
render () {
return <input type='text' />
}
}
Coming to the main question. MyPanel is undefined because the path to the bundle is incorrect. Assuming that your project directory is something like the following:
- project/
- index.html
- index.js
- bundle/
- my-panel-bundle.js
/... the rest
your require config should look like:
require.config({
paths: {
react: 'react',
reactDom: 'react-dom',
bundle: 'bundle'
}
})
require(['react', 'reactDom', 'bundle/my-panel-bundle'], function(React, ReactDOM, MyPanel) {
ReactDOM.render(
React.createElement(MyPanel),
document.getElementById('root')
)
})
Alternatively, you don't actually need require.js if you use webpack. Instead of export default ..., put the ReactDOM render code:
ReactDOM.render(
React.createElement(MyPanel),
document.getElementById('root')
)
after the class definition and include the bundle script in your html.
<!DOCTYPE html>
<html>
<body>
<div id='root'></div>
<script src="./bundle/my-panel-bundle.js"></script>
</body>
</html>
Related
I'm new to react and building a simple app with a node/express backend and react front-end. I'm trying to render my App component. I've tried using ReactDOM.render, but I'm already importing render from 'react-dom' and making that change did nothing. The file path to the App component is correct. No errors. When I inspect the DOM, the div is empty.
Here's the html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hyzer</title>
<link rel='stylesheet' href='css/application.css'>
</head>
<body>
<div id='app'></div>
<script type='text/javascript' src='build/bundle.js'></script>
</body>
</html>
Here's the index.js:
import React from 'react';
import { render } from 'react-dom';
import App from './components/App.jsx';
render(
<App />,
document.getElementById('app')
);
Here's the App.jsx:
import React, { Component } from 'react';
class App extends Component {
render() {
return <h1> Hello World </h1>;
}
}
export default App;
Edited to add my webpack.config.js (with testing modules removed because they are irrelevant) based on requests for clarification below:
const webpack = require('webpack');
const path = require('path');
const BUILD_DIR = path.resolve(__dirname, './build');
module.exports = {
mode: 'development',
context: __dirname,
entry: {
main: path.join(__dirname, 'front-end', 'index.js'),
},
output: {
filename: 'bundle.js',
path: BUILD_DIR,
},
};
Sarah,
You need to change App.jsx to App.js then it should work. Please change the file name and also when you import it into index.js
import App from './components/App.jsx';
make it:
import App from './components/App.js';
and change the file name from App.jsx to App.js
I foolishly had webpack bundling to a location build. My project is being compiled to a directory dist where the copy of my index.html obviously also resides. Once I changed the location of the bundle and the .jsx filetypes following the answer given by #iceveda06, the app rendered as expected. Thanks!
I know how to set up a React project using npm, yeoman and it works fine.
When I follow this tutorial
http://danprince.github.io/learn-react/lessons/ex1.html and apply React from CDN, it also works - but it's an old version. If I try to apply a new version of React via CDN, I can't figure out how to render ANYTHING on the screen. For example, what's wrong with the following code?:
react:
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'>
html:
<body>
<div id="root"> </div>
</body>
js (based on Code School tutorial exaple):
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
Since react v15.6.0 the ReactDOM module has been moved to a separate package add this to below your react <script ... /> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
Snippet:
class StoryBox extends React.Component {
render() {
return( <div>Story Box</div> );
}
}
ReactDOM.render(
<StoryBox />, document.getElementById('root')
);
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"> </div>
I think you should look at some updated react tutorials e.g.
Simple React Development in 2017
i'm using spring boot and my index.html is in src/main/resources/templates directory and below is the content. If i render a static content from html itself it renders but when i try to render from react component it doesn't render anything
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<meta charset="UTF-8"/>
<title>ReactJS + Spring Data REST</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="react"></div>
<script src="built/bundle.js"></script>
</body>
</html>
my react component is in src/main/js/ directory and app.js file
Below is the all the codes i have in the app.js file
import React from 'react';
import {render} from 'react-dom';
import RendorTest from 'components/RendorTest';
class RendorTest extends React.component{
rendor(){
return(
<div><h1>Spring Boot + Rest + React.js</h1></div>
);
}
}
var element = <RendorTest />;
ReactDOM.render(
element,document.getElementById('react')
)
I'm not sure why you're importing RendorTest and then declaring another class of the same name, but you are also extending the wrong method on the React object. You need to extend React.Component { } not .component.
You could also import React, { Component } from "react"; and then extend Component { }
As ahutch mentioned, you also need to call the render() method, rendor() is not a method of React.Component.
Kyle is right and also you want to call render() and not rendor(). This component is also probably better written as a stateless functional component, for example:
const RendorTest = (props) => {
return (
<div>
<h1>Spring Boot + Rest + React.js</h1>
</div>
)
}
I am trying to setup a basic react application(Hello World) on my laptop. I am using react and react-dom ( version 15.5.4) alongwith babel, webpack and yarn to run/test it.
I am getting Uncaught ReferenceError: Button is not defined for a pure function component that I have defined in App.jsx.
Here are the content + the application directory structure I have used.
App.jsx
import React from 'react';
/*
export default class App extends React.Component {
render() {
return(
<div>
<h1>Hello World</h1>
</div>
);
}
}*/
const Button = () => {
return(<button>Go</button>);
};
export default Button;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
//ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Button />, document.getElementById('test'));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<!-- <div id="root"></div> -->
<div id="test"></div>
</body>
</html>
Directory Structure
<root_directory>
|_client
|_components
|_App.jsx
|_index.html
|_index.js
Please let me know, if the package.json, webpack config and .babelrc file content is required as well.
The browser console shows the below error.
Uncaught ReferenceError: Button is not defined
at Object.<anonymous> (index_bundle.js:12891)
at __webpack_require__ (index_bundle.js:20)
at Object.<anonymous> (index_bundle.js:30981)
at __webpack_require__ (index_bundle.js:20)
at module.exports (index_bundle.js:66)
at index_bundle.js:69
this error shows up when I test run react
my folder structure is simple like this:
app folder
index.html
index.js
home.js
webpack.config.js
dist folder
bundle.js
index.html look like this
<!DOCTYPE html>
<html>
<head>
<title>hello world app</title>
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src= "../dist/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js is like this:
var React = require('react');
var ReactDOM = require('react-dom');
var Home = require('./Home');
ReactDOM.render( Home, document.getElementById('app'));
and home.js like this:
var React = require('react');
var Home = React.createClass({
render: function(){
return(
<div> hello from home </div>
)
}
});
module.exports = Home;
I run compile the code via this webpack config:
module.exports = {
entry:[
"./app/index.js"
],
output: {
path: __dirname + '/dist',
filename: "bundle.js"
},
module: {
loaders : [
{test: /\.js$/, exclude : /node_modules/, loader: "babel-loader",
query: {
presets: ['react']
}
}
]
}
}
After compiling, I run the file index.html. And the error ReactDOM.render(): Invalid component element... showed up. What I've done wrong?
ReactDOM.render takes an instance of a React class as its first argument. You pass a class directly.
So instead of
ReactDOM.render(Home, document.getElementById('app'))
Try like below.
ReactDOM.render(React.createElement(Home), document.getElementById('app'));
or the JSX counterpart
ReactDOM.render(<Home />, document.getElementById('app'));
Also, it would probably be a good idea to put like below.
<script src= "../dist/bundle.js"></script>
at the bottom of the page, rather than in the <head>, so that the script can find <div id="app"></div>.
You have to use render function like
ReactDOM.render(<Home />, document.getElementById('app'));