Merge branch 'main' of https://github.com/Atotti/React-Next.js-hands-on…

… into takuo2
Atotti · Dec 6, 2023 · 9162a47 · 9162a47
2 parents 2446fd1 + 4f18c53
commit 9162a47
Show file tree

Hide file tree

Showing 9 changed files with 210 additions and 0 deletions.
diff --git a/progress.png b/progress.png
diff --git a/rogo/chapter01/README.md b/rogo/chapter01/README.md
@@ -0,0 +1,8 @@
+# ReactとNext.jsについて
+## Reactとは
+インタラクティブなUIを構築するためのJavaScriptライブラリ
+
+## Next.jsとは
+Next.jsはWebアプリケーションを作成するための構成要素を提供するReactフレームワーク．
+
+ReactとNext.jsを活用して，完全にインタラクティブで，動的でパフォーマンスの高いWebアプリケーションを構築できる．
diff --git a/rogo/chapter02/README.md b/rogo/chapter02/README.md
@@ -0,0 +1,5 @@
+# UIのレンダリング
+- ブラウザはHTMLを読み取り，DOM(Document Object Model)を構築する
+- DOMは要素をツリー構造で管理する
+- JavaScriptを使ってDOMを操作できる．
+
diff --git a/rogo/chapter03/README.md b/rogo/chapter03/README.md
@@ -0,0 +1,36 @@
+# JavaSrciptでUIを更新する
+
+JavaScriptでdivタグの中にh1タグを作ってテキストを表示する
+
+```html
+<html>
+  <body>
+    // 名前(id)が一意のdivタグを作る
+    <div id="app"></div>
+    <script type="text/javascript">
+      // idがappの要素を見つける
+      const app = document.getElementById('app');
+ 
+      // 新しいh1タグを作る
+      const header = document.createElement('h1');
+ 
+      // Create a new text node for the H1 element
+      // h1タグの中身である新しいテキスト要素を作る
+      const text = 'Develop. Preview. Ship. 🚀';
+      const headerContent = document.createTextNode(text);
+ 
+      // h1タグの中身にテキストを入れる
+      header.appendChild(headerContent);
+ 
+      // divタグの中にh1タグを入れる
+      app.appendChild(header);
+    </script>
+  </body>
+</html>
+```
+
+上記のコードは命令型．
+UI構築では宣言型が好まれる．
+
+開発者がUIを構築するのに役立つ人気な宣言型ライブラリがReact．
+
diff --git a/rogo/chapter03/index.html b/rogo/chapter03/index.html
@@ -0,0 +1,24 @@
+<html>
+  <body>
+    <!-- 名前(id)が一意のdivタグを作る -->
+    <div id="app"></div>
+    <script type="text/javascript">
+      // idがappの要素を見つける
+      const app = document.getElementById('app');
+
+      // 新しいh1タグを作る
+      const header = document.createElement('h1');
+
+      // Create a new text node for the H1 element
+      // h1タグの中身である新しいテキスト要素を作る
+      const text = 'Develop. Preview. Ship. 🚀';
+      const headerContent = document.createTextNode(text);
+
+      // h1タグの中身にテキストを入れる
+      header.appendChild(headerContent);
+
+      // divタグの中にh1タグを入れる
+      app.appendChild(header);
+    </script>
+  </body>
+</html>
diff --git a/rogo/chapter04/README.md b/rogo/chapter04/README.md
@@ -0,0 +1,41 @@
+# Reactを始める
+Reactを使用するには，[unpkg.com](unpkg.com)という2つのReactスクリプトをロードする
+```html
+<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>
+    <script type="text/javascript">
+      const app = document.getElementById('app');
+    </script>
+  </body>
+</html>
+```
+## JSX
+JSXはJavaScriptの構文拡張機能．
+## Babel
+以下のスクリプトに貼り付ける
+```html
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+```
+
+
+```html
+<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>
+```
+
+
diff --git a/rogo/chapter04/index.html b/rogo/chapter04/index.html
@@ -0,0 +1,29 @@
+<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")
+        function Header() {
+            return (<h1>Develop. Preview. Ship. 🚀</h1>)
+        }
+        ReactDOM.render(<Header />, app)
+        function Header() {
+            return <h1>Develop. Preview. Ship. 🚀</h1>;
+        }
+        function HomePage() {
+            return (
+                <div>
+                //Headerの返り値の要素がdivタグの中に入る
+                <Header />
+                </div>
+            );
+        }
+        ReactDOM.render(<HomePage />, app);
+    </script>
+    </body>
+</html>
diff --git a/rogo/chapter05/README.md b/rogo/chapter05/README.md
@@ -0,0 +1,53 @@
+# コンポーネントを使用してUIを構築する
+## Reactの中心的な概念
+- [x] コンポーネント
+- [ ] props
+- [ ] state
+
+次の章でこれらを詳しく学び，その後Next.jsをインストールし，新しいReactの機能の勉強に移る．
+
+## コンポーネント
+UIはコンポーネントと呼ばれる小さな構成要素に分割できる．
+コンポーネントを使用すると，再利用可能な小さなブロックを構築できる．レゴブロックのようにこれらを組み合わせて，より大きな構造を形成できる．
+アプリケーションの関係ないところに触れずにコンポーネントを簡単に追加，更新，削除ができきるため，コードの成長に合わせてメンテナンスが容易．
+
+### コンポーネントの作成
+Reactではコンポーネントは**UI要素を返す関数**．
+- 関数名を大文字にする
+- < />で囲んで使用する
+
+```html
+<script type="text/jsx">
+  const app = document.getElementById("app")
+  function header() {
+    return (<h1>Develop. Preview. Ship. 🚀</h1>)
+  }
+  ReactDOM.render(<Header />, app)
+</script>
+```
+
+### コンポーネントのネスト
+
+```Javascript
+function Header() {
+  return <h1>Develop. Preview. Ship. 🚀</h1>;
+}
+function HomePage() {
+  return (
+    <div>
+    //Headerの返り値の要素がdivタグの中に入る
+    <Header />
+    </div>
+  );
+}
+ReactDOM.render(<HomePage />, app);
+```
+### コンポーネントツリー
+Reactのコンポーネントをネストし続けるとコンポーネントツリーが形成される．
+例えば，ヘッダーコンポーネントはロゴ，タイトル，ナビゲーションコンポーネントを含むことができる．
+このモジュール形式により，アプリ内でコンポーネントを再利用することができる．
+![component-tree](https://nextjs.org/_next/image?url=%2Flearn%2Fdark%2Flearn-component-tree.png&w=1920&q=75&dpl=dpl_B5e9zup6wfnXzBVECwDyccHrr5NV)
+
+
+
+
diff --git a/rogo/chapter05/index.html b/rogo/chapter05/index.html
@@ -0,0 +1,14 @@
+<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>