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
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 just want to link the files but it's not working. I am not sure what I am doing wrong. Could you please let me know. This is my first day using react. So, please forgive. I am following this gatsby tutorial.
gatsbyjs.com/docs/tutorial/part-2/
js
import * as React from 'react'
import { Link } from 'gatsby'
const IndexPage = () => {
return (
<main>
<title>Home Page</title>
<h1>Welcome to my Gatsby site!</h1>
<Link to="/about">About</Link>
<p>I'm making this by following the Gatsby Tutorial.</p>
</main>
)
}
export default IndexPage
js second page
import * as React from 'react'
import { Link } from 'gatsby'
const AboutPage = () => {
return (
<main>
<title>About Me</title>
<h1>About Me</h1>
<Link to="/">Back to Home</Link>
<p>Hi there! I'm the proud creator of this site, which I built with Gatsby.</p>
</main>
)
}
export default AboutPage
Try import React from 'react' instead
I'm not sure what I'm doing wrong here. I keep getting a 404 message. Here is my code.
index.html:
<html>
<head>
<title>Drones</title>
<script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/es6-module-loader/dist/es6-module-loader-dev.js"></script>
</head>
<body>
<script>
System.import('src/app.js');
</script>
</body>
</html>
app.js:
import {Car} from './car.js';
import {Drone} from './drones.js';
let c = new Car();
let d = new Drone();
console.log(c);
console.log(d);
Vehicle.js
export class Vehicle {
}
drones.js
import Vehicle from 'vehicle.js';
export class Drone extends Vehicle {
}
car.js
import {Vehicle} from 'vehicle.js';
export class Car extends Vehicle {
}
Import the app.js with a <script type=“module“ src=“src/app.js“></script> in the html and make sure you declare the relative path to the js files you import
Based on your comments, if car.js and drones.js in a subdirectory of the directory app.js resides in, then you'll want to change your imports to either:
// use relative pathing
import {Car} from './classes/car.js';
import {Drone} from './classes/drones.js';
or to:
// use absolute pathing
import {Car} from 'src/classes/car.js';
import {Drone} from 'src/classes/drones.js';
This is because the ./ part of the path points to whatever directory the referencing file resides in (i.e., ./ in src/app.js points to src/.
I'm new to both JavaScript and React.js and I'm having trouble with imports.
I have the following index.js file:
var Main = React.createClass ({
render: function() {
return (
<div>test</div>
);
}
});
ReactDOM.render(
<Main/>,
document.getElementById('content')
);
the following pub.js file:
export default class Pub extends React.Component {
render() {
return <div>test</div> ;
}
};
The pub.js file and the index.js file are contained in the same folder -> /scripts. I also have following index.html file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Application</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://unpkg.com/react#15.3.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="https://unpkg.com/jquery#3.1.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/remarkable#1.7.1/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/index.js"></script>
</body>
</html>
This works perfectly fine, i.e. loads a page that reads 'test'
But if I simply import the Pub class(without even using it) as below, the app breaks and nothing is rendered on the screen.
import Pub from './pub'
var Main = React.createClass ({
render: function() {
return (
<div>test</div>
);
}
});
ReactDOM.render(
<Main/>,
document.getElementById('content')
);
Additionally, in case the error is caused by an unused import, I've also tried the following :
ReactDOM.render(
<Pub/>,
document.getElementById('content')
);
If anyone could shed some light on the issue, or even better, point me towards a good tool for syntax checking React.js code I'd appreciate it.
Im using webpack for building/transpiling/serving my code.
i've tried your sample and it works in such setup:
i created Pub.jsx component and exported in such way:
import React from 'react';
class Pub extends React.Component {
render() {
return <div>ĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄĄ</div>;
}
}
export default Pub;
then i imported Pub component to another component in same directory and it is rendered correctly:
import React from 'react';
import Pub from './Pub';
class ExplorableList extends React.Component {
render() {
return (<Pub />);
}
}
export default ExplorableList;
Rendered result in browser: https://www.screencast.com/t/Ojwrq3KNE
My folder structure: https://www.screencast.com/t/9Mi8LLdnv
Check if it works for you (if not, provide exact error you are getting)
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 {