blank page after of making project by create react app - reactjs

Question

I want to build my project with create react app. But, I encounter a blank page, when I run "yarn start" in project's directory. As others have said, I set "homepage": "." . but that does not work.
Some said router should be set to "hashrouter". Unfortunately, I don't understand how to do that.
This is my code that has used of context for building "themeSwitcher".
index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './app.css';
import {themeContext} from './context.js';
function themeSwitcher(){
return (
<themeContext.consumer>
{({Theme,changeTheme}) => (
<input
type="checkbox"
checked={Theme === "dark"}
onChange={() => changeTheme(Theme === "dark" ? "light" : "dark")}
/>
)}
</themeContext.consumer>
);
}
class app extends React.Component {
constructor(props) {
super(props);
this.state = {
Theme: "light",
changeTheme: this.changeTheme
};
}
changeTheme = (Theme) => {
this.setState({
Theme
});
};
render() {
return (
<themeContext.provider value={this.state}>
<div>
<p>this is a switcher theme</p>
<span>Dark mode</span>
<themeSwitcher />
</div>
</themeContext.provider>
);
}
}
ReactDOM.render(<app />, document.getElementById("root"));
context.js:
import React from "react";
export const themeContext = React.createContext({
Theme: "light",
changeTheme: () => {}
});

Answer 1

Why are the components written with small letters? Component names must begin with a capital letter.
If possible then present code from './context.js'
import React from 'react'
import ReactDOM from 'react-dom'
import './app.css'
import { ThemeContext } from './context.js'
function ThemeSwitcher() {
return (
<ThemeContext.Consumer>
{({ theme, toggleTheme }) => (
<input
type="checkbox"
checked={theme === 'dark'}
onChange={toggleTheme}
/>
)}
</ThemeContext.Consumer>
)
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
theme: 'light'
}
}
toggleTheme = () => {
this.setState(state => ({
theme:
state.theme === 'dark'
? 'light'
: 'dark',
}));
}
contextValue = {
theme: this.state.theme,
toggleTheme: this.toggleTheme
}
render() {
return (
<ThemeContext.Provider value={this.contextValue}>
<div>
<p>this is a switcher theme</p>
<span>Dark mode</span>
<ThemeSwitcher />
</div>
</ThemeContext.Provider>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
You can also use hooks and functional components. The code is cleaner.
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import './app.css'
import { ThemeContext } from './context.js'
const ThemeSwitcher = () => (
<ThemeContext.Consumer>
{({ theme, toggleTheme }) => (
<input
type="checkbox"
checked={theme === 'dark'}
onChange={toggleTheme}
/>
)}
</ThemeContext.Consumer>
)
const App = () => {
const [theme, setTheme] = useState('light')
const toggleTheme = () => setTheme(theme === 'dark' ? 'light' : 'dark')
const contextValue = {
toggleTheme,
theme,
}
return (
<ThemeContext.Provider value={contextValue}>
<div>
<p>this is a switcher theme</p>
<span>Dark mode</span>
<ThemeSwitcher />
</div>
</ThemeContext.Provider>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
context.js code
import React, { createContext } from "react";
export const ThemeContext = createContext({
theme: "light",
toggleTheme: () => {}
});