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

TypeError: (0 , _react.test) is not a function

I created a react project with create-react-app some times ago and i wanted to add some test with jest. I read that Jest comes with create-react-app, but when i try to run the simple test that comes with the project by typing "yarn test", i have this error message: TypeError: (0 , _react2.test) is not a function
The test:
import React from 'react';
import { render, screen, expect, test} from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
The result:
My package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.4",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^13.1.9",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^2.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx",
"lint-fix": "npm run lint -- --fix"
},
"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": {
"eslint": "^7.28.0",
"eslint-plugin-react": "^7.24.0"
}
}
Does anyone know what i am missing ? Thank you !

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.

Primereact Imports not Found

I want to develop a React Js app with the framework Primereact.
Now I have the problem that some Imports can't be found.
The Import import {Button} from 'primereact/Button' throws the exception:
Cannot find file: 'Button.js' does not match the corresponding name on disk: '.\node_modules\primereact\button.js
The second problem I have is that DatatableSubMenu and DatatableCrudDocu cannot be found. What is the correct import?
My package.json is:
"name": "selldesk",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.3.1",
"primeicons": "^2.0.0",
"primereact": "^3.3.2",
"react": "^16.12.0",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0",
"reactstrap": "^8.1.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"
]
}
}
I hope somebody can help me.

It's because you have imported button incorrectly.
Change this
import {Button} from 'primereact/Button'; //uppercase
to
import {Button} from 'primereact/button'; //lowercase
Make sure to keep them lowercase. Check the docs for correct import statements -
https://www.primefaces.org/primereact/#/button