РЕАКЦИЯ: Как мне изменить отрендеренный JSX на моем тестовом сайте?

Я пытаюсь изучить React и в настоящее время тестирую свой личный веб-сайт.

Вопрос в том, что я действительно не знаю, как заставить мой сайт отображать новый JSX. В чистом HTML я просто использую ссылку на кнопку, а затем связываю ее со своим вторым файлом HTML. Я пытаюсь сделать это с помощью this.setState и handleClick(). Я опубликую соответствующий код.

Может ли кто-нибудь объяснить это или дать мне решение? Я застрял на этом весь день!

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Explore from './Components/Explore';
import './index.css';
import reportWebVitals from './reportWebVitals';


export class Home extends React.Component {
  constructor(props) {
    super(props);
    this.handleCick = this.handleCick.bind(this);
    this.state = { page: <App onClick = {this.handleClick}/> }
  }
  handleCick() {
    this.setState({ page: <Explore /> })
  }
  render () {
    return this.state.page
  }
}




 const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>
);

App.js

import React from 'react';
import './App.css';

class App extends React.Component {
  render () {
    return (
      <div className = "App">
        <header className = "App-header">
          <div className = "pb" alt = "Profile picture"></div>
          <h1>Magnus Pladsen</h1>
          <h2>Junior Developer</h2>
          <div className = "icons">
            <a href = ""><div className = "icon facebook"></div></a>
            <a href = "" target = "_blank"><div className = "icon linkedin"></div></a>
            <a href = "" target = "_blank"><div className = "icon github"></div></a>
          </div>
            <button onClick = {this.props.onClick}>Explore</button>
        </header>
      </div>
    );
  }
}


export default App;

Исследуйте.js

import React from 'react';
import './Explore.css';



class Explore extends React.Component {
    render() {
        return (
            <div className = "Explore">
              <header className = "Explore-header">
                <div className = "pb" alt = "Profile picture"></div>
                <h1>TEST</h1>
                <h2>THIS CODE WILL CHANGE WHEN I GET IT TO RENDER</h2>
                <div className = "icons">
                  <a href = "" target = "_blank"><div className = "icon facebook"></div></a>
                  <a href = "" target = "_blank"><div className = "icon linkedin"></div></a>
                  <a href = "" target = "_blank"><div className = "icon github"></div></a>
                </div>
              </header>
            </div>
        );
    }
}

export default Explore;

🤔 А знаете ли вы, что...
JavaScript позволяет создавать мобильные приложения для iOS и Android с использованием фреймворков, таких как React Native и NativeScript.