Zenn
🐣

Reactをはじめてみた 3日目。

2023/06/22に公開
React
poem
idea
idea

Reactをはじめてみた。

誰にも参考にならないかもしれない。
3日目 >>３時間ぐらいの学習時間

今日の学習資料

https://react.dev/learn

  • React ドキュメントへようこそ! このページでは、日常的に使用する React の概念の 80% を紹介します。
    とあったので、そこらへんを試しながら必要な部分を写経しておく。
  1. コンポーネントを作成してネストする方法
  2. マークアップとスタイルを追加する方法
  3. データの表示方法
  4. 条件とリストをレンダリングする方法
  5. イベントに応答して画面を更新する方法
  6. コンポーネント間でデータを共有する方法

0. プロジェクト作成　vite使うと簡単にプロジェクト作れるらしいのでそこから。

$ npm create vite@latest
√ Project name: ... react-quick-start
√ Select a framework: » React
√ Select a variant: » JavaScript

Scaffolding project in K:\machine\tmp\sync\html\react\react-quick-start...

Done. Now run:        

  cd react-quick-start
  npm install
  npm run dev

$ npm install

added 239 packages, and audited 240 packages in 15s

80 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm run dev

> react-quick-start@0.0.0 dev
> vite


  VITE v4.3.9  ready in 1246 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help


$ ls -1
index.html
node_modules/
package.json 
package-lock.json
public/
src/
vite.config.js

1. コンポーネントを作成してネストする方法

React アプリはコンポーネントから作られています。コンポーネントは、独自のロジックと外観を持つ UI (ユーザー インターフェイス) の一部です。コンポーネントは、ボタンほど小さい場合もあれば、ページ全体ほど大きい場合もあります。

React コンポーネントは、マークアップを返す JavaScript 関数です。

コンポーネントの作成とネスト

理解内容ざっくり

main.jsx 　#root にrender する、App import している
   ┗ App.jsx　Appの部品 書かれてる、その中で外部の部品(コンポーネント)の MyButton import している
      ┗ MyButton.jsx　MyButton の部品について書かれてる。
  • MyButton.jsx ファイルを作成
  • rfce タイプしてひな形生成。
MyButton.jsx

import React from 'react'

function MyButton() {
  return (
    <button>I'm a Button</button>
  )
}

export default MyButton
  • App.jsx
App.jsx

import MyButton from './MyButton'; # MyButton.jsxをimport
import './App.css'

function App() {
  return (
    <>
    <div>
      <h1>Wellcometo my app</h1>
      <MyButton /> # コンポーネント追加
    </div>
    </>
  )
}

export default App

  • コンポーネントの追加は以上
  • 公式注意書き

<MyButton />大文字で始まることに注意してください。
これにより、それが React コンポーネントであることがわかります。
React コンポーネント名は常に大文字で始める必要があり、HTML タグは小文字にする必要があります。

ここまでで把握できている部分で、命名規則はこんな感じ

場所 規則名称 内容ざっくり
コンポーネント名 パスカルケース（アッパーキャメルケース） 全ての単語の先頭を大文字にする
内部で使用する関数 ローワーキャメルケース 先頭の単語だけ小文字にする 
以下もコンポーネントだから、アッパーキャメルケース
const MyButton = () => {
	return (
		<button>I'm a Button</button>
	);
}

残りの変数とか配列とかの命名は、参画するプロジェクトに合わせて対応する感じかな。

ところでなんでexport default と書くのか？、後で読んでおく。
エクスポートのデフォルト

スタイルの追加

<img className="button" />
	class じゃない className
  • プロジェクト生成時にスタイルシートはsrc 以下に追加されていた。
  • スタイルシートは、コンポーネントごとに存在し、またそれをimportして読み込む。
  • sass を使用する場合どうするんだろうか…パッケージを読み込むだけで使えるらしい < 後で読む

データの表示

  • JSXでは、中カッコ{XXXX} 内に変数埋め込むことが出来る、また、複雑な式を入れることも可能
return (
  <h1>
    {user.name}
  </h1>
);

      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
      style 要素にwidthとheightをオブジェクトとして渡してる。
      両方とも値は、javaScript 変数に依存している

条件付きレンダリング

  • ifステートメントを使用して条件付きで JSX を含めることができます。
※isLoggedInの値によりコンポーネントの出し入れを行っている。

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

コンパクト化
<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>
  • 色々使えそう。

レンダリングリスト

コンポーネントのリストを表示するには、forloopやarray関数などの JavaScriptmap()機能を利用します。

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

<li>に属性があることに注目してくださいkey。リスト内の各項目に対して、その項目を兄弟間で一意に識別する文字列または番号を渡す必要があります。通常、キーはデータベース ID などのデータから取得される必要があります。React はキーを使用して、後で項目を挿入、削除、または並べ替えた場合に何が起こったかを認識します

keyがないとエラー吐いてたような気がする。

イベントへの対応

  • コンポーネント内で_イベント ハンドラー_関数を宣言することで、イベントに応答できる。
  • 後で目を通す イベントの応答 
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

※onClick={handleClick}最後に括弧がないことに注目してください。イベント ハンドラー関数を呼び出さないでください。イベント ハンドラー関数を渡す必要があるだけです。ユーザーがボタンをクリックすると、React はイベント ハンドラーを呼び出します。

画面を更新する

  • 多くの場合、コンポーネントに何らかの情報を「記憶」させ、それを表示したいことがあります。たとえば、ボタンがクリックされた回数をカウントしたい場合があります。これを行うには、コンポーネントに状態を追加します。

状態を追加するするために useStateをReact からインポートします

import { useState } from 'react';


function MyButton() {
  const [count, setCount] = useState(0);
//....

現在の状態　：count
状態を更新できる関数：setCount
慣例として と書くことになります

ボタンをクリックしてcount値に加算する

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

//onClickでhandleClickを呼び出し
//countに+ 1 の加算を行っています。

他、同じコンポーネントを複数回レンダリングすると、それぞれが独自の状態を取得します。
なので、複数ボタンをおいても、個々でカウントされるわけです。

App.jsx

import MyButton from './MyButton';
import './App.css'

function App() {
  return (
    <>
    <div>
      <h1>Wellcometo my app</h1>
      <MyButton />
      <MyButton />
      <MyButton />
    </div>
    </>
  )
}

export default App


MyButton.jsx

import React from 'react'
import { useState } from 'react';

const MyButton = () => {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
    }
    
    return (
        <button onClick={handleClick}>
             Clicked {count} times
        </button>
    );
}

export default MyButton

フックの使用

React によって提供される組み込みフックです。API リファレンスで他の組み込みフックを見つけることができます。既存のフックを組み合わせて独自のフックを作成することもできます
他の関数よりも制限が厳しくなります。フックはコンポーネント (または他のフック) の先頭でのみ呼び出すことができます

コンポーネント間でのデータの共有

前の例では、それぞれにMyButton独自の独立した がありcount、各ボタンをクリックすると、countクリックされたボタンの のみが変更されました。

ただし、多くの場合、データを共有し、常に一緒に更新するためのコンポーネントが必要になります。

MyButton両方のコンポーネントを同じ表示にして一緒に更新するにはcount、状態を個々のボタンから「上向き」に、すべてのボタンを含む最も近いコンポーネントに移動する必要があります

なので、カウントデータを保持する場所をMyButton からAppに変更し、Appからボタンの関数や、countの値を渡します。

App.jsx

import { useState } from 'react';
import MyButton from './MyButton';
import './App.css'

function App() {

  const [count, setCount] = useState(0);

  function handleClick() {
      setCount(count + 1);
  }

  return (
    <>
    <div>
      <h1>Wellcometo my app</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
    </>
  )
}

export default App


MyButton.jsx

import React from 'react'

const MyButton = ({ count, onClick }) => {   
    return (
        <button onClick={onClick}>
             Clicked {count} times
        </button>
    );
}

export default MyButton

ボタンをクリックすると、onClickハンドラーが起動します。各ボタンのプロパティは内の関数onClickに設定されているため、その中のコードが実行されます。このコードは を呼び出し、状態変数をインクリメントします。新しい値はプロップとして各ボタンに渡されるため、すべてのボタンに新しい値が表示されます。これを「状態を持ち上げる」といいます。状態を上に移動すると、コンポーネント間で状態が共有される。

クイックスタートは以上

気づき

  • 普通に関数使えるが、コンポーネントの命名規則をしっかり守らないと変なエラー出そう。
  • フックは事前に学習していたのですんなりわかった
  • 事前に動画など見ていたおかげかすんなり内容が入ってきたのが良かった、わからない部分はできれば動画を探したほうがいいかも。
  • google翻訳今回とても役に立った、公式だいたい内容伝わった。

Discussion