<aside> 💡 この模写課題は途中から追加された課題なので、個人シートの進捗管理タブにこの課題の枠がない場合がありますが、気にせず進めてください。 目安所要日数は3~4日です。

</aside>

<aside> 📒 目次

</aside>

目的

前回の課題でJavaScriptについて学習しました。最終課題ではMeta(旧Facebook社)が開発したJavaScriptライブラリであるReactを使用します。現在FacebookをはじめInstagram、Netflix、Yahoo!などでも採用されているライブラリになります。今回の課題では最終課題のためにJavaScriptとReactで同じ機能を持つコードを作成してもらいJavaScriptとReactの違い、Reactの重要な概念であるpropsとstateを体感することが目的になります。

<aside> 💡 新しい知識がどんどん出てくるためいきなりすべてを理解しようとすることはおすすめしません。あくまで雰囲気を掴むことが目的なので、ある程度理解できたら次へ進みましょう。

</aside>

完成像

https://codesandbox.io/s/javascript-3j77h7?file=/index.html

画面に表示されているのが今回の課題で作成するものです。機能としてボタンをクリックするとボタンに表示している文字をスクリーンに表示します。コードをいじってみたい方は右下にある「Open Sandbox」を押して確認してみましょう。コードを見ると純粋なJavaScriptで作成されているのがわかると思います。

JavaScript篇

リポジトリの作成方法

JavaScriptフォルダの作成

まず任意のプロジェクト名でフォルダを作成します(例：example-application)。次にjavascriptフォルダを作成してコードを写経してください。

ディレクトリ構成

example-application
└── javascript
    ├── index.html
    ├── script.js
    └── style.css

写経

下のリンクから、それぞれのファイルの内容を書き移しましょう。

index.html

script.js

style.css

index.htmlをブラウザで表示させ完成像と同じ見た目、機能であればjavascriptフォルダは完成です。