I am getting a blank page on my localhost 3000 on running npm start using reactjs

Question

I started making an a react app and added tag naming it with covid-19 tracker and on running npm start it perfectly showed the h1 heading ie Covid 19 tracker but then I installed dependencies ie

npm install @material-ui/core

and used some of its tags and then when I run npm start there was blank screen on my localhost:3000.

I added tags like and imported them from "@material-ui/core" so that a dropdown box will be added on running npm start but on ruuning npm start there was a blank screen..nothing was shown..even the heading which was showing previously had gone.

I had pasted the image of App.js and localhost images below.

Code snippet localhosst screenshot after running dependency tags image without using dependency tags

Answer 1

Material-UI/core is deprecated, it means that it is not compatible with current react version, therefore you can not use it on your project.

Answer 2

As per Your first image you are calling react hook in class component or outside of functional component that is why that error is coming.

rules of hooks

And for Material-UI/core:

So Material-UI/core is now deprecated so you can't use it inside your project.

ref link

Answer 3

import React from "react";

add this line at the beginning of the App.js file.

Answer 4

Hey you can use the updated MUI v5 by using the below command this will work

npm install @mui/material @emotion/react @emotion/styled

and then below is the component

import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { MenuItem } from "@mui/material";
import "./App.css";

function App() {
  return (
    <div style={{ width: 100, margin: 50 }}>
      <FormControl >
        <Select variant="outlined" value="abc" >
          <MenuItem value="worldwide">Worldwide</MenuItem>
          <MenuItem value="worldwide">Option 1</MenuItem>
          <MenuItem value="worldwide">Option 2</MenuItem>
          <MenuItem value="worldwide">Option 3</MenuItem>
        </Select>
      </FormControl>
    </div>
  );
}

export default App;

for more info refer this link https://mui.com/