Develop Reference

blank/white Screen not being rendered

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;

React not working: Cannot use import statement outside a module

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"
]
}
}

CSS Modules in React JS not working, i have tried literally everything but it didn't solved

Everything seems correct but I don't know why I can't able to use CSS in my project. I have tried without writing module in CSS file's name but it didn't work. I have tried literally everything but none of those worked for me.
import React, { Component } from 'react';
import styles from './App.module.css';
class App extends Component {
render(){
return (
<div>
<h1 className={styles.blue}>Burger Builder</h1>
</div>
);
}
}
export default App;
My CSS File,
.blue{
color: blue;
}
Package.json file
{
"name": "burger-builder",
"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": "^1.1.5",
"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"
]
}
}

CSS modules is available with react-scripts#2.0.0 and higher.

How to render a new page while using react-router

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"
]
}
}

axios is not working? i tried npminstall axios also

i tried npm install axios also. None of the answers which are online worked for me.
./src/component/PostList.js
Line 13:5: 'axois' is not defined no-undef
Search for the keywords to learn more about each error.
PostList.js
import axios from 'axios'
import React,{Component} from 'react'
class PostList extends Component {
constructor(props)
{
super(props)
this.state={
post: []
}
}
componentDidMount(){
axois.get("https://jsonplaceholder.typicode.com/posts")
}
render(){
return(
<div>post</div>
);
}
}
export default PostList;
json.package
{
"name": "axiostry",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

typing mistake axois replace with axios

Try $ npm update or const axios = require('axios').default;
// axios. will now provide autocomplete and parameter typings