my code seems fine but nothing come out, my App.js
import logo from './logo.svg';
import './App.css';
import React from 'react';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
and index.js
import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import './index.css';
import App from './App';
import Header from './components/Header';
import Footer from './components/Footer';
const routing = (
<Router>
<Header />
<Routes>
<Route exact path="/" component={App} />
</Routes>
<Footer />
</Router>
);
const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(routing);
Header.js
import React from 'react';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import AppBar from '@mui/material/AppBar';
import CssBaseline from '@mui/material/CssBaseline';
// create custom style
import { makeStyles } from '@mui/styles';
const useStyles=makeStyles((theme)=>({
appBar:{ //this will overwrite the Appbar css
borderBottom:`1px solid ${theme.palette.divider}`,
},
}));
function Header(){
const classes=useStyles();
return(
<React.Fragment>
<CssBaseline />
<AppBar position="static"
color="white"
elevation={0}
className={classes.appBar}
>
<Toolbar>
<Typography variant="h6" color="inherit" noWrap>
BlogmeUp
</Typography>
</Toolbar>
</AppBar>
</React.Fragment>
);
}
export default Header;
okay, my code seems fine, but in my console page, they came out these error, can anyone help me?
Error 1:
warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at index.js:15.
Error 2:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at createFiberFromTypeAndProps (react-dom.development.js:28439:1)
at createFiberFromElement (react-dom.development.js:28465:1)
at createChild (react-dom.development.js:15109:1)
at reconcileChildrenArray (react-dom.development.js:15404:1)
at reconcileChildFibers (react-dom.development.js:15821:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateContextProvider (react-dom.development.js:21154:1)
at beginWork (react-dom.development.js:21649:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
Error 3:
react-dom.development.js:18687 The above error occurred in the <Location.Provider> component:
at Router (http://localhost:3000/static/js/bundle.js:52630:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:50819:5)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Error 4:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at createFiberFromTypeAndProps (react-dom.development.js:28439:1)
at createFiberFromElement (react-dom.development.js:28465:1)
at createChild (react-dom.development.js:15109:1)
at reconcileChildrenArray (react-dom.development.js:15404:1)
at reconcileChildFibers (react-dom.development.js:15821:1)
at reconcileChildren (react-dom.development.js:19167:1)
at updateContextProvider (react-dom.development.js:21154:1)
at beginWork (react-dom.development.js:21649:1)
at beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
and my package.json
{
"name": "blogapi",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@material-ui/core": "^4.12.4",
"@mui/material": "^5.11.12",
"@mui/styles": "^5.12.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Actually I following a tutorial from youtube, https://youtu.be/soxd_xdHR0o?t=6531, I followed what the tutor did, but at the end he got positive output, but I encounter numbers of error, can anyone help me?
