How to create a simple react app in one file?

Question

So I have an assignment that requires me to create a React application in only one js/jsx file. This requirement has become quite frustrating for me and I have no idea why it exists in the firs place because I can't figure out the syntax to do something like this. Here is my code:

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'));

In the Data loading... html sections I'd like to ideally put another component to render information from these two apis:

https://swapi.co/

https://pokeapi.co/

That's really the only requirement but I can't figure out how to do this using only one file. Help please!

Have you seen this already? https://stackoverflow.com/questions/44128959/multiple-components-within-a-file — Siavas, Jan 30 '19 at 02:08
Possible duplicate of [Multiple components within a file](https://stackoverflow.com/questions/44128959/multiple-components-within-a-file) — Jared Smith, Jan 30 '19 at 02:13
Yeah I've seen that one. The problem is mine has ReactDOM.render and when I try to wrap it in a class I get an error. I'm not sure why. — MatTaNg, Jan 30 '19 at 02:17
I tried to wrap the whole thing in a class and remove ReactDOM and implement the render() function instead but it doesn't append to the DOM with getElementById('root') — MatTaNg, Jan 30 '19 at 02:18

score 1 · Accepted Answer · answered Jan 30 '19 at 14:49

There is no difference in using multiple files or one. You just do not need to export/import the components.

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"));

Demo at https://codesandbox.io/s/kx5r0q3rnv

How to create a simple react app in one file?

1 Answers1