JHipster uses Bootstrap 4 as its UI framework. Since we are building a React application, it makes sense to use a Native React binding instead of Bootstrap's jQuery-based components. Reactstrap (https://reactstrap.github.io/) provides pure React components for Bootstrap 4. We also make use of the Availity reactstrap Validation (https://availity.github.io/availity-reactstrap-validation/) library, which provides form validation support for reactstrap form elements.

Let's take a look at src/main/webapp/app/modules/login/login-modal.tsx:

<Modal isOpen={this.props.showModal} toggle={handleClose} backdrop="static" id="login-page" autoFocus={false}>
  <AvForm onSubmit={this.handleSubmit}>
    <ModalHeader id="login-title" toggle={handleClose}>
      <Translate contentKey="login.title">Sign in</Translate>
    </ModalHeader>
    <ModalBody>
      <Row>
        <Col md="12">
          ...
        </Col>
      </Row>
      ...
    </ModalBody>
    <ModalFooter>
      <Button color="secondary" onClick={handleClose} tabIndex="1">
        <Translate contentKey="entity.action.cancel">Cancel</Translate>
      </Button>{' '}
      <Button color="primary" type="submit">
        <Translate contentKey="login.form.button">Sign in</Translate>
      </Button>
    </ModalFooter>
  </AvForm>
</Modal>

This a simple component that uses some reactstrap components to build the modal pop-up UI.