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
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'm following a tutorial on React course.
Currently, I'm trying to make a react info website. I'm trying to import a component of react but it does not load on the 'live' website. (I have a live server extension added on VSCode)
Code:
HTML:
<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>
<div id="root2"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
JavaScript:
import { Header } from './Header'
function Page() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
function MainContent() {
return ( Listed info in HTML format
)}
function Footer() {
return (footer tag in HTML format
)
}
ReactDOM.render(<Page />, document.getElementById("root"))
React/Javascript component:
export function Header() {
return (
<header>
<nav className="nav">
<img className="nav-logo" src="../React info web/images/react_logo.png" />
<ul className="nav-items">
<li>Pricing </li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
I've noticed that when I remove 'import' and '' in 'Javascript'. The website loads up perfectly.
I'm utterly confused and need assistance. I tried combing through the documentation and
still can't figure out what wrong
I am creating a simple voting_app in React while learning from a book.I have an index.html file,all the css files are in respective folders,app1.js file,I've put all those files below.
The issue is when i call a component app1.js through ReactDOM.render() method ,it doesn't show in the browser.
app-1.js
class ProductList extends React.Component {
render() {
return (<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>);
}}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
Index.html
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link rel="stylesheet" href="./semantic.css"/>
<link rel="stylesheet" href="./style.css"/>
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
Your first React Web Application14
</head>
<body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script type="text/babel"
data-plugins="transform-class-properties"
src="./js/app.js"></script><!--Delete the script tag below to get started.-->
<script src="vendor/react.js"></script>
</body>
</html>
The problem might comes from the babel transpilation, try to use the following script declaration (also note that your script file is named app-1.js not app.js)
<script type="text/babel" src="js/app-1.js" data-presets="es2015,react"></script>
As you can see below, your component is displayed correctly
class ProductList extends React.Component {
render() {
return (
<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>
);
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="content"></div>
so i've been learning reactjs for the past week and i had an issue : i wanted to make a website and created a header component ( just a div component ) and a footer component (div also) and i dont know how can i render them both in different placeholders :
<header id="header"></header>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/jsx"></script>
</body>
<footer id="footer"></footer>
i want to render the header component in the header tag and in the same time i want to render the footer component in the footer tag
here's what i tried :
ReactDOM.render(<Header />, document.getElementById("header"));
ReactDOM.render(<Footer />, document.getElementById("footer"));
but it's giving me an Error: Target container is not a DOM element.
so i guess react doesn't allow this multiple rendering, so what's the solution?
You could simply do:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
function App() {
return (
<div className="App">
<header>Header</header>
<footer>Fotter</footer>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
You should place header and footer element inside body element:
<body>
<header id="header"></header>
<div id="root"></div>
<footer id="footer"></footer>
<script src="../src/index.js" type="text/jsx"></script>
</body>
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.