How to render different components in different placeholders in reactjs? - javascript

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>

Related

How to fix the white screen in browser during react build?

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

Import/Export in VSCode Javascript for React

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

A react component is not rendered even after calling it through ReactDOM.render( ) method

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>

my basic React hello world isn't working.

I am trying to run the html file below and i cannot understand why it wont work. I pretty sure I have all the components. The only thing that gets displayed is the "Single Page Application" h1. I cannot display the Hello world h1.
<html>
<head>
<title>Lab 5 To Do list</title>
<!--For React -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Single Page Application</h1>
<div id = "MyContainer"></div>
</body>
<script type = "text/Babel">
const hello = <h1>Hello world</h1>;
ReactDOM.render( {hello} , document.getElementById('MyContainer') );
</script>
</html>
Try to implement a simple functional component:
const hello = props => <h1>Hello world</h1>;
There are a few problems with your code. For one thing,
const hello = <h1>Hello world</h1>;
is not a valid React component. Components are case sensitive (Hello), and for this case, must be designed as a function.
Additionally, when you are calling ReactDOM.render(), you need to treat your component as if it were an html element, i.e. <Hello />.
This code is correct:
<html>
<head>
<title>Lab 5 To Do list</title>
<!--For React -->
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<h1>Single Page Application</h1>
<div id = "MyContainer"></div>
</body>
<script type = "text/babel">
const Hello = props => (
<h1>Hello world</h1>
);
ReactDOM.render(
<Hello />,
document.getElementById('MyContainer')
);
</script>
</html>
You should check out the tutorial on the React homepage, it is very helpful.

Render a react app in a non react web page

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.

Categories