I am trying to write my first web app with React and Node. I have written some JS and CSS for a component called Banner and rendered it in App.js, but when I save my changes, the change is not reflected on localhost:3000 which just shows a blank page.
The only time I got the localhost:3000 to show anything was when I wrote some text in HTML p tags in the body of the index.html. Then, the browser displayed the text.
I have also tried moving the id=root from index.html to App.js. That did not work.
Please, what am I doing wrong? How do I get the browser to display my components?
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
import React from 'react'
function Banner() {
return (
<div className="banner">
<h1> Some Text that goes on Banner </h1>
</div>
)
}
import React from 'react';
import './App.css';
import Banner from './components/Banner';
import Exhibit from './components/Exhibit'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
class App extends Component {
render() {
return (
<>
<Router>
<Banner />
</Router>
</>
);
}
}
.banner {
height: 30vh;
width: 100%;
position: fixed;
align-items: center;
background-color: #b300b3;
}
.banner > h1 {
color: #FFF;
font-size: 10px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Title of Web App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Try to be more minimal in this level.
Only use banner component in App.js file.
delete router and <> </> in App.js file.
replace class App extends Component with class App extends React.Component
or add import { Component } from 'react'
Related
I am trying to integrate Paypal Payouts to my React app. However, I am stuck at the AAC part where I generate a component to let the user connect.
I tried to either load the script in index.html or to load it using the paypal-checkout package.
In the first case, I get told that paypal isn't defined and in the second case, I get told that I can't get the property driver from undefined.
Here is my code and my index.html.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
const AACComponent = paypal.PayoutsAAC.driver('react', {
React,
ReactDOM
});
export class Affiliation extends Component {
render () {
const { t } = this.props;
const { data, candidates, hirees } = this.state;
return (
<Screen type="background-white" loading={this.state.loading} title={this.props.t('pages:affiliation')}>
<div className="container tw-space-y-3">
<div className="row">
<div className="col-lg-6 tw-mx-auto">
<div className="tw-card">
<h2 className="tw-text-xl tw-font-bold">{t('affiliationHired')}</h2>
<AACComponent
clientId={process.env.REACT_APP_PAYPAL_CLIENT_ID}
merchantId={process.env.REACT_APP_PAYPAL_MERCHANT_ID}
env={process.env.REACT_APP_PAYPAL_ENV}
pageType="login"
onLogin={() => {}} />
</div>
</div>
</div>
</div>
</Screen>
);
}
}
Affiliation.propTypes = {
t: PropTypes.func.isRequired
};
export default withRouter(withTranslation('common')(Affiliation));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
</head>
<script src="https://www.paypalobjects.com/payouts/js/payouts_aac.js"></script>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I removed the unecessary code to not clutter my code.
Any idea?
I have a component Layout which I used to style the layout of my app and that's where I introduced react-helmet
The component is like this
import React from 'react';
import { Global, css } from '#emotion/core';
import Helmet from 'react-helmet';
import Header from '../components/header';
const Layout = ({ children }) => (
<>
<Global
styles={css`
// some CSS style
/>
<Helmet>
<html lang="en" />
<title>title</title>
<meta name="description" content="site description" />
</Helmet>
<Header />
<main
css={css`
// some css
`}
>
{children}
</main>
</>
);
export default Layout;
After I added <Helmet />, I have this error poppin up. And if I removed <Helmet /> from my component, the error would be gone. apparently I didn't forgot to export my Layout component so I really have no idea where this came from.
You need to use named import with react-helmet.
import {Helmet} from "react-helmet";
Docs: https://github.com/nfl/react-helmet#example
I can't even run a simple code! I've searched through the internet and tried almost everything!
I installed "npm" and included " type="text/babel" " in my "index.html" in the script tag.
It's just not working!
Here is the code that doesn't work:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<h1>
Hello React
</h1>
)
}
}
export default App;
Here is the code that works and has a result:
ReactDOM.render(<h1>wtf</h1>,document.getElementById("App"))
If you want to separate files, you should import your component and render it after:
//App.js
import React, { Component } from 'react';
export default class App extends Component {
render() {
return <h1>Hello React</h1>
}
}
and
// index.js
import ReactDOM from 'react-dom';
import App from './App'; //means that App.js in the same folder as index.js
ReactDOM.render(<App />,document.getElementById("App"))
or just simply combine your files:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>Hello React</h1>
}
}
ReactDOM.render(<App />,document.getElementById("App"));
An alternative is to use a CDN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>YourApp</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<style>
#container
{
padding: 50px;
background-color: #FFF;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
class YourApp extends React.Component {
render() {
return (
<h1>hello react</h1>
);
}
}
ReactDOM.render(
<div>
<YourApp/>
</div>,
document.querySelector("#container"));
</script>
</body>
</html>
I recommend checking this out:
https://www.kirupa.com/react/
I have set Link and Route path with my header.js file. But with the laravel and react app, when i run npm run dev , it runs successfully. After that, when i run localhost:8000, the page only loading not showing any content. when i remove the
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
from script, it runs successfully, but with above code, it's only loading the page.
Header.js
import React, { Component } from 'react';
import{ BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './Index';
import About from './about';
export default class header extends Component {
render() {
return (
<Router>
<div>
<Link to ="/">Home</Link>
<Link to ="/about">About Us</Link>
<Route exact path ="/" component={Index} />
<Route exact path ="/about" component={About} />
</div>
</Router>
);
}
}
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Index extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
Welcome.blade.php
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css" />
<title>Laravel</title>
</head>
<body>
<div id="app">
<h1>Hello... This is example</h1>
</div>
<script src="js/app.js"></script>
</body>
</html>
If my understanding is correct then I guess you can't call Index.js from Index.js.
What I mean to say is that you are trying to render the Index.js infintely.
Index.js is your root component. It has <Header/> which calls Index.js when the route matches the path /. Then it again calls Index.jswhich has <Header/> and so on.
What you can do instead is define a new Home component and create a new index.js to save yourself from the Infinite loop.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Header from './header';
import Footer from './footer';
export default class Home extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<Header />
<div className="card">
<h1>This is home page</h1>
</div>
<Footer />
</div>
</div>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Home />, document.getElementById('app'));
}
You have an infinite recursive loop:
Index renders the component Header.
Header renders the component <Route exact path ="/" component={Index} />
This Route renders Index when you are on /
<Route/> works by rendering the component prop when you are on the path prop.
I was wondering if its possible to render an entire react app in a non react web page. I tried many links where it suggested code snippets as follows which shows to render just a component,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root">
<h1>POC</h1>
</body>
<script type="text/babel">
class Application extends React.Component {
render() {
//debugger
console.log('hi there')
return (
<div>
<h1>hello world</h1>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('root'));
</script>
</html>
But i want to know is its possible to have my react app in the same path like,
- htdocs
- plainhtmljswebapp.html
- react-app-folder
- index.html
- main.js
- src
- components
- actions
- reducers
- package.json
- webpack.config.js
as my web app and load/ import it and pass it some values as props if its possible. I have never done such integration before and any help on its feasibility/ approach would be much appreciated.
Thanks alot
See comments on question for more context on this answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="/bundle.js"></script>
</head>
<body>
<div id="content1">
</div>
<script type="text/javascript">
mount("content1", "testing")
</script>
<div id="content2">
</div>
<script type="text/javascript">
mount("content2", "more testing")
</script>
</body>
</html>
index.js
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { App } from './app'
window.mount = function(id, customText) {
const store = createStore((state = {}) => state)
render(
<Provider store={store}>
<App text={customText} />
</Provider>,
document.getElementById(id)
)
}
app.js
import React from 'react'
export const App = ({ text }) => {
return (
<div>{text}</div>
)
}
This only has redux integration in so far as it creates a store and wraps the app in a Provider, but I can't see any reason why it wont work like normal from there.
I tested this using webpack to bundle and webpack-dev-server to serve.