初投稿

概要

サークルでReactを使うと言われ、Reactについて調べていたら資料が大量に集まってしまい忘れたりして見返したいとき自分が見返しやすいようにまとめることにした

Reactとは

Reactとはユーザインターフェース(UI)を構築するためのJavaScriptライブラリである

Reactの基本ルール

React自身ではデザイン（CSS）は設計しない
React内でのHTMLのところはJSXという書き方で書く
Reactでのレンダリングを指定したエリア内はすべてReactで生成する（＝一部だけ生のHTMLで書くことはできない

ライブラリとは

いろいろな便利な機能が準備されていて、必要に応じて必要な機能を利用できる。つまり、作業を簡略化するために使用できる予め書き込まれたプログラムの集まりのことである（例：React、jQuery）

ライブラリとフレームワークの違いは何？

そもそもフレームワークとは

そもそもフレームワークとはアプリケーションを開発するのに必要な処理・機能が一通り揃っているものを示し（例：Vue.js）、アプリケーションとして動く骨組みが用意されているので別途プログラムを書かなくても最低限のアプリケーションとして動作できる。つまりフレームワークはデフォルトでアプリケーション開発に必要な機能がそろっているものであり、そこに自分の実装したい内容を追加していくものである

つまりライブラリとフレームワークの違いは何？

ライブラリとフレームワークはどちらもアプリケーション開発を効率化できるものだが、ライブラリは特定の機能を実装するときにコードを書く作業を簡略化でき、フレームワークはアプリケーションを開発するときに必要な土台を作る作業を簡略化できる

参考

TypeScript

JavaScriptとTypeScriptの違い

JavaScriptは動的型付け言語であり、実行時に変数の型が決定されるため変数の型を宣言せずに値を代入できるが、型チェックがないため変数を間違えたり予期しないデータ型を扱ったりする可能性がある。TypeScriptは静的型付け言語であり変数を宣言する必要があるがコードをコンパイルする際に型チェックをしてくれ、型定義やインターフェース、ジャネリクスなどの機能を提供していてTypeScriptはプロジェクトの規模が大きくなるほど恩恵が強く得られる

.jsと.jsxと.tsと.tsxの違い

###.jsと.jsxの違い
どちらもJavaScriptで使う拡張子だが、.jsはdivなどのHTML風のタグやReactを使用しないプロジェクトや、Reactコーポネートを別のファイルで記述する場合などに適していて、純粋なJavaScriptを書くことが一般的であり、.jsxはdivなどHTML風のタグを使うときやReactUIコンポーネントを記述する際に使用します、JSX(JavaScript XML:Reactなどのライブラリで使用されるJavaScriptとXML風の記述を組み合わせたもの)がデフォルトで使用できReactUIコンポーネントを直接記述できる

.tsと.tsxの違い

.tsはReactを使用しないプロジェクトやReactコンポーネント以外のTypeScriptコードを記述する場合などの通常のTypeScriptコードを記述するために使用され、.tsxは.jsxのTypeScript版であり.jsxと同じで場合にTypeScriptを使用したいとき使用する

.tsファイル名

型の定義：〇〇〇Type.ts
カスタムフック：use〇〇〇.ts
定数定義：〇〇〇Constants.ts

参考

その他参考