React学習 その2 : Reactでのコンポーネントの作成について

現在、freeCodeCampのReactを進めています。

前回の記事では、Reactの歴史やJSXでの規則、classを指定する時には、classNameを使用するということを勉強することができました。

今回は、

• Create a Stateless Functional Component ( ステートレス機能コンポーネントの作成 )
• Create a React Component (Reactコンポーネントを作成する)
• Create a Component with Composition (コンポジションでコンポーネントを作成する)
• Use React to Render Nested Components (Reactを使ってネストしたコンポーネントをレンダリングする)
• Compose React Components (Reactコンポーネントを構成する)
• Render a Class Component to the DOM (クラスコンポーネントをDOMにレンダリングする)
• Write a React Component from Scratch (Reactコンポーネントをスクラッチから書く)

今日は、上記の内容について学んだことを書いていこうと思います。

Create a Stateless Functional Component

Reactのコンポーネントは、2つの方法で作成できるようです。

1つ目が

JavaScript関数を使用する
この方法でコンポーネントを定義すると、ステートレス関数型コンポーネントが作成されるようです。
ステートレスコンポーネント：データを受け取ってレンダーすることができるが、データの変更を管理または追跡することをしないコンポーネント

※ステートレス関数型コンポーネントは、Reactのバージョン16.8以降、Hooksという新しい機能が導入されたことにより、より強力になりました。Hooksを使用することで、関数コンポーネントでも状態を管理し、ライフサイクルメソッドを利用することができます。

最近よく、ステートレス関数方コンポーネントは使われているようです。

const DemoComponent = function() {
  return (
    <div className='customClass' />
  );
};

※青色マーカー：React では関数名を大文字で始める必要がある。

Create a React Component

Reactのコンポーネントの2つ目の作成の方法として、

ES6 の class 構文による方法があるようです。

class Kitten extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

上記では、React.Component クラスを拡張した ES6 クラス Kitten が作成され、 Kitten クラスから、ローカルの state やライフサイクルフックといった数多くの便利な React 機能にアクセスできるようになりました。

ライフサイクルフック：関数コンポーネント内で特定のタイミングで実行される関数のこと。

state：コンポーネントが保持する状態の値のこと。

上記の2つの意味は、課題を進めていくと理解できました。

クラスの中にsuper() を呼び出す constructor が定義されていますが、定型分としてよく使うようです。
どういう機能を持っているかというと、「（React.Component）のコンストラクタを呼び出して、コンポーネントを正しく初期化している」ようです。

super( )：親クラスのメソッドやコンストラクタを参照するために使用される。
　　　　　なので、super(props)は、親クラスのコンストラクタを呼び出し、現在のコンポーネントのpropsを渡しています。

Create a Component with Composition

複数の React コンポーネントをまとめて作成する方法を学びました。

下記がサンプルコードです。

React で、別のコンポーネントを参照するカスタム HTML タグが出現すると (この例では < /> で囲まれたコンポーネント名)、そのコンポーネントのマークアップがタグの場所にレンダーされます。 これにより、ParentComponent コンポーネントと ChildComponent との間の親子関係が示されます。

Use React to Render Nested Components

コンポーネントコンポジションは React の強力な機能の一つになるようで、UI を基本的な構成要素に分解すると、それらの要素がコンポーネントになります。

下記がサンプルコードです。

上記のように、
Fruits の中にTypesOfFruit コンポーネントをネストし、親コンポーネントとしてTypesOfFoodが存在しています。

こうすることで、
アプリケーションロジックの処理を担うコードと UI を担うコードとを切り分けられるようになり、 複雑なプロジェクトの開発と保守を大幅に簡素化できるようになるようです。

Compose React Components

ES6 スタイルのクラスコンポーネントを他のコンポーネントの中でレンダリングするときも変わりはないようです。

下記がサンプルコードです。

2 つの異なるコンポーネントタイプを使用する、一連のネストされたコンポーネントができることが分かりました。

Render a Class Component to the DOM

ReactDOM API を呼び出さなければ、記述した React のコードは DOM にレンダーされないようです。

ReactのfreeCodeCampでは、Reactの旧バージョンで使用されるレンダリングメソッドを使用しているようです。

React旧バージョン (ReactDOM.render)

ReactDOM.render

Reactの旧バージョンで使用されるレンダリングメソッドです。このメソッドは、指定されたReact要素を、指定されたターゲットノード（DOM要素）に直接レンダリングします。例えば、ReactDOM.render(<ComponentToRender />, targetNode)のように使用するようです。

React18以降 (createRoot)

createRoot

React 18以降で導入された新しいレンダリングメソッドです。このメソッドは、ReactのConcurrent Modeと呼ばれる機能を活用して、より高度な非同期レンダリングをサポートするようです。

Write a React Component from Scratch

React コンポーネントをゼロから記述する方法を学びました。

React.Component を拡張する ES6 class があるようです。
このコンポーネントには、HTML (JSX からの) を返すかまたは null を返す render メソッドがあり、 これは React コンポーネントの基本的な形式なようでした。

下記がコードになります。

// この行の下にあるコードを変更
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render (){
    return (
  <div>
    <h1>My First React Component!</h1>    
  </div>
  )}
}

ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'))

となりました。

class MyComponent extends React.Component{ ... }

ここで、コンポーネントを定義して、

ReactDOM.render( <表示したいコンポーネント　/> , 表示させたい場所の要素 )

上記で、レンダリングすることができました。

Reactでは、コンポーネントの概念が重要になってくるようでした。
何も考えずにすると、コンポーネントの地獄になりそうです、、、
なので、UIを作成する際にどれをコンポーネント化するのか考える必要があるのですね。

今回は、ここまでになります。

また、次回〜。