本記事のゴール
・Reactとは何か？を知る
・React開発をするためにどの部分をいじればいいか知る。
・React開発をするためにどの部分をいじればいいか知る。
■Reactとは？
・Reactとは、ウェブサイトやウェブアプリのUIを作成するためのJavascriptライブラリのこと。
・仮想DOMにより、変更されたページ部分だけを更新するため、処理が早い。(ページ全体を更新しなくていい)
■Reactをローカルで動かせるようにする。
インストール手順は他の方がまとめてくださっているので、そちらを参照お願いします。
ここでは、Node.jsというバックエンドで動くJavascriptをインストールしたとします。
完了すると以下のようなフォルダ構成となっているでしょう。
my-app
|-README.md
|-node_modules
|-package.json
|-public
| |-index.html
| |-manifest.json
|
|-src
|-App.css
|-App.js
|-App.test.js
|-index.css
|-index.js
|-logo.svg
|-setupTests.js
これを実行し、http://localhost:3000/にアクセスしてアイコンが表示されている状態まで実施したことを想定します。
これでサーバーが動いています。
このアプリケーションを構成する主なファイルが以下の3つです。
・index.js
メインプログラムとなるもの。HTMLとJavascriptのコンポーネントを組み合わせてレンダリングし、実際の表示を作成する。
・App.js
コンポーネントを定義したもので、実際に画面に表示されるものはここで定義される。
・index.html
HTMLのテンプレートファイル。index.jsによって読み込まれ、レンダリングされた結果が表示される。
