Bootstrap components using Reactstrap

JHipster uses Bootstrap 4 as its UI framework and 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, for example:

<Modal isOpen={this.props.showModal} toggle={handleClose} backdrop="static" id="login-page">
  <AvForm onSubmit={this.handleSubmit}>
    <ModalHeader toggle={handleClose} id="login-title">
      ...
    </ModalHeader>
    <ModalBody>
      <div className="row">
        ...
        <div className="col-md-12">
          <AvField
            name="username"
            label={...}
            placeholder={...}
            required
            errorMessage="Username cannot be empty!"
          />
          ...
        </div>
      </div>
      <Alert color="warning">
        ...
      </Alert>
      ...
    </ModalBody>
    <ModalFooter>
      ...
    </ModalFooter>
  </AvForm>
</Modal>