Develop Reference

React shows blank white screen for localhost:3000

Building a test web3 website and can't figure out why to react is showing blank. Hoping you guys can help!
App.js
import { useState } from 'react';
import './App.css';
import MainMint from "./MainMint";
import NavBar from "./NavBar";
function App() {
const [accounts, setAccounts] = useState([]);
return (
<div className="App">
<NavBar accounts={accounts} setAccounts={setAccounts} />
<MainMint accounts={accounts} setAccounts={setAccounts} />
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

My App Component will not render with React

I am doing React project with typescript form scratch, and for some reason, I can't get the App component to render. I know the file path is correct. The Error says: Module not found: Error: Can't resolve './App' in '/Users/michaelhorvilleur/Desktop/Codecademy/react-porfolio/src'
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("#root"));
import React, { useState } from "react";
const App = () => {
return (
<div>
<h1>App</h1>
</div>
);
};
export default App;

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);

Make sure the App.js file is positioned in src folder

React not rendering when using Auth0 header

I am using auth0 for authentication in react app. My app is just button that would lead to auth0 page. However when I use <Auth0ProviderWithHistory> it doesn't render.
index.js File
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Auth0ProviderWithHistory from './auth0provider';
ReactDOM.render(
<React.StrictMode>
<Auth0ProviderWithHistory>
<App />
</Auth0ProviderWithHistory>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js File:
import"./App.css"
import React from "react"
import Auth0ProviderWithHistory from "./auth0provider"
import { useAuth0 } from "#auth0/auth0-react"
import Button from '#mui/material/Button';
function App() {
const {
isLoading,
isAuthenticated,
error,
user,
loginWithRedirect,
logout,
} = useAuth0();
return(
<Button variant="contained" onClick={() => loginWithRedirect }>Contained</Button>
)
}
export default App;
The code was taken from https://auth0.com/blog/complete-guide-to-react-user-authentication/
[Webpage with error][1]
auth0provider.js file:
import React from 'react';
import { useNavigate} from 'react-router-dom';
import { Auth0Provider } from '#auth0/auth0-react';
const Auth0ProviderWithHistory = ({ children }) => {
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
const history = useNavigate();
const onRedirectCallback = (appState) => {
history.push(appState?.returnTo || window.location.pathname);
};
return (
<Auth0Provider
domain={domain}
clientId={clientId}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
>
{children}
</Auth0Provider>
);
};
export default Auth0ProviderWithHistory;
Console Error

Having problem to use global styles in styled-components

I'm trying to use the GlobalStyle to set-up some configurations for my SAP. But i'm getting the following error:
Error: Cannot create styled-component for component:
body {
color: "white";
}
My code (App.js):
import React from 'react';
import createGlobalStyle from 'styled-components';
import MainContainer from './Components/MainContainer';
const GlobalStyle = createGlobalStyle`
body {
color: "white";
}
`;
function App() {
return (
<>
<GlobalStyle />
<MainContainer />
</>
);
}
export default App;
And in index.js, i'm using StrictMode:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);

Solved, the error was in the import of createGlobalStyle, the correct line is:
import { createGlobalStyle } from 'styled-components';

external css converted into internal css automatically in reactjs so multiple css files could not be applied

used create-react-app but different css are not applied..
Eg:
Expectation : see style elements in inspect menu
Reality:actually what i get
I don't know why there is always conflict in css+react
I applied only one css here but in actually there were 3 css to be applied but it is not applied correctly.
index.js :
import "./assets/css/style.css";
import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import * as serviceWorker from "./serviceWorker";
import rootSaga from "./sagas";
import { rootReducer } from "./reducers";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
//import "./styles/font-awesome.css";
import "font-awesome/css/font-awesome.css";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
rootReducer,
composeEnhancers(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);
ReactDOM.render(
<BrowserRouter>
<Provider store={store}>
<div id="wrapper">
<App />
</div>
</Provider>
</BrowserRouter>,
document.getElementById("root")
);
serviceWorker.unregister();
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>