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
Related
I built a normal HTML/JS/CSS website and am Adding a widget( a code form made with react ) that I compile and export as a js and css to the index.html page by doing so:
<head>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app"></div>
<link href="app.css" rel="stylesheet"/>
<script src="app.js"></script>
</body>
And I"m compiling the app with:
//yarn parcel , or npm run parcel
"parcel": "parcel build src/index.js --no-minify --no-source-maps -d widget && cp build/static/css/*.css widget/index.css",
React js script that get's the component and then add it to the element with id.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const app = document.getElementById('app')
ReactDOM.render(
(<React.StrictMode>
<App />
</React.StrictMode>),
app
);
After compiling I tried to make a secondpage serving it in another route, like blog.html and add the component too as I did with head and body, but the page remains blank. What could it be ? ( there are no logs in the console).
//the first html served
files_routes.get('/', (request, response) => {
response.sendFile('index.html', { root: '../build' })
});
//the second html which doesn't work
files_routes.get('/blog', (request, response) => {
response.sendFile('blog.html', { root: '../build' })
});
I couldn't replicate the issue in the newer code base. So I'll be closing this question...
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>
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 use react-bootstrap in react and installed it by using command
npm install react-bootstrap --save
but it's not working, also tried to add external react-bootstrap.js but still getting an error
error 'ReactBootstrap' is not defined no-undef
✖ 1 problem (1 error, 0 warnings)
what am I doing wrong in this code. This is HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.27.3/react-bootstrap.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is JSX file.
import React, { Component } from 'react';
import logo from './logo.svg';
class Hello extends Component{
render()
{
let { Button} = ReactBootstrap.Button;
return(
<div>
<img src={logo} className="App-logo" alt="react-logo"/>
<h1> Trying react</h1>
<Button>Noob</Button>
</div>
);
}
}
export default Hello;
and here the rendering code in other file.
import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';
import './index.css';
ReactDOM.render(
<Hello />,
document.getElementById('root')
);
the same code is working fine , If I remove
let { Button} = ReactBootstrap.Button;
and
<Button>Noob</Button>
from JSX file.
You will need to import that component from react-bootstrap like - var Alert = require('react-bootstrap').Alert;
For more information please take a look at this - https://react-bootstrap.github.io/getting-started.html
I am trying to use http://www.material-ui.com/ for front end design. I am trying to execute the first example within the getting started tutorial. I have following html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>examples</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script>
</body>
</html>
and following App.js and MyAwesomeReactComponent.js files as defined in ( http://www.material-ui.com/#/get-started/usage )
App.js :
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')
);
MyAwesomeReactComponent.js:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);
export default MyAwesomeReactComponent;
But when I run the index file, I can't see any output.
The problem is here since you are implementing ES6 code, you need to use a javascript compiler like babel to transform your ES6 code to ES5 which is current javascript standard that is supported by browsers.
It would be a good practice to use babel with webpack as a loader.
Following React's get started page's instruction is a good starting point. I'd suggest reading the instructions carefully.
Finally, if you want to use pure ES6 without transforming, the compatibility table is available here: https://kangax.github.io/compat-table/es6/