JavaScriptを学習するには、HTML、CSSを勉強しないといけないか？

www.youtube.com

まとめると、HTML、CSSを最小限学んでから、JavaScriptに入りましょうということです。

React.jsを学習するのが目標であるなら、下記のようにすればよいと思われます。

HTMLについては、

①最小コーディングと②いくつかのタグを理解しておけばよいでしょう。

下記にサンプルコードを掲載します。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>見出し</h1>
    <p>本体</p>
    <div>
        <div>りんご</div>
        <div>みかん</div>
        <div>バナナ</div>
    </div>
    <div>
        <p>りんご</p>
        <p>みかん</p>
        <p>バナナ</p>
    </div>
</body>

ほかには、③どのCSSファイルを読み込むかの記載が必須です。

今回読み込むCSSファイル名は test_1.cssとすると、そのファイル内で、

<head></head>内へ下記を記載します。

test1.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./test_1.css">
</head>
<body>
    <h1>見出し</h1>
    <div class="basket">
        <div class ="item">りんご</div>
        <div class ="item">みかん</div>
        <div class ="item">バナナ</div>
    </div>
</body>

test_1.css

@charset "utf-8";

h1{
    color: #00ffff;
}

.basket{
    width: 200px;
    border: solid 2px #000000;
    background-color: #ffff00;
}

.item{
    margin: 5px;
    width: 100px;
    border: solid 1px #ff0000;
    background-color: #00ff00;
}

次に④どのJavaScriptファイルを読み込むかの記載ができる必要があります。

test1.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="Js_button_1.js"></script>
</head>
<body>
    <h1>見出し</h1>
    <button type="button" id="button_test">PUSH</button>
</body>

Js_button_1.js

window.addEventListener('load', function() {
        document.getElementById("button_test").onclick = function() {
            alert('Hello');
        };
});

これくらいまで理解しておけば、JavaScript、React.jsにいってもあまり困らないでしょう。

ただし、サイトを参考にしていこうとした場合は、以下のものについても理解しておく必要があります。

・var、const、letの違いと使い分け

・アロー関数

・class構文とnew 演算子