I'm new to react, and I am having trouble with multiple components.
This is the error I get Uncaught ReferenceError: require is not defined
Code that I'm using.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="js/layout.js"></script>
</body>
</html>
layout.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./header";
class Layout extends React.Component {
render() {
return(
<div>
<Header/>
</div>
);
}
}
const app = document.getElementById("app");
ReactDOM.render(<Layout/>, app);
And header.js
import React from "react";
import ReactDOM from "react-dom";
export default class Header extends React.Component {
render() {
return(
<h1>Hello header</h1>
);
}
}
Babel handles only the transpilation part (i.e. converts es2015 and jsx syntax into valid ES5). But you still need to use either a bundler (webpack, browserify) or a module loader (systemjs or jspm) to load modules.
Here is an example using SystemJS. Example.
Configure systemjs loader to load libs from cdn
System.config({
transpiler: 'babel',
baseURL: '',
map: {
babel: 'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js',
react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js',
'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js'
}
});
// load application
System.import('script.js');
Import local files
// inside script.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./header.js"; //note extension
class Layout extends React.Component {
Related
I have a Typescript react component/library
// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Image, Shimmer } from 'react-shimmer';
function App() {
return (
<div>
<Image
src="https://source.unsplash.com/random/800x600"
fallback={<Shimmer width={800} height={600} />}
/>
</div>
);
}
const render = (id: string) => ReactDOM.render(<App />, document.getElementById(id));
export default render;
I want it to be compiled to UMD format, to be consumed in HTML
// index.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
<script type="text/javascript" src="./compiled.js">
render('app');
</script>
</body>
</html>
Preferably I want to use a modern bundler like tsup. Because webpack just scares me.
Is this possible?
I'd like to use react-geosuggest in my app,
in the readme I see that I must include the Google Maps Places API in the :
<!DOCTYPE html>
<html>
<head>
…
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
</head>
<body>
…
</body>
</html>
Which should mean to import it in the index.html file. Is there any ways I could avoid having the apikey in my index.html file?
I tried for example:
import React from "react";
import PropTypes from "prop-types";
import Geosuggest from "react-geosuggest";
import { GOOGLE_MAPS_KEY } from "../../libs/apiKeys";
const LocationPicker = props =>
<div>
<script src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_KEY}&libraries=places`} />
<Geosuggest />
</div>;
LocationPicker.propTypes = {};
export default LocationPicker;
which obviously doesn't work.
Any ideas?
thanks
new to React and trying to pass a component from one js file to another but keep getting this error
TypeError: Cannot assign to read only property 'exports' of object '#'
I have index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as AnswerBox from './components/AnswerBox.js';
ReactDOM.render(
<AnswerBox />,
document.getElementById('root')
);
then I have AnswerBox.js in the components folder
import React from 'react';
import ReactDOM from 'react-dom';
import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';
class AnswerBox extends React.Component{
render(){
return(
<div>
<div className="answerBox"></div>
<GetAnswerButton />
</div>
)
}
}
module.exports = AnswerBox;
then in a sub folder of components called subcomponents I have another files called GetAnswerButton.js
import React from 'react';
import ReactDOM from 'react-dom';
class GetAnswerButton extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<button>Click Me</button>
</div>
)
}
}
module.exports = GetAnswerButton;
I have index.html at the same level as index.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Landing Page</title>
</head>
<body>
<div id="root"></div>
</body>
and index.css also at the same folder level as index.js
.answerBox {
border: 1px solid red;
height:30px;
width:75px;
}
It all works if I have all the js code in index.js but as soon as I split it into component js files I get this error.
TypeError: Cannot assign to read only property 'exports' of object '#'
I know its probably something obvious.
cheers
You can't mix import and module.exports
You should use export default instead of module.exports
Update
module.exports = GetAnswerButton;
to
export default GetAnswerButton;
The way that you're importing is also incorrect. After you update to use export default update these import from
import * as GetAnswerButton from './subcomponents/GetAnswerButton.js';
to
import GetAnswerButton from './subcomponents/GetAnswerButton.js';
Box
React from 'react';
import GetAnswerButton from './subcomponents/GetAnswerButton';
export default class AnswerBox extends React.Component{
render(){
return(
<div>
<div className="answerBox"></div>
<GetAnswerButton />
</div>
)
}
}
Button
import React from 'react';
export default class GetAnswerButton extends React.Component {
constructor() {
super()
}
render() {
return (
<div>
<button>Click Me</button>
</div>
)
}
}
this should work.
if you dont want to export the class in declaration
try to export with
export default AnswerBox;
I wonder if it is possible to pass an argument to a react entry point.
My entry point looks like this:
module.exports = {
entry: "./js/components/Application.js",
output: {
path: "./dist",
filename: "bundle.js"
},
// ...
}
My Application.js:
import React from 'react';
import ReactDOM from 'react-dom';
import AnotherComponent from './AnotherComponent';
ReactDOM.render(<AnotherComponent />, document.getElementById('content'));
Not I bundle my application with webpack and include this bundle in another application. This application provides a div with id "content":
<body>
<div id="content"></div>
<script src="bundle.js" />
</body>
I know that I can do something like
<script src="bundle.js" myargument="somevalue" />
but how can I get this value for passing it to the react component AnotherComponent as a property?
What about
<script id="bundle" src="bundle.js" myargument="somevalue" />
and then
const myScript = document.getElementById('bundle');
ReactDOM.render(<AnotherComponent
myArgument = {myScript.getAttribute('myargument')}
/>, document.getElementById('content')
);
In ReactJS file src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
window.MyReactApp = {
init: (selector, myData) => {
selector = selector.substring(1);
const renderComponent = (<homeComponent mydata={myData} />);
ReactDOM.render(renderComponent, document.getElementById(selector));
},
};
Now load the ReactJs App where you want to load.
<script type="text/javascript" src="bundle.min.js"></script>
<div id="load-myreactapp"></div>
<script type="text/javascript">
const myData = {};
MyReactApp.init('#load-myreactapp', myData);
</script>
Development electron app.
use zhe ES6 code in html is success.
but write ES6 code in alone js fail is error.
package.json:
{
"name": "app",
"version": "0.1.0",
"main": "main.js",
"dependencies": {
"react": "^15.3.0",
"react-dom": "^15.3.0"
}
}
index.html in electron is success
<head>
<meta charset="UTF-8">
<title>STW</title>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="container">
</div>
<script type="text/babel">
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
// import FF from'./Foo.js';
class F1 extends Component{
render(){
return <div>This is React component</div>
}
};
ReactDOM.render(<F1/>,document.getElementById("container"))
</script>
</body>
</html>
when i use import FF from'./Foo.js';it's error and show "Unexpected token import".
Foo.js
import React from 'react'
export default class Foo extends React.Component{
render(){
return <div>This is React component</div>
}
}
electron is latest version.
ES6 code in html <script type="text/babel"> is success,
How can i use zhe ES6 code in alone file ? thanks =.=
As for my knowledge, support for ES6 modules first needs to land in V8. For now you have to use:
const ReactDOM = require('react-dom')