I am following React tutorial.
I have this component.
export default function Header(){
return (<header>
<nav className="nav-bar">
<img src="../img/react.png" className="logo" ></img>
<ul className="nav-items">
<li className="nav-item">Pricing</li>
<li className="nav-item">About</li>
<li className="nav-item">Contact</li>
</ul>
</nav>
</header>)
}
And I am trying to import it in this file
import Header from "./Header";
const rootEl = document.getElementById("root");
function Footer(){
return(
<footer className="footer">
<p># 2022 LastName developed. All rights reserved</p>
</footer>
)
}
function MainContent(){
return(
<div>
<h2>Reasons I want to learn React</h2>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
)
}
function CustomPage()
{
return (
<div>
<MainContent/>
<Footer/>
</div>
)
}
ReactDOM.render(<CustomPage/>, rootEl);
I am using CDNs to load react react-dom and babel
When I add import Header from "./Header"; console shows this error:
Uncaught ReferenceError: require is not defined
at <anonymous>:3:15
at eve (transformScriptTags.ts:99:10)
at n (transformScriptTags.ts:173:9)
at s (transformScriptTags.ts:204:11)
at t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)
Could it be a problem with CDN links or its something completely eslse?
Related
Below are my Header.js component and App.js respectively,
// Header.js
import React from 'react'
import { Link } from 'react-router-dom'
const Header = () => {
return (
<div className='header'>
<nav>
<div className= 'logo'>
<h1>
Damien
</h1>
</div>
<ul className='ul-items'>
<li>
<Link to= '#'>Home
</Link>
</li>
<li>
<Link to= '#'>Projects
</Link>
</li>
<li>
<Link to= '#'>About
</Link>
</li>
<li>
<Link to= '#'>Contact
</Link>
</li>
<li>
<Link to= '#'>Services
</Link>
</li>
</ul>
</nav>
</div>
)
}
export default Header;
//App.js
```
import './App.css';
const App = () => {
return (
<div className="App">
<Header/>
</div>
);
}
export default App;
```
Idk what else to try, Ive looked on youtube for tutorials and googled my problem and have found nothing
I think it is beacause you use <Link> from react-router-dom but you didn't set a Router
https://v5.reactrouter.com/web/guides/quick-start/1st-example-basic-routing
you must checkout your "scripts section" in your package.json document
also checkout if you are in the right Working Directory for execute the script "start" place in the project folder
App.js
import logo from './logo.svg';
import './App.css';
import Card from './components/Card';
import Accrodion from './components/Accrodion';
function App() {
return (
<>
<div className="container">
<Card />
<Accrodion />
</div>
</>
);
}
export default App;
Card.js
import React from 'react'
export default function Card() {
return (
<div className="card" style="width: 18rem;">
<img src="..." className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul className="list-group list-group-flush">
<li className="list-group-item">An item</li>
<li className="list-group-item">A second item</li>
<li className="list-group-item">A third item</li>
</ul>
<div className="card-body">
Card link
Another link
</div>
</div>
)
}
Everything works fine when I comment Card component in app.js file, but when I try to use it, nothing is on the webpage. When I inspect the page the root div is empty.
I can't figure out what is the problem here. There is no error in any code file.
I want to change my navbar title to log out after I logged in, however, my auth check function is in my login component class, how can I link them up as this nav is not a component itself.
import React from 'react';
import { Link } from 'react-router-dom';
const Header = () => (
<nav className="navbar navbar-dark bg-dark navbar-expand-lg">
<Link to="/" className="navbar-brand">Home</Link>
<div className="collpase navbar-collapse">
<ul className="navbar-nav mr-auto">
<li className="navbar-item">
<Link to="/login" className="nav-link">{}</Link>
</li>
<li className="navbar-item">
<Link to="/Signup" className="nav-link">Sign up</Link>
</li>
</ul>
</div>
</nav>
);
export default Header;
you have to put the state that holds the logging data in high place so you could pass the data to all the components below it.
redux makes it much easier.
I am trying to add the Auth0 button to a navbar but the jsx linter does not like it when I add javascript. I need the conditional so it shows up for non registered users. I have tried importing it from another component ion React as well as adding it directly in the jsx with no luck. I keep getting isAuthenticated' is not defined and loginWithRedirect' is not defined. Not sure what to do next. Thanks.
import $ from 'jquery'
import '../styles/nav.scss'
import button from '../components/GoogleButton/Button.jsx'
import { auth0 } from './auth0/react-auth0-spa'
export default class NavBar extends Component {
componentDidMount() {
$(document).ready(function() {
$('.mobile-button a').click(function(e) {
$(this)
.parent()
.parent()
.toggleClass('open')
$(this).html($(this).html() === 'Close Menu' ? 'Menu' : 'Close Menu')
e.preventDefault()
})
})
}
render() {
return (
<div>
<header class='header'>
<div class='container'>
<h1 class='site-title'>Super Cool Web App!</h1>
<span class='site-tagline'>Because Andy made this!</span>
</div>
</header>
<nav class='main-nav'>
<div class='container'>
<ul>
<li class='mobile-button'>
<a href='/'>Menu</a>
</li>
<li>
<a href='/'>About</a>
</li>
<li>
{/* this is where the problem lies */}
{!isAuthenticated && (
<button onClick={() => loginWithRedirect({})}>Log in</button>
)}
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
<li>
<a href='/'>Methods</a>
</li>
<li>
<a href='/'>Results</a>
</li>
<li>
<a href='/'>Contact</a>
</li>
</ul>
</div>
</nav>
</div>
)
}
}```
authO is for initializing you need to use useAuthO to access the api elsewhere in your project.
Change your import statement to:
import { useAuth0 } from "../react-auth0-spa";
Then deconstruct AuthO methods isAuthenticated and loginWithRedirect.
Right under render and before your return put:
const {isAuthenticated , loginWithRedirect} = useAuth0
https://auth0.com/docs/quickstart/spa/react#create-the-navbar-component
Hi just started to learn basics of React and have problem with rendering my component in another component.
<Header> component imported in index.js is not showing.
Index.js:
import React, {Component} from 'react';
import { render } from 'react-dom';
import Header from './components/Header';
import Home from './components/Home';
class App extends Component{
render(){
return(
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<div className="col-xs-10 col-xs-offset-1">
<Header />
</div>
</div>
</div>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
</div>
</div>
</div>
);
}
}
render(<App />, window.document.getElementById('container'));
I have this error:
Error: Minified React error #130; visit http://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Header.js component also:
import React from "react";
export class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<ul className="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
);
}
}
When you open up the URL it says:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
Which means:
you forgot to import Header in a file
you import it incorrect way,
Header is not exported in a file
all of the above
After your edit:
You need to fix export (like I wrote above) to:
export default class Header extends React.Component {
you miss the default.
import React from "react";
export default class Header extends React.Component {
render() {
return (
<nav className="navbar navbar-default">
<div className="container">
<div className="navbar-header">
<ul className="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
);
}
}
Use the default keyword while exporting the Header.js
it'll start working fine :)