here's codesendbox
for react-router-shoe-store-app which does not work perfectly.
when i click on each shoe it is not render a new page instead of this it changes the url but not change the whole dom, just change on right and bottom of the page.
You are almost there with minor issues. You need Switch instead of Routes and component prop instead of element prop. Made the following changes and got your project running on codesandbox.
You need to change your App.js to this:
import React from "react";
import { Home } from "./Components/Home/Home";
import { ShoesBrandLaunch } from "./Components/ShoeDetails/ShoesBrandLaunch";
import { ShoeLaunch } from "./Components/ShoeDetails/ShoeLaunch";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/nike" component={ShoesBrandLaunch}>
<Route path=":slug" component={ShoeLaunch} />
</Route>
</Switch>
</Router>
);
}
export default App;
package.json
{
"name": "react-shoe-store-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"axios": "^0.21.1",
"history": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-scripts": "4.0.1",
"react-slick": "^0.27.13",
"slick-carousel": "^1.8.1",
"web-vitals": "^0.2.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"
]
}
}
Related
I am getting a blank screen in react app after running it with npm start
it worked adequately till yesterday but now it is getting this error and I don't think the code is getting rendered because when I checked the inspect window to enable javascript
package.json
{
"name": "buildfolks",
"version": "0.1.0",
"private": true,
"dependencies": {
"#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-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"
]
},
"devDependencies": {
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.1.8"
},
"main": "postcss.config.js",
"keywords": [],
"author": "",
"license": "ISC",
"description": ""
}
App.js
import { useEffect } from "react";
import "./App.css";
import Nav from './Nav.js';
function App() {
useEffect(() => {
document.title = "BuildFolks";
});
}
<Nav />
export default App;
I am also using tailwind css
Your App() function does not return anything, try to make it return <Nav />:
function App() {
useEffect(() => {
document.title = "BuildFolks";
});
return <Nav />;
}
Your App component is missing the return statement.
import { useEffect } from "react";
import "./App.css";
import Nav from './Nav.js';
function App() {
useEffect(() => {
document.title = "BuildFolks";
});
return (
<Nav />
)
}
export default App;
Why does react does not work here
<script src="index.js" ></script>
Note: above code is located at the main html
heres the react.js file
import React from 'react'
import ReactDOM from 'react-dom'
const page = (
<div>
<ul>
<li>Anime Title</li>
<li>Genre</li>
<li>Rating</li>
<li>Status</li>
</ul>
</div>
)
ReactDOM.render(page, document.getElementById("root"))
Whenever i tried to run this it says "cannot use import statement outside a module"
Do i did wrong when installing react-js?
by the way heres the package.json
{
"name": "try",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.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"
]
}
}
I got this warning in my project generated by create-react-app with Typescript and although I followed Reactjs.org instructions and some other other questions posted in StackOverflow I couldn't make the warning off.
Could someone explain me why I still see the warning related to ReactDOM?
Thank you in advance.
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
const container = document.getElementById("root")
const root = createRoot(container!);
root.render(
<StrictMode>
<App />
</StrictMode>
);
reportWebVitals();
{
"name": "pokedex",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^1.8.8",
"#emotion/react": "11",
"#emotion/styled": "11",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.27",
"#types/react": "^18.0.5",
"#types/react-dom": "^18.0.1",
"#types/styled-components": "^5.1.25",
"axios": "^0.26.1",
"framer-motion": "6",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"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"
]
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^5.20.0",
"#typescript-eslint/parser": "^5.20.0",
"eslint-plugin-react": "^7.29.4"
}
}
On the second day, the warning disappeared.
Yesterday I stooped and restarted the project but the ReactDOM warning kept it showing.
Earlier today, I made some settings for VSCode which led me to close it and then opened the editor again. I didn't restart Windows10, no necessity for it. After some period of time I notice the warning disappearance.
Could VScode restarting after 'src/index.tsx' updating be a solution for this strange case?
I'm trying to learn React but this 'Container' is not defined and I don't know why I got this error, even though I did everything in the course
Here is App.js
import React from "react";
import { Row } from "reactstrap";
import CategroyList from "./CategroyList";
import Navi from "./Navi";
import ProductList from "./ProductList";
function App() {
return (
<div>
<Container> //'Container' is not defined
<Row>
<Navi />
</Row>
<Row>
<CategroyList />
<ProductList />
</Row>
</Container>
</div>
);
}
export default App;
Here json code and I downloaded last reacstrap version and I imported the 'bootstrap/dist/css/bootstrap.min.css' in my index.js file but as you see I still take error
"name": "intro",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"reactstrap": "^9.0.0",
"web-vitals": "^1.1.2"
},
"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"
]
}
}
You are missing the Container import on line 2:
import { Row, Container } from "reactstrap";
I want to display a Material UI list as part of my drop down menu (a Material UI drawer component) for mobile view but for some reason the actual list doesn't get displayed.
The code for the list looks like this:
const menuItems = [
{
text: 'Home',
path: '/'
},
{
text: 'About',
path: '/about'
}
];
...
<List>
{menuItems.map(item => (
<ListItem
button
key={item.text}
onClick={() => history.push(item.path)}
>
<ListItemText>{item.text}</ListItemText>
</ListItem>
))}
</List>
This is the result where my list items should be displayed but instead I get this strange icon:
Here is my package.json file:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/icons": "^4.11.2",
"#material-ui/styles": "^4.11.4",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"firebase": "^8.7.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-timeago": "^6.2.1",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
--
EDIT:
Here is a working CodeSandbox example
The error is in the import.
Correct:
import List from "#material-ui/core/List";
You imported List from "#material-ui/icons/List". You should remove it and import List from "#material-ui/core":
import { List } from "#material-ui/core";