I keep getting this error message(see 1st image below), when I run my ReactJS app(in the browser, and in the terminal).
Error message in browser:
My problem is that I have exported my App.js file. So I don't understand where the error message is coming from. All of my other files in the app have also been exported correctly.
Code from Code Editor:
Here is my code as text from the App.js file:
import React, { Component } from 'react';
//import 'bootstrap/dist/css/bootstrap.css';
import Navigation from './Components/Navigation';
import SideNavigation from './Components/SideNavigation';
import Backdrop from './Components/Backdrop';
//import DrawerToggleButton from './Components/DrawerToggleButton';
import About from './Components/About';
//import Portfolio from //'./Components/Portfolio';
import Contact from './Components/Contact';
import Footer from './Components/Footer';
import './App.css';
class App extends Component {
render() {
return(
<div>
<Navigation />
<SideNavigation />
<Backdrop />
{/* <DrawerToggleButton /> */}
<About />
{/* <Portfolio /> */}
<Contact />
<Footer />
</div>
)
}
}
export default App;
There are number of reasons you can face this error.
1) If your App Component looks like this export const App = () => ....all your code,
try importing your App component like this import {App} from './App'
2) Try making your App component using a class like export default class App extends React.Component
Hope this helps..
Related
I am using React 18 and very new to it, I get the following error
Compiled with problems:X
ERROR
src\index.js
Line 5:14: 'App' is not defined react/jsx-no-undef
Search for the keywords to learn more about each error.
Following is my code and necessary screenshot
index.js
import React from 'react';
import ReactDOM from "react-dom/client";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />);
App.js
import React from 'react';
import { About, Footer, Header, Skills, Testimonial, Work } from './container';
import { Navbar } from './components';
import './App.scss';
const App = () => (
<div className="app">
<Navbar />
<Header />
<About />
<Work />
<Skills />
<Testimonial />
<Footer />
</div>
);
export default App;
Following is my file structure
Folder structure
Any help would be appreciated
Update: I have done that, and I thought I was missing that. But I get hit with more error in the Console, regarding the App
Following is the screenshot
Error
Good evening to all. I am new to ReactJS and I do not understand how I can load different content per page and at the same time have some fixed sections such as the header ( after click a LINK ).
I have created three components and I render them to the homepage.When I click the about link I would like to load Header & Learn.js component ONLY. How can I manage that?
Thanks a lot!
index.js
import React from "react";
import ReactDOM from "react-dom";
import Header from './components/header'
import MiddleMan from './components/middleman'
import BottomHero from './components/bottomhero'
import './web.css';
function App(){
return (
<React.Fragment>
<Header />
<MiddleMan />
<BottomHero />
</React.Fragment>
);
}
ReactDOM.render(<App />, document.querySelector(".container"));
middleman.js
import React, { Component } from 'react';
import Learn from './learn';
import {
BrowserRouter as Router,
Routes,
Route,
Link,
} from "react-router-dom";
class MiddleMan extends React.Component {
render() {
return (
<div className="middle JV--row JV--a--center JV--spacer">
<Router>
<ul>
<li><Link to="about">ABOUT ME</Link></li>
<li><Link to="project">PROJECTS</Link></li>
<li><Link to="exp">PR. LANGUAGES / TECHNOLOGIES</Link></li>
</ul>
<Routes>
<Route path="about" element={<Learn/>}></Route>
</Routes>
</Router>
</div>
);
}
}
export default MiddleMan;
learn.js
import React from 'react';
import Header from './header'
class Learn extends React.Component {
render(){
return (
<h2>BBBBBBBBBBBBBBBBBB</h2>
);
}
}
export default Learn;
Your app structure is a little weird considering how react-router-dom is meant to be used. I'd suggest you read their documentation!
Now, trying to give a more specific answer, you should wrap your App component in a BrowserRouter. Your routes could be inside a Switch component and to implement this Header behavior that you wish to achieve I suggest you check the answers to this question.
Hi guys I am new to React .Just want to render my component into app component but unable to do so here is my code :
conditionalView.js:
import React, { Component } from 'react'
export class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
export default conditionalView
App.js
import logo from './logo.svg';
import './App.css';
import Bike from './bike';
import Car from './car';
import FnEvent from './FnEvent';
import ClsEvent from './ClsEvent';
import ClsEventBind from './ClsEventBind';
import conditionalView from './conditionalView';
function App() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" />
<Bike name="Caliber 125" />
<Car name="Maruti 800" /> */}
{/* <FnEvent />
<ClsEvent /> */}
{/* <ClsEventBind /> */}
<conditionalView />
</header>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import reactDom from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Basically i want to render content of conditionView.js component into App.js but it is not picking up the content.
In react custom components are supposted to start with capital letters. For standard HTML elements, like div, span use lower case.
Also, no need to export twice from ConditionalView.
You can export at the same time of declaration along with the default keyword.
import React, { Component } from 'react'
export default class conditionalView extends Component {
render() {
return (
<div>
<h2>Conditional View</h2>
</div>
)
}
}
Your component should be PascalCase: ConditionalView, not conditionalView.
This might be happening because you are exporting component more than once
export class conditionalView extends Component {
remove the export keyword from here
React components should always start with a capital letter, so rename <conditionalView /> to <ConditionalView />,
and update the import statement too;
import ConditionalView from './conditionalView';
I am fairly new to React and am having trouble rendering a component in App.js. After much googling I still don't know why I am just getting a blank white page in the browser instead of a printed piece of text as shown in component1.js. Here's my code:
component1.js
import React from 'react';
class component1 extends React.Component {
render() {
return (
<div>
<h1>It's a bit chilly out there</h1>
</div>
);
}
}
export default component1;
App.js
import React, { Component } from 'react';
import {component1} from './component1.js';
class App extends React.component{
render() {
return (
<div>
<component1 />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Could anyone please steer me towards the right path and tell me what I am doing wrong here?
Thanks in advance.
Wrong case :
class App extends React.Component
------------------------↑
Also, component1 must be imported as a default import (not a named import) with a capital letter :
import Component1 from './component1.js';
I have just started to learn React.js and material-ui. I was using this to display an icon on screen. However the icon is not displayed on the screen and the screen appears to be blank.
Here is my code:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {IconButtonExampleSimple} from './IconButtonExampleSimple.js';
class App extends React.Component{
render()
{
return(
<MuiThemeProvider>
<IconButtonExampleSimple />
</MuiThemeProvider>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
);
IconButtonExampleSimple.js
import React from 'react';
import IconButton from 'material-ui/IconButton';
export class IconButtonExampleSimple extends React.Component{
render ()
{
return (<div>
<IconButton iconClassName="muidocs-icon-custom-github" />
<IconButton iconClassName="muidocs-icon-custom-github"
disabled={true} />
</div>
);
}
}
Add this line to your index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
You are including the Material-UI part of the icon buttons but those are refering to google's Material-Icons so you must link it in your index file.