Develop Reference

React Component not recognized

I am building [this react tutorial][1] but get stuck at the beginning because my react components are not being recognized.
Here is my code:
import React from 'react';
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import './App.scss';
import Header from "./components/Header/Header";
import Home from "./components/Home/Home";
import MovieDetails from "./components/MovieDetails/MovieDetails";
import Footer from "./components/Footer/Footer";
import PageNotFound from "./components/PageNotFound/PageNotFound";
function App() {
return (
<div className="app">
<Router>
<Header></Header>
<Routes>
<Route path="/" component= {Home} />
<Route path="/movie/:imdbID" component={MovieDetails}/>
<Route element={PageNotFound}/>
</Routes>
<Footer />
</Router>
</div>
);
}
export default App;
Basically, it recognizes the imported components but it does not display them in the correct yellow font color. Also, when I run the app only the footer and the header and footer are present. None of the routes work.
Here is the basic Home, Header, and footer component respectively.
import React from 'react'
const Home = () => {
console.log("hello");
return (
<div>Home</div>
)
}
export default Home;
import React from 'react'
const Header = () => {
return (
<div>Header</div>
)
}
export default Header
import React from 'react'
const Footer = () => {
return (
<div>Footer</div>
)
}
export default Footer
This is my package.json:
{
"name": "movie-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.2",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.2",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"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"
]
}
}

Check your React router version, the tutorial seems to be old, and those are deprecated components. this may help
https://reactrouter.com/docs/en/v6/upgrading/v5
check your packag.json and chose the best method for the version you are using.

Routes component from react-router-dom not found

ALERT: My english is not good.
Hello everybody, I'm getting started with React and I installed react-router-dom for my project. I read the documentation and I have followed step by step what it said, but is not work for me. The problem is when I add in App.js.
This is my App.js component:
import '.App.css'
import { Routes, Route } from 'react-router-dom';
import Home from './views/home/Home';
function App() {
return (
<div className="App">
<h1>Welcome to React Router !</h1>
<Routes>
<Route path="/" element={<Home />}/>
</Routes>
</div>
);
}
export default App;
and my Home component is:
import React from "react";
import { Link } from 'react-router-dom';
function Home() {
return(
<>
<main>
<h1>Welcome to Lukson Passwords</h1>
<p>You can do this, I believe in you.</p>
</main>
<nav>
<Link to="/about">About</Link>
</nav>
</>
);
}
export default Home();
package.json:
{
"name": "",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.2",
"#testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"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"
]
}
}
This not work, when I load my page this one shows nothing, but if I delete from my App.js it works fine.
Does anyone know what is going on?
Thank you so much, and sorry for my english xd

You should wrap your app with BrowserRouter. Let's see what happens when you do that

Unable to upload taiwind CSS in React project

I am trying to use Tailwind CSS in the react project. I followed the steps given in the documentation from here. But after completing all the steps, I am unable to see the tailwind CSS changes.
I am adding the styles in the file Home.js like this,
import React from "react";
.
.
.
return (
<>
<div className="bg-red-500 h-96 py-80">
<h1 className="text-3xl font-bold underline bg-yellow-400">
Hello world!
</h1>
</div>
</>
);
};
export default Home;
But it is not showing anything
Following are the required files:
package.json
{
"name": "authlogin-boilerplate",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"express": "^4.17.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"react-scripts": "4.0.3",
"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"
]
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"postcss": "^8.4.5",
"tailwindcss": "^3.0.11"
}
}
tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
App.js
import { useState } from "react";
import "./App.css";
import "./index.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import SignupPage from "./components/SignupPage";
import LoginPage from "./components/LoginPage";
import ForgotPasswordPage from "./components/ForgotPasswordPage";
import ChangePasswordPage from "./components/ChangePasswordPage";
import Alert from "./components/Alert";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
const [alert, setAlert] = useState(null);
const showAlert = (message, type) => {
setAlert({ msg: message, type: type });
setTimeout(() => setAlert(null), 1500);
};
return (
<>
<Router>
<Navbar showAlert={showAlert} />
<Alert alert={alert} />
<Routes>
<Route path="/" element={<Home showAlert={showAlert} />} />
.
.
</Router>
</>
);
}
export default App;
index.css
#tailwind base;
#tailwind components;
#tailwind utilities;
Also, my project structure is
On thing I noticed that in my index.css, I am getting this warning
I don't know the reason, I have restarted the laptop twice but not working.

This is not working because you haven't added the CRACO layer to your React app. Your setup is fine, but something is still to be added, you just need to run npm install #craco/craco inside your react app root and change your package.json file with the new value of start, build and eject command as shown below in the image, and finally start your server again this will work.

why am I getting Invalid hook call error when using react router?

I have been trying to render these codes, but they do not work, and I get errors,I try different ways, the latest was installing v6 of react-router, I will appreciate if you help me;
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";
ReactDOM.render(
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>,
document.getElementById("root")
);
function Home() {
return (
<div>
<h1>Home route</h1>
</div>
);
}
reportWebVitals();
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.15.0",
"#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",
"web-vitals": "^1.1.2",
"react-router-dom": "^6.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"
]
}
}
Error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Module not found: You attempted to import which falls outside of the project src/ directory. Relative imports outside of src/ are not supported

I have just started React JS, but I have a problem and despite my research I can not get results, I have tried many ways, but I have not been able to solve this problem.Can you help ?
this is the error I got at the terminal
./src/App.css (./node_modules/react-scripts/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)Module not found: You attempted to import ../public/images/img-8.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Node Version : v12.18.3
Npm Version : 6.14.8
My File Structure
- node_modules
- public
* images
* img-2.jpg
* videos
- src
* App.js
* App.css
* index.js
* setupTest.js
the picture i am trying to import in my css file
background-image: url('/public/images/img-2.jpg');
App.js
import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router,Switch, Route } from "react-router-dom";
function App() {
return (
<Router>
<Navbar></Navbar>
<Switch>
<Route path="/" exact />
</Switch>
</Router>
);
}
export default App;
package.json
{
"name": "react-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.2.2",
"css-loader": "^5.0.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"style-loader": "^2.0.0"
},
"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 should use /images/img-2.jpg/ to refer to the folder. The reason is that you are using create-react-app to create this React app. When being bundled the app will be located in the public folder. Read this other question where it mentions the same issue.