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)
Related
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
As you can see in the below next.js code I am trying to defer load the render blocking css by giving my main.css file path in href attribute but I am struggling to do it in next.js. What I want is after loading the critical css in _document.js tag under tag, to load the non-critical css which is not above the fold.
_app.js
import App from "next/app"
import Head from "next/head"
import React from "react"
import { observer, Provider } from 'mobx-react'
import Layout from "../components/Layout"
import allStores from '../store'
export default class MyApp extends App {
componentDidMount = () => {
};
render() {
const { Component, pageProps, header, footer, } = this.props
return (
<>
<Head >
<link rel="preload" href="path/to/main.css" as="style"
onLoad="this.onload=null;this.rel='stylesheet'"></link>
</Head>
<Provider {...allStores}>
<Layout header={header} footer={footer}>
<Component {...pageProps} />
</Layout>
</Provider>
</>
)
}
}
as #chrishrtmn said at _document.js you can do like this:
import Document, { Main, NextScript } from 'next/document';
import { CriticalCss } from '../components/CriticalCss';
class NextDocument extends Document {
render() {
return (
<html>
<CriticalCssHead />
<body>
<Main />
<NextScript />
</body>
</html>
);
}
}
export default NextDocument;
as in your component you can put the CSS:
import { readFileSync } from 'fs';
import { join } from 'path';
export interface Props {
assetPrefix?: string;
file: string;
nonce?: string;
}
export const InlineStyle: React.FC<Props> = ({ assetPrefix, file, nonce }) => {
const cssPath = join(process.cwd(), '.next', file);
const cssSource = readFileSync(cssPath, 'utf-8');
const html = { __html: cssSource };
const id = `${assetPrefix}/_next/${file}`;
return <style dangerouslySetInnerHTML={html} data-href={id} nonce={nonce} />;
};
I got the source for this code from the current repo:
https://github.com/JamieMason/nextjs-typescript-tailwind-critical-css
have a look here
https://github.com/JamieMason/nextjs-typescript-tailwind-critical-css/tree/master/components/CriticalCssHead
Here's my current favorite solution, sourced from here:
https://github.com/facebook/react/issues/12014#issuecomment-434534770
It results in two empty <script></script> tags in your head, but works.
<script
dangerouslySetInnerHTML={{
__html: `</script><link rel='preload' href='style.css' as='style' onload="this.onload=null;this.rel='stylesheet'"/><script>`,
}}
/>
The Next.js team indicated that a similar strategy is possible with their component, but in practice, I was getting compilation errors:
https://github.com/vercel/next.js/issues/8478#issuecomment-524332188
The error I received was:
Error: Can only set one of children or props.dangerouslySetInnerHTML.
Might have to move the <Head> into _document.js instead of _app.js according to the documentation.
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
I'm trying to incorporate this map into an existing grails/react project.
Updated code:
index.js
ReactDOM.render((
<Router history = {browserHistory}>
<Route path="/" component={CreateAccount}/>
<Route path="/menu" component={Menus}/>
<Route path="/discover" component={DiscoverApp}/>
<Route path="/NorthAmerica" component={northAmerica}/>
<Route path="/SouthAmerica" component={southAmerica}/>
<Route path="/Europe" component={europe}/>
<Route path="/Asia" component={asia}/>
<Route path="/Africa" component={africa}/>
<Route path="/Australia" component={australia}/>
</Router>
), document.getElementById('root'));
index.gsp
<head>
<title>Food App</title>
<link rel="stylesheet" href="${resource(dir: 'css', file: 'text.css')}" type = "text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'jquery-jvectormap-2.0.3.css')}" type = "text/css" media="screen">
<javascript src="/js/jquery-3.1.1.js" />
<javascript src="jquery-jvectormap-2.0.3.min.js" />
<javascript src="jquery-jvectormap-world-mill-en.mins.js" />
</head>
<body>
<div id="root" align="left"></div>
<br/>
<asset:javascript src="bundle.js"/>
</body>
</html>
and
import React, { Component } from 'react';
import {Link} from 'react-router';
import $ from 'jquery';
import ReactDOM from 'react-dom';
class NorthAmerica extends Component {
componentDidMount() {
const el = ReactDOM.findDOMNode(this.display);
$(el).vectorMap({map: 'world_mill_en'});
}
render(){
return(
<div>
<h1>NORTH AMERICA MAP PLACE-HOLDER</h1>
<li><Link to="/discover">DISCOVER</Link></li>
<div
ref={display => this.display = display}
/>
</div>
)
}
}
export class northAmerica extends React.Component{
render(){
return(<NorthAmerica/>);
}
}
Any suggestions? Thanks!
Updated:
Page loads now... but where the map should be is just a blank div. I get this error in the console:
Uncaught TypeError: (0 , _jquery2.default)(...).vectorMap is not a function
at NorthAmerica.componentDidMount (bundle.js?compile=false:12781)
at bundle.js?compile=false:26803
at measureLifeCyclePerf (bundle.js?compile=false:26613)
at bundle.js?compile=false:26802
at CallbackQueue.notifyAll (bundle.js?compile=false:9088)
at ReactReconcileTransaction.close (bundle.js?compile=false:31708)
at ReactReconcileTransaction.closeAll (bundle.js?compile=false:5241)
at ReactReconcileTransaction.perform (bundle.js?compile=false:5188)
at ReactUpdatesFlushTransaction.perform (bundle.js?compile=false:5175)
at ReactUpdatesFlushTransaction.perform (bundle.js?compile=false:1438)
refs in React is required to grab the underlying DOM inside the React component. Once that is available in the component, third party library functions like vectorMap can be called on the jQuery element. Here is an example of the React component assuming all appropriate dependent libraries are available to render DOM.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
class NorthAmerica extends Component {
componentDidMount() {
const el = ReactDOM.findDOMNode(this.display);
$(el).vectorMap({map: 'world_mill_en'});
}
render() {
return <div>
<h1>World Map</h1>
<div
ref={display => this.display = display}
style={{width: '600px', height: '400px'}}
/>
</div>;
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<NorthAmerica />, document.getElementById('app'));
Here is the example codepen which does not work because I wasn't able to provide an appropriate version of jqueryvectormap library.
An exported and modified version of the above codepen works. git clone then open index.html in browser.
You should use one of React's component lifecycle methods to execute your function rather than trying to render an inline script tag. Try removing the inline script from the render method and adding a componentDidMount method:
componentDidMount() {
$(your jQuery function here);
}
Assuming you're using webpack, you'll probably want to declare jquery as an external, but the above should at least get things up and running.
Instead of:
let NorthAmerica = React.createClass({
You can export this straight away:
export default class NorthAmerica extends React.Component {
and then delete your last code block:
export class northAmerica extends React.Component{
render(){
return(<NorthAmerica/>);
}
}
The reason you can't see anything is because your NorthAmerica component is not added to the DOM yet. Try:
ReactDOM.render(
<NorthAmerica />,
document.getElementById('root')
);
Where 'root' is replaced with the name of a div in your index.gsp which is the container for all react content, refer to enter link description here
For this to work you will need an extra import:
import ReactDOM from 'react-dom';
Export is only required if you are using NorthAmerica from another file. If you are not doing that yet then it is not required, see here
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 {