React課題1 調べたこと ✏️

React
2024.01.06

こんにちは、はるです.

所属している「もりけん塾」でReact課題に取り組んでいます.
問題文やレビュー内容は非公開なので、課題で調べたことをまとめることにしました.

初心者の学習ノートなので、認識の間違えている点がありましたらお問い合わせからご指摘いただけるとうれしいです.

開発環境 – コンポーネントの作成

Create React AppとStackBlitzを使用.
StackBlitzはPRに課題のデモを添付するため.

Create React App

複雑な設定要らずでReact開発を行えるビルド環境. 

今は非推奨になっている. = あくまで練習のために使う.
簡易的にReact環境を作って課題を進めていくため.

課題を完走したらVite x Reactを自分で勉強してみたいと思う.

npx create-react-app プロジェクト名

yを選択、不足のパッケージをインストール.

cd プロジェクト名

npm start // 開発サーバーの起動

localhost:3000で開発のブラウザーが利用できる.

確かに簡単… 環境がすぐ整ったので課題に進む.

基本のディレクトリ構造

今回のディレクトリ構造

public/index.html

メインのページ.
id=”root”がついたルート要素がある.

<body>
　<div id="root"></div> // ルート要素
</body>

Reactアプリの実行結果を反映するための場所.

src/index.js

エントリーポイント. = Reactアプリを実行するときに最初に呼び出されるファイル.

// Reactアプリに必要なライブラリ
import React from 'react';
import { createRoot } from 'react-dom/client';

// 今回作ったコンポーネント
import App from './App';

他にも固有のcssなどもimportできる.

「これからはじめるReact実践入門」書籍には、ReactDOMを使用すると書いてあったけど、すでに非推奨になっていたため createRootを使用した.

createRoot – React
The library for web and native user interfaces
ja.react.dev

createRootは、先ほどのid=”root”要素と紐付けて Reactアプリを反映するためのルートを作成できる.

const root = createRoot(document.getElementById('root'));
root.render( // renderしたいもの )

root要素を定義して、そこにrenderメソッドでコンポーネントを反映させる.

Appコンポーネントなら<App />

今回はStrictModeで囲みました. = 開発環境限定でバグを見つけるためのもの.

– React
The library for web and native user interfaces
ja.react.dev

App.js

コンポーネントファイル(UI部品). 今回はAppという関数を作成した.

  • 関数名はパスカルケース（文頭大文字 PascalCase）
  • 戻り値はReactの要素
  • 関数はエクスポートする = 他のモジュールから呼び出して使う.
export default function App() {
　return(
　　// コンポーネントにする要素
　)
}

このようにJavaScriptの関数を作成することでコンポーネントができる.

JSX

root.render()で出力するものはJSXというReact独自の式で表す.
JSコードの中にHTML風の（HTMLイコールではない）タグを埋め込めるもの.

使いながら覚えてこうと思い、少しだけ調べた.

  • 複数の要素はタグで囲む
<div>
　<p>hogehoge</p>
　<p>fugafuga</p>
</div>

囲むタグは<div>や<React.fragment>があり、後者は<></>と略すことができる.

  • 空要素は />で終える

<App />のように単体のタグは / が必要.

  • HTMLと異なる属性がある.

JSの予約語として使われているfor、classなどは使用不可. 他にも複数の単語でできている属性（tabindexなど）はキャメルケースに直す必要がある. この辺りはざっと調べただけなので使いながら覚える✏️

まとめ

すでにv18になっているReact.. 参考にしている書籍や、記事によっては古い情報のものもあり、今回も非推奨になっているものがいくつかあった.

リリースノートや公式の情報を確認して、新しいものを追うように気をつけたい.

💡もりけん塾で勉強しています .. JavaScriptを一緒に勉強する塾生さん募集中です💡

もりけんさん(@terrace_tec)のHPはこちら

スポンサーリンク