Open4
Reactの基本：学習メモ
KReactとは？
複雑なUIも、容易に生成することができるフロントエンドJavaScriptライブラリ（JavaScriptよりも簡単に生成することができる）
モバイル版を作成するにはReact Nativeを使用する（iOSとAndroid両方のスマートフォンアプリを作ることができる）
JavaScriptとは？
Webサイトに動きを付ける言語
- 「アプリやブラウザで複雑な動作を表示させたい」「ユーザーに見やすい表示にしたい」というケースによく使われる
ライブラリとは？
頻繁に使われるコードや機能を、いつでも簡単に使えるようにまとめたもの
- 複数のクラスによって構成される
Reactの主な使用用途
Webサイト上のアニメーションや動的な処理の実装
- ブラウザはJavaScriptを実行できるので、特別な環境構築をせずとも実行可能
Reactの特徴
K環境構築
1. npm/Node.jsのインストール
- 感じたこと
- 上記サイトではyean startで起動していたが、自分の環境では動かなく、ターミナル内をみて「npm start」が正と気づいた。おそらく、インストールした場所が違い、後者だとyeanだったのかも
- ターミナルを落とすとnpm startで起動していたものも落ちる
npmとは？
Node.jsのパッケージを管理するシステム
パッケージとは？
モジュール（他のプログラムから利用することを目的としたクラスや関数などのプログラム）をまとめて機能するようにしたもの
Node.jsとは？
パソコン上で動かせるようにしてくれるJavaScript実行環境
React開発に必要なツールチェーンを整え、効率的な開発環境を構築することができる
KReactでHello World
src¥App.js のPタグ内に記載されている「Edit <code>src/App.js</code> and save to reload.」を書き換える
- 各フォルダの意味は？
- node_modules
- Node.js のモジュール（プログラム）関連がまとめられている
- 大半は Node.js でサーバープログラムを起動して動かすために必要なもの
- Node.js のモジュール（プログラム）関連がまとめられている
- public
- Webで公開されるファイル（直接ファイルにアクセスできるもの）をまとめておくところ
- src
- JavaScriptのソースコード関連がまとめてある
- Reactのプログラムと、プログラムで使うファイル類（CSS）など
- JavaScriptのソースコード関連がまとめてある
- node_modules
- 生成されるファイルについて
- index.js
- Reactアプリの起点となるメインファイル
- import部分では必要なライブラリやファイル等をインポート
- createRootメソッドを使用して、id属性が 'root'であるHTML要素をroot変数に代入
- App.js
- 実際の見た目であるUI部分を担当
- import部分では必要なロゴファイルとcssをインポート
- App.test.js
- 実施するテストコードが記載されているファイル
- index.js
- フォルダの流れについて
- index.html：Reactアプリにアクセスすると「index.html」が読み込まれる
- index.js：「index.html」読み込み時に「index.js」が読み込まれ実行される
- App.js：「index.js」の中で「App.js」（Appコンポーネント）が読み込まれ表示される
- 感じたこと
- HTMLを書いているみたいなのに、Reactでは「JSX」でややこしいなあ
- index.htmlが表示されるメインファイルだから、必然的に書いていく部分もindex.jsだと思ったらApp.js...
KJSXについて
JSXとは？
JavaScriptの構文拡張で、JavaScriptファイル内にHTMLのようなコードを記述できるようにするもの
- 注意点
- return内に複数の要素があるとエラーになる
- 複数の要素がある場合は、添付ように<div>タグで囲んで、1つの要素にまとめる必要がある
- 複数の要素がある場合は、添付ように<div>タグで囲んで、1つの要素にまとめる必要がある
- return内に複数の要素があるとエラーになる
- 感じたこと
- コメントは {/* */} のように{}で囲う必要がある。最初つけ忘れそう〜〜