Как создать приложение простого реагирования в одном файле?

Question

Итак, у меня есть задание, которое требует от меня создания приложения React только в одном файле js / jsx.Это требование стало довольно неприятным для меня, и я понятия не имею, почему оно существует на первом месте, потому что я не могу понять синтаксис, чтобы сделать что-то подобное.Вот мой код:

import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(        
    <div className="centerContent">
            <div className="container">
                <div className="row">
                    <div className="col-6" style={{fontSize: "1vw"}}>
                        <div id="starWarsBanner"></div>
                        <div id="data-col-1">
                            Data loading...
                        </div>
                        <button type="button" onClick="getStarWarsData" className="btn btn-success btn-lg" id="getNewStarWarsData">Get New Star Wars Character</button>
                    </div>
                    <div className="col-6" style={{fontSize: "1vw"}}>
                        <div id="pokemonBanner"></div>
                        <div id="data-col-2">
                            Data loading...
                        </div>
                        <button type="button" onClick="getPokemonData" className="btn btn-success btn-lg" id="getNewPokemonData" style={{marginTop: "10px"}}>Get New Pokemon</button>
                    </div>
                </div>
            </div>
        </div>, document.getElementById('root'));

В разделах Загрузка данных ... HTML я хотел бы в идеале поместить другой компонент для отображения информации из этих двух API:

https://swapi.co/

https://pokeapi.co/

Это действительно единственное требование, но я не могу понять, как это сделать, используя только один файл.Помогите пожалуйста!

Answer 1

Нет разницы в использовании нескольких файлов или одного.Вам просто не нужно экспортировать / импортировать компоненты.

import React, { PureComponent } from "react";
import ReactDOM from "react-dom";
import * as serviceWorker from "./serviceWorker";

class StarWars extends React.Component {
  // lifecycle methods here
  getStarWarsData = () => {
    //fetch the data here and add it to the state
  };
  render() {
    return (
      <React.Fragment>
        <div id="starWarsBanner" />
        <div id="data-col-1">Data loading...</div>
        <button
          type="button"
          onClick={this.getStarWarsData}
          className="btn btn-success btn-lg"
          id="getNewStarWarsData"
        >
          Get New Star Wars Character
        </button>
      </React.Fragment>
    );
  }
}

class Pokemon extends React.Component {
  // lifecycle methods here
  getPokemonData = () => {
    //fetch the data here and add it to the state
  };
  render() {
    return (
      <React.Fragment>
        <div id="pokemonBanner" />
        <div id="data-col-2">Data loading...</div>
        <button
          type="button"
          onClick={this.getPokemonData}
          className="btn btn-success btn-lg"
          id="getNewPokemonData"
          style={{ marginTop: "10px" }}
        >
          Get New Pokemon
        </button>
      </React.Fragment>
    );
  }
}

class App extends React.Component {
  // lifecycle methods here

  render() {
    return (
      <div className="centerContent">
        <div className="container">
          <div className="row">
            <div className="col-6" style={{ fontSize: "1vw" }}>
              <StarWars />
            </div>
            <div className="col-6" style={{ fontSize: "1vw" }}>
              <Pokemon />
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Демо на https://codesandbox.io/s/kx5r0q3rnv