анимации с использованием сторонних библиотек, использующих jquery в реакции

Question

Закончил работу над мобильным представлением и всеми анимациями в моем портфолио-веб-приложении, используя # jquery и # Reactjs. еще не возникло никаких проблем с перфорацией.

qtn1: почему не стоит смешивать # jquery с # reactjs. я хочу сделать хорошие переходы и анимацию, что проще и лучше с сторонними библиотеками, которые поддерживаются с jquery.

фрагментом кода: я использую animate. css библиотечные классы для создания моих анимаций

qtn2: это действительно плохой код

class Homepage extends Component {
  showAboutHandler = () => {
    $(".about_container").css("display", "inherit");
    $(".about_container").addClass("animated slideInLeft");
    setTimeout(() => {
      $(".about_container").removeClass("animated slideInLeft");
    }, 800);
  };

  showWorkHandler = () => {
    $(".work_container").css("display", "inherit");
    $(".work_container").addClass("animated slideInRight");
    setTimeout(() => {
      $(".work_container").removeClass("animated slideInRight");
    }, 800);
  };

  showContactHandler = () => {
    $(".contact_container").css("display", "inherit");
    $(".contact_container").addClass("animated slideInUp");
    setTimeout(() => {
      $(".contact_container").removeClass("animated slideInUp");
    }, 800);
  };

  componentDidMount() {
    setTimeout(function() {
      $(".loading").addClass("animated fadeOut");
      setTimeout(function() {
        $(".loading").removeClass("animated fadeOut");
        $(".loading").css("display", "none");
      }, 1000);
    }, 1500);
  }

  render() {
    return (
      <div>
        <Loader />
        <AboutTag className="animated fadeIn" onClick={this.showAboutHandler}>
          about
        </AboutTag>
        <WorkTag className="animated fadeIn" onClick={this.showWorkHandler}>
          work
        </WorkTag>
        <ContactTag
          className="animated fadeIn"
          onClick={this.showContactHandler}
        >
          contact
        </ContactTag>
        <Profile
          showAbout={this.showAboutHandler}
          showWork={this.showWorkHandler}
          showContact={this.showContactHandler}
        />
        <AboutPage />
        <ContactPage />
        <WorkPage />
        <FooterContainer>
          <a href="https://github.com/banobepascal/">Banobe Pascal</a>
        </FooterContainer>
      </div>
    );
  }
}

export default Homepage;