はじめに
ずっとやりたいと考えていたReactの勉強をはじめていきます！！
最終目標
- Reactについて少しでも知識をつける！
- 仕事でReactを使用する際の抵抗感を減らす
- 仕事でReactを触れるようになる
やること
- 公式サイトのチュートリアルを行う
- progateの関連サービス「mosya React」を活用する
- React勉強用のスマホアプリを入れて隙間時間に学習する
- 以前作った占いアプリをReactに書き換える！
- ※占いアプリの記事途中ですが、動くようになりました👏（←今度まとめたい）
がんばります！
Reactとは？
公式ドキュメントを読んでわかったこと。
- Facebookなどで有名なMeta社が開発している
- Web とネイティブユーザインターフェースのためのライブラリ（？？）
- ネイティブユーザーインターフェース＝スマホアプリなど、端末に直接インストールするアプリの見た目（UI）のこと
- コンポーネントを使って構築できる
- さまざまなコンポーネントを、シームレスに組み合わせながら開発できるのが
Reactの設計理念 - ReactコンポーネントはJavaScriptの関数
- マークアップ構文は
JSXと呼ばれる。Reactが普及させたJavaScriptの構文拡張 - JSXマークアップは関連するレンダリングロジックのすぐそばに配置できる
- Reactコンポーネントは簡単に作成、保守、削除ができる
- htmlファイルとcssファイルのように分かれていないとか、上から
<template>エリア、<script>エリア、<style>エリアと分かれていないということかな？
- ページ全体を更新せず、インタラクティブなコンポーネントを表示できる
- Reactでアプリ全体を構築する場合はNext.jsやRemixのようなフルスタックのフレームワークを使うと良い
- アプリ全体を作るならNext.jsやRemixを使う
✅ 画面のボタンやフォームを作る
✅ 部品を組み合わせてページを作る
❌ ページの切り替え（ルーティング）
❌ サーバーからデータを取ってくる（データフェッチ）
…といった「アプリ全体の仕組み」までは担当していない。
- 開発アプローチの変更に慎重に取り組んでいて、完成された機能しかリリースしない
- コミュニティが充実している
- 有志の日本語ドキュメントもある
まとめ
今回はReactの概要をまとめました！
次回の記事では公式ドキュメントのチュートリアルを活用しながら学習していきます📖