Merge pull request #20 from Atotti/Ritsu

chap04
Atotti · Dec 5, 2023 · 45b3754 · 45b3754
2 parents b2dc50b + 37df82d
commit 45b3754
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/Ritsu/chapter04/chapter04.md b/Ritsu/chapter04/chapter04.md
@@ -0,0 +1,11 @@
+# React を始める
+プロジェクトでReactを使用するには、unpkg.com から二つのReactスクリプトをロードする必要あり。
+- react
+- react-dom
+
+## JSXとは
+JavaScript の構文拡張機能で、HTML のような構文で UI を記述することができる。
+しかし、そのままではブラウザはJSXを理解できないため、Babelなどのコンパイラツールを用いてJSXコードをJavaScriptに変換する。
+
+### Babel
+JavaScriptにはECMAScriptというバージョンがあるため、上位・下位バージョンとの互換性が課題になってしまう。新しいバージョンの記法で描いたJavaScriptコードを下位バージョンのJavaScriptで動くようにする変換するツールが必要であり、これが「Babel」である。ちなみにこの変換のことをトランスパイルと呼ぶ。
diff --git a/Ritsu/chapter04/index.html b/Ritsu/chapter04/index.html
@@ -0,0 +1,13 @@
+<html>
+    <body>
+        <div id = "app"></div>
+        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
+        <!-- Babel Script -->
+        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+        <script type="text/jsx">
+            const app = document.getElementById('app');
+            ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
+        </script>
+    </body>
+</html>