app.js

import React from 'react';
import { render } from 'react-dom';

import Game from './components/Game';

render(
  <Game />,
  document.getElementById('app')
);

Game.js

import React, { Component } from 'react';

import Name from './Name';
import Introduction from './Introduction';
import Level from './Level';

export default class Game extends Component {
  constructor() {
    super();

    this.state = {
      introduced: false,
      username: '',
    };
  }

  render() {
    const { introduced, username } = this.state;

    let view;

    if (!introduced) {
      view = <Introduction proceedAction={() => this.setState({ introduced: true })} />;
    } else if (!username) {
      view = <Name updateUsernameAction={name => this.setState({ username: name })} />;
    } else {
      view = <Level name={this.state.username} />;
    }

    return (
      <div id='Game'>
        {view}
      </div>
    );
  }
}

Introduction.js

import React from 'react';

const Introduction = ({ proceedAction }) => (
  <div id='Introduction' onClick={proceedAction}>
    Hello this is an introduction, click this to proceed.
  </div>
);

export default Introduction;

Level.js

import React, { Component } from 'react';

export default class Level extends Component {
  render() {
    const { name } = this.props;

    return <div>Hey {name}, pick your level!</div>;
  }
}

Name.js

import React, { Component } from 'react';

export default class Name extends Component {
  constructor() {
    super();

    this.state = {
      username: '',
    };
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.updateUsernameAction(this.state.username);
  }

  render() {
    return (
      <div id='Name'>
        <form onSubmit={e => this.handleSubmit(e)}>
          <input
            type='text'
            onChange={e => this.setState({ username: e.target.value })}
          />
          <button>Set username</button>
        </form>
      </div>
    )
  }
}