Import/Export in VSCode Javascript for React - javascript

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

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

How to import js file in react using online CDN

Please I am trying to run react app using external CDN, and having issues on the html file saying:
Uncaught ReferenceError: require is not defined index.html:3
This is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<link rel="stylesheet" href="styles/style.css">
<script src='https://unpkg.com/react#16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom#16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom#5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone#6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
import Todo from 'component/Todo.js';
const App = () =>(
<div>
<h1>My Todos</h1>
<Todo />
</div>
)
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>
And this the JavaScript code
function Todo (){
return (<div className="card">
<h2>TITLE</h2>
<div className="actions">
<button className="btn">Delete</button>
</div>
</div>);
}
export default Todo;
you can import external scripts from another server like this :
componentDidMount() {
const script = document.createElement("script");
script.src = "/static/libs/your_script.js";
script.async = true;
script.onload = () => this.scriptLoaded();
document.body.appendChild(script);
}
Then to make sure your file is loaded :
scriptLoaded() {
// your stuff to do!
}
Another way is using react Helmet:
first install it using :
npm install --save react-helmet
then use it like this
<Helmet>
<script src="www.test.ts" />
</Helmet>
note that in this way your script will load in the <head>

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>

How to render different components in different placeholders in reactjs?

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>

30 days of React (Day 4) pdf

I was following the 30 days of react pdf for day 4 and I can't seem to get the css to render at all. I can get the text and image to show.
I tried to basically copy the the helloworld concept but I put everything in one html for now. I also tried day 4 example from github and the index.html doesn't render anything either. In so, if anyone know why, can you please help me out. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/070d6cd5b4d4ec1a3e6892d43e877039a91a9108/timeline.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<title>Time Line App</title>
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component { render() { return (
<div className="notificationsFrame">
<div className="panel">
<Header />
<Content />
</div>
</div>
) } } class Header extends React.Component { render() { return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input type="text" className="searchInput" placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
) } } class Content extends React.Component { render() { return (
<div className="content">
<div className="line"></div>
{/* Timeline item */}
<div className="item">
<div className="avatar">
<img alt='Doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> Doug
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>
{/* ... */}
</div>
) } } var mount = document.querySelector('#app'); ReactDOM.render(
<App />, mount);
</script>
</body>
</html>
Problem solved. So it just needed to add the class = "demo" to the div id = "app"></div>.
So it should like this this: <div id="app" class="demo"></div>. Also I had to download the css locally. Haven't got it work from the link given in the css. There was some minor css difference from the pdf image.

Categories