jQueryのコードをReactで実装したい。

現在Web制作を学び始めたものです。YouTubeにて参考になりそうな動画を発見し、コーディングしつつ知らない文法は検索して、というのを繰り返しています。こちらが参考にしている動画です。
この動画の16：00あたりからjavascriptをjQueryで書いているのですが、これをReactで書きたいと思っています。どのように書き換えることができるのでしょうか。まだまだ勉強不足ではありますが、何卒ご教授お願いいたします。※動画の該当部分のコード(以下のコード)の意味は理解しています。

$(document).ready(function(){
  $(window).scroll(function(){
    if(this.scrollY > 20){
      $(".navbar").addClass("sticky")
    }else{
      $(".navbar").removeClass("sticky")
    }
  })
});

以下HTMLとCSSです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Portfolio1</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/ff832bf6f3.js" crossorigin="anonymous"></script>
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <!-- Navigate section start -->
    <nav class="navbar">
      <div class="max-width">
        <div class="logo"><a href="#">Portfo<span>lio.</span></a></div>
        <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Skills</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <!-- Home section start -->
    <section class="home" id="home">
      <div class="max-width">
        <div class="home-content">
          <div class="text-1">Hello, my name is</div>
          <div class="text-2">Ogino Kaito</div>
          <div class="text-3">I'm a <span>Student</span></div>
        </div>
      </div>
    </section>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    <script src="main.js"></script>
  </body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}
.max-width{
  width: 1300px;
  padding: 0 80px;
  margin: auto;
}
/* navber style */
.navbar{
  position: fixed;
  width: 100%;
  padding: 30px 0;

  font-family: "Ubuntu", sans-serif;
}
.navbar.sticky{
  padding: 30px 0;
  background: crimson;
}
.navbar .max-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  font-size: 35px;
  font-weight: 600;
  color: white;
}
.navbar .logo a span{
  color: crimson;
}
.navbar .menu li{
  display: inline-block;
  list-style: none;
}
.navbar .menu li a{
  color: white;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  transition: color 0.3s ease;
}
.navbar .menu li a:hover{
  color: crimson;
}
/* home style */
.home{
  display: flex;
  background: url("img/black.jpg") no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
  color: white;
  min-height: 500px;
  font-family: "Ubuntu", sans-serif;
}
.home .max-width{
  margin: auto 0 auto 40px;
}
.home .home-content .text-1{
  font-size: 27px;
}
.home .home-content .text-2{
  font-size: 75px;
  font-weight: 600;
  margin-left: -3px;
}
.home .home-content .text-3{
  font-size: 40px;
  margin: 0 5px;
}
.home .home-content .text-3 span{
  color: crimson;
  font-weight: 500;
}

maisumakun

2021/02/26 22:16

navbarの中身自体もReactで再実装する予定ですか？それとも、HTMLに書きつけたままにしますか？

program

2021/02/27 02:59

中身自体は再実装しない予定でした。全てreactで再実装してしまった方が楽なのでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

中身自体は再実装しない予定でした。全てreactで再実装してしまった方が楽なのでしょうか。

Reactは、基本的にReactで描画したものの状態管理しか行なえません。

React外のDOMを変更するには、生DOMあるいはjQueryでの操作が必要です（うまくやれば、それをReactのコンポーネント内に組み込んで、タイミングを見て動かすことは可能です）。

投稿2021/02/27 03:31

編集2021/02/27 03:32

maisumakun

総合スコア145963

maisumakun

2021/02/27 03:34

この例の場合、動くきっかけもスクロールというReact外のイベント、そして操作対象ももとからHTMLに書いてある、React外のDOM、ということであれば、Reactの出番は全くありません。

program

2021/02/27 04:20

つまり、今回のような簡単なwebページを作る場合、reactの出番はないと言うことでしょうか。jQueryはオワコンという記事を見つけ、少し不安になっていました。

maisumakun

2021/02/27 04:36

> つまり、今回のような簡単なwebページを作る場合、reactの出番はないと言うことでしょうか。「複雑なJavaScriptウィジェットをReactで作って、既存のWebページに埋め込む」ような使い方は可能ですが、このような「すでに完成したHTMLに対して動的な操作を加える」場面ではReactは役に立ちません。 > jQueryはオワコンという記事を見つけ、少し不安になっていました。生DOMも機能向上し、ブラウザ間での非互換も解決していっています。「生DOMに対して」jQueryを使うメリットも薄れています。

program

2021/02/27 05:58

JavaScriptを使って変化を付けたい場合、変化させる箇所(今回ならナビバー)だけReact内で記述すれば、今回のようにスクロールしたら変化する動作を作ることができるということでしょうか。

maisumakun

2021/02/27 06:45

はい、そういう実装は可能です。

program

2021/02/27 08:06

ありがとうございました！もっと勉強してみます！

行動規範の内容に同意します