blank page after of making project by create react app

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: () => {}
});