0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ハッカソンでの学び #1 React

Posted at

React

フロントエンドの開発にReactを使用しました。私はReactを使ったことがなく,様々な知識を得ました。それについて私の理解の及ぶ範囲で解釈し整理しておきます。

コンポーネント

Reactはコンポーネントという単位に分けて画面のUIを作っていくことを知りました。各ページにはメインのコンポーネントがあり,それを記述したファイルにほかのコンポーネントをインポートして一つの画面を完成させます。今回は基本的に,同じ画面内のコンポーネントは同じディレクトリに配置しました。ヘッダーや背景など,すべてのページに共通するコンポーネントは同じ階層に「components」というディレクトリを作成し,そこに配置しました。コンポーネントはどのファイルからでもインポートできるように常時エクスポートするようです。

状態管理「state」

Reactでは,画面上で状態が変化する変数にstateという状態管理をつけると,自動で画面が更新されます。変数にはそれを更新するための関数とセットでstateをつけます。(const [変数, 更新関数] = useState(初期値);)stateの概念は難しくてハッカソン中はわかりませんでしたが,後で調べて少しわかりました。

JSX

Reactでは,JavaScriptのなかでHTMLを記述できます。したがって,HTMLファイルとJavaScriptファイルを分けて開発するよりも要素の変更や追加,管理などが容易になります。JavaScriptで関数を定義して,returnの中にHTMLを記述しますが,一番外の親要素は一つでなければならないということを教わりました。なので,二つになる場合は<>>で囲むという方法をとるのがよいらしいです。

VSCodeの拡張機能

Reactでコンポーネントを作るときに,VSCocdの拡張機能「ES7+ React/Redux/React-Native snippets」をインストールすると素早くテンプレートが作成できます。空白のファイルで「rafce」と打つと候補が出てきてエンターでテンプレートを挿入できます。

まとめ

Reactの基本的な知識を得られたのではないかと思います。propsなどわからない概念がまだありますが,引き続き学び続けたいと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?