JSXでCSSを適用させるために

初めに

  • Progateで躓いたところを中心にアウトプットすることで学習効率を向上させるだけでなく、備忘録としての役割を果たすために記　　 　事を書いていきます。

JSXでCSSを適用させるために何をしなくてはいけないのか？

  • HTMLにCSSを読み込ませる。

  • JSXは最終的にHTMLに挿入され、ブラウザで表示されるから。

具体例

index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
  • href="stylesheet.cssの記述を追記することで、HTMLのページにCSSを読み込ませることができる。

結語

  • JSXにCSSを適応させるためにはHTMLにCSSを読み込ませる。

  • JSXはがブラウザで表示されるためにはHTMLに挿入されてからなので、HTMLにCSSを読み込ませることはJSXにCSSを適応させる

　のと同じ。

  • 表示の流れとしてはApp.js→index.js→index.html