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.
Related
My build was working fine yesterday, now when I run a build and run npm start, I get a client side error that crashes the app.
The only way to fix it is to remove next/head.
I have stripped down my app to one index.jsx file with only the following:
import Head from "next/head";
function IndexPage() {
return (
<div>
<Head>
<title>My page title</title>
</Head>
<p>Hello world!</p>
</div>
);
}
export default IndexPage;
_document.js
import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
import Header from "../components/Header";
export default function Document() {
return (
<Html lang="en">
<body class="onepage">
{/* <Header /> */}
<Head />
<Main />
<NextScript />
{/* <script src="/scripts/plugins.js"></script>
<script src="/scripts/theme.js"></script> */}
</body>
</Html>
);
}
app.js
import "../styles/style.css";
import "../styles/plugins.css";
import Script from "next/script";
import Layout from "#/components/Layout/Layout";
export default function App({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
<Script src="/scripts/plugins.js" />
<Script strategy="lazyOnload" src="/scripts/theme.js" />
</Layout>
);
}
When I open localhost:3000 on the build, it is infinitely spamming the same console error:
TypeError: Cannot read properties of null (reading 'content')
What could possibly be going on?
Also, I tried deleting my .nuxt,node_modules folders and package-lock.json, still nothing.
I am pretty new to React and I am trying to understand why I have a blank browser
my App.js is:
import React from 'react';
import TodoList from './TodoList'
function App() {
return (
<TodoList />
)
}
my Index.js is:
ReactDOM.render(<App />, document.getElementById('root'));
My Todolist (Project name)
import React from 'react'
export default function TodoList() {
return (
<div>
Hello World!
</div>
)
}
On my other project, I have Index.css as `
html, body {
margin: 0;
padding: 0;
}
Index.html as
<html>
<head>
<link rel="stylesheet" href="index.css">
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
and index.js as ReactDOM.render(<h1>Hello, everyone!</h1>, document.getElementById("root"))
all of these show a blank screen when ran.blank screen
I have tried to do some research, added "homepage": ".", to Package.json file and even tried to downgrade react script from 5.0 to 4.0 nothing worked.
export default App;
Add this at the end of app.js file
ohter than that i am not seeing any problem
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'
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 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/