React入門：コンポーネントの作成と使用方法 – JavaScriptで始めるプログラミング

React入門：コンポーネントの作成と使用方法 – JavaScriptで始めるプログラミング

Reactは、ユーザーインターフェース構築のための人気のJavaScriptライブラリです。このガイドでは、Reactの基本コンセプトであるコンポーネントの作成と使用方法について学びます。さらに、実際の例を通じて理解を深めていきます。

コンポーネントとは何か？

コンポーネントとは、UIの一部を再利用可能な部品としてまとめたものです。コンポーネントを使うことで、コードの可読性や保守性が大幅に向上します。

基本的なコンポーネントの作成

まず、基本的なコンポーネントを作成する方法を見ていきましょう。次のような簡単なコンポーネントを作成します。

function Hello() {
  return <h1>こんにちは、React!</h1>;
}
export default Hello;

上記のコードでは、Helloという名前の関数コンポーネントを作成しました。return文の中で、表示したい内容をJSXで返しています。

コンポーネントの使用方法

次に、作成したコンポーネントを使用する方法について説明します。以下のコードを参考にしてください。

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(<Hello />, document.getElementById('root'));

この例では、Helloコンポーネントをインポートし、ReactDOM.renderを使用して、rootというIDを持つHTML要素にコンポーネントをレンダリングしています。

Propsを使用したコンポーネントの拡張

さらに、コンポーネントにデータを渡すためにpropsを使用する方法について説明します。次の例を見てみましょう。

function Hello(props) {
  return <h1>こんにちは、{props.name}!</h1>;
}
export default Hello;

このコードでは、propsを使用してnameというプロパティを受け取り、それを表示しています。同様に、使用する側も変更が必要です。

ReactDOM.render(<Hello name="Taro" />, document.getElementById('root'));

このようにして、動的にデータを渡して表示することが可能になります。

まとめ

以上がReactコンポーネントの基本的な作成と使用方法についての説明です。コンポーネントを使うことで、コードの再利用性が高まり、より効率的に開発を進めることができます。より詳しい情報は、公式ドキュメントを参照してください。

React公式ドキュメント(外部リンク)

コメントを残す