ReactJSはライブラリですか、それともフレームワークですか？

ReactJSはライブラリであり、完全なフレームワークではありません。ユーザーインターフェースの構築に特化しており、ルーティング、データ取得、サーバーレンダリングについては、React RouterなどのツールやNext.jsなどのフレームワークと組み合わせて使用します。

AIツールはReactコードの作成に役立ちますか？

はい。GitHub CopilotやChatGPTなどのアシスタントは、コンポーネントのひな形作成、エラーの説明、クラスコンポーネントのHooksへの変換などを行うことができます。AIはReactDOM.renderのような古いAPIを提案する可能性があるため、生成されたコードは必ず確認してください。

初心者向けReactJSチュートリアル

⚡ スマートサマリー

ReactJSは、数多くの最新のWebサイトやモバイルアプリケーションのユーザーインターフェースを支えています。このページでは、ReactJSライブラリの概要、セットアップ方法、そしてコンポーネント、JSX、状態、プロパティ、イベントがどのように連携して動作するのかを解説します。

⚛️ Foundation: ReactJSはオープンソースのコンポーネントベースのフレームワークです。 JavaFacebook（現Meta）で開発された、高速でインタラクティブなユーザーインターフェースを構築するためのスクリプトライブラリ。
🧩 コンポーネント： 関数やクラスとして記述された再利用可能な構成要素によって、UIロジックは独立した保守しやすい部分に分割されます。
📝 JSX: A Javaスクリプト構文拡張機能を使用すると、HTMLのようなマークアップと式を同じファイル内に記述できます。
🔄 州と小道具： ステートはコンポーネント内部のプライベートで変更可能なデータを格納し、一方、プロップは読み取り専用のデータをコンポーネントに渡します。
⚙️ 設定パス: CDNスクリプトタグは簡単な実験に適していますが、npmパッケージやViteは本格的なプロジェクトに適しています。
🚀 現代の実践: Hooksを使用した関数コンポーネントとReact 18以降のcreateRoot APIが、現在推奨される標準となっています。
💼 キャリアへの影響: Reactのスキルは、世界中のフロントエンド開発者の求人情報において、依然として最も需要の高いスキルの一つである。

プロフィール

ReactJSとは何ですか？

ReactJS オープンソースのフロントエンドです Javaユーザーインターフェイスを構築するためのスクリプトライブラリ。 ReactJS Meta（旧Facebook）と、個人開発者や企業からなるコミュニティによって維持管理されています。シングルページアプリケーションやモバイルアプリケーションの構築における基盤として広く利用されています。非常に使いやすく、再利用可能なUIコンポーネントを作成できます。

React の最初の行を書く前に、ライブラリが通常のコードとどう違うのかを知っておくと役立ちます。 Javaスクリプト。次のセクションでは、その主要な機能について説明します。

ReactJSの特徴

JSX: JSXは拡張機能です Javaスクリプト。ReactでJSXを使用することは必須ではありませんが、優れた機能の一つであり、使いやすいです。

コンポーネント: コンポーネントは純粋な Javaスクリプト関数は、ロジックを再利用可能な独立したコードに分割することで、コードを簡単に記述できるようにします。コンポーネントは関数としてもクラスとしても使用できます。コンポーネントには状態とプロパティも含まれているため、開発が容易になります。クラスコンポーネント内では、状態とプロパティが維持されます。

仮想DOM： Reactは仮想DOM、つまりメモリ上のデータ構造キャッシュを作成します。ブラウザのDOMには最終的な変更のみが反映されるため、レンダリング速度が維持されます。

Javaスクリプト式: JSXファイルでは、中括弧（例：{}）を使用してJS式を使用できます。

ReactJSの利点

ReactJSを使用する重要な利点は以下のとおりです。

ReactJSは、メモリ内のデータ構造キャッシュを利用する仮想DOMを使用しており、ブラウザのDOMには最終的な変更のみが反映されます。これにより、アプリの動作が高速化されます。
Reactのコンポーネント機能を使えば、お好みのコンポーネントを作成できます。作成したコンポーネントは再利用可能で、コードの保守性向上にも役立ちます。
ReactJSはオープンソースです Javaスクリプトライブラリなので、簡単に始められます。
ReactJSは短期間で非常に人気になり、Facebookなどの製品に採用されています。 InstagramApple、 Netflix, etc.
Meta社がReactJSライブラリを管理しているため、適切にメンテナンスされ、常に最新の状態に保たれています。
ReactJS を使用すると、デスクトップアプリとモバイルアプリの両方でリッチな UI を開発できます。
コーディングのほとんどがで行われるため、デバッグとテストが簡単です。 Javaスクリプト HTMLではなく、

ReactJSのデメリット

ReactJSを使用する際のデメリット／欠点は以下のとおりです。

コードの大部分は JSX で記述されており、つまり HTML と CSS は Javaスクリプト。他のほとんどのフレームワークはkeeを好むため、かなり混乱する可能性があります。ping HTMLは別物です Javaスクリプトコード。
ReactJSのファイルサイズは比較的大きい。

トレードオフを理解した上で、React のセットアップに取り掛かりましょう。最も手っ取り早い方法は CDN から直接試すことで、まずはその方法を解説します。その後、実際のプロジェクト向けの npm ベースのセットアップについて説明します。

CDN から ReactJS を使用する

React を使い始めるには、まず ReactJS をページに追加する必要があります。CDN を使えば、ReactJS を簡単に使い始めることができます。 Javaスクリプトファイルは以下のとおりです。

CDN リンクを取得するには、従来の React ドキュメントサイトにアクセスしてください。 https://legacy.reactjs.org/docs/cdn-links.htmlすると、次の画像で説明されている必要なファイルが表示されます。

開発者向け

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

製品用

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

交換する バージョン react.development.js と react-dom.development.js の両方で、使用したい React のバージョンを指定してください。このページではバージョン 16 を使用しているため、以下の例は変更せずに実行できます。

💡注： これらの UMD/CDN ビルドは、React 18 までは機能するレガシーなアプローチであり、学習には依然として適しています。React 19 では UMD ビルドは提供されなくなり、React 18 以降では ReactDOM.render 　 createRoot — このページ末尾付近にあるReactのバージョンに関するセクションを参照してください。

CDNファイルを使用する予定がある場合は、クロスドメインの問題を回避するためにcrossorigin属性を保持するようにしてください。ReactJSコードはブラウザで直接実行できないため、Babelを使用してプレーンテキストにトランスパイルする必要があります。 Javaブラウザで実行する前にスクリプトを表示します。

使用できる BabelJS スクリプトは次のとおりです。

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

以下は、CDNファイルとBabelJSスクリプトを使用した、動作するReactJSのサンプルです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

出力：

コードの詳細については次の章で説明します。ここでは、CDN ファイルを使った動作を見ていきましょう。Babel スクリプトを直接使用するのは推奨される方法ではなく、初心者の方は今のところ ReactJS の学習にのみ使用してください。本番環境では、npm パッケージを使用して React をインストールする必要があります。

NPM パッケージの使用

Node.js がインストールされていることを確認してください。インストールされていない場合は、Node.js のチュートリアルを参照してください (https://www.guru99.com/node-js-tutorial.html) インストール。

Node.jsをインストールしたら、フォルダを作成します。 反応プロジェクト/.

プロジェクトのセットアップを開始するには、コマンドを実行します npm初期化.

フォルダ構造は以下のようになります。

reactproj\
package.json

次に、必要なパッケージをインストールします。

ReactJS のパッケージ一覧はこちらです。React をバージョン 16 に固定します。 ReactDOM.render このページに掲載されている例は、表示されているとおりに動作します。

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

コマンドプロンプトを開き、reactproj/フォルダ内で上記のコマンドを実行します。

フォルダを作成する src / すべてのJSコードが配置される場所です。ReactJSプロジェクトのすべてのコードはsrc/フォルダにあります。以下に示すように、index.jsファイルを作成し、reactとreact-domをインポートします。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactJSの基本的なコードを書きました。詳細は次の章で説明します。 こんにちは、 Guru99チュートリアル、そして同じものがID「root」を持つDOM要素にも与えられます。これは、以下に示すように、開始ファイルであるindex.htmlファイルから取得されます。

public/ というフォルダを作成し、以下に示すように index.html をその中に追加してください。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

react-scripts パッケージは、コードのコンパイルとサーバーの起動を行い、index.html などの HTML ファイルを表示します。以下の例のように、react-scripts を使用してコードのコンパイルとサーバーの起動を行うコマンドを package.json に追加する必要があります。

 "scripts": {
    "start": "react-scripts start"
  }

すべてのパッケージをインストールし、上記のコマンドを追加すると、最終的な package.json は次のようになります。

パッケージ.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

ReactJSのテストを開始するには、次のコマンドを実行します。

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

ブラウザが開きます URL http://localhost:3000/ 以下のように：

パブリック/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

同じプロセスを使用して実行します Java次の章でもスクリプトファイルについて説明します。すべての.jsファイルと.jsxファイルをsrc/フォルダに追加してください。ファイル構造は以下のようになります。

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

最初の React プロジェクトセットアップを作成する方法

このReactJSチュートリアルでは、最初のReactアプリケーションを作成するための手順を段階的に説明します。

ステップ1） 反応パッケージをインポートします。
1. ReactJS を始めるには、まず次のように React パッケージをインポートする必要があります。

import React from 'react';
import ReactDOM from 'react-dom';

2. ファイルをindex.jsという名前でsrc/フォルダに保存します。

ステップ2） シンプルに書く Code.
このチュートリアルでは React JS で簡単なコードを作成し、メッセージを表示します。 「こんにちは、 Guruチュートリアルが99個も！

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render 追加しますIDがrootの要素にタグを付けます。以下が、私たちが使用しているHTMLファイルです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

ステップ3） コンパイル Code.

この React.js チュートリアルの次に、ブラウザーで出力を取得するためにコードをコンパイルする必要があります。

フォルダー構造は次のとおりです。

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

次のように、package.json に最終ファイルをコンパイルするコマンドを追加しました。

"scripts": {
    "start": "react-scripts start"
  },

最終ファイルをコンパイルするには、次のコマンドを実行してください。

npm run start

上記のコマンドを実行すると、ファイルがコンパイルされ、エラーがあれば通知されます。問題がなければ、ブラウザが開き、ページが実行されます。 http://localhost:3000/

コマンド: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

ステップ4） 出力を確認します。
その URL http://localhost:3000 コードがコンパイルされると、以下に示すようにブラウザで開きます。

ViteでReactをセットアップする方法（最新のアプローチ）

上記の react-scripts の設定は、長年標準のスターターだった Create React App (CRA) から来ています。React チームは 2025 年 2 月に Create React App を正式に非推奨にしたため、新しいプロジェクトでは代わりに最新のビルドツールを使用する必要があります。現在最も人気のある選択肢はネジ起動が速く、より小さなビルドを生成する。

Viteを使って新しいReactプロジェクトを作成する方法は次のとおりです。

ステップ1） ターミナルでスキャフォールディングコマンドを実行してください。

npm create vite@latest my-react-app -- --template react

ステップ2） フォルダに移動して依存関係をインストールします。

cd my-react-app
npm install

ステップ3） 開発サーバーを起動します。

npm run dev

Viteはアプリを以下の場所で提供しています。 http://localhost:5173/ デフォルトでは、ファイルを保存するとすぐに再読み込みされます。

このページに掲載されている以前の設定との主な違いは以下のとおりです。

エントリファイルは src/main.jsx src/index.js の代わりに。
最新のReactをインストールします。 createRoot ReactDOM.render の代わりに。
index.html はプロジェクトのルートディレクトリにあり、public/ ディレクトリにはありません。
ビルドは以下で作成されます npm run build dist/フォルダにコピーします。

ルーティングやサーバーレンダリングなどのフルスタックのニーズには、React チームは次のようなフレームワークも推奨しています。 Next.js以下の章で学ぶ内容（JSX、コンポーネント、状態、プロパティ）はすべて、ViteまたはNext.jsプロジェクトでもそのまま適用できます。

JSXとは何ですか？

JSXは拡張機能です Javaスクリプト。これは、HTML を使用する権限を持つテンプレートスクリプトです。 Java一緒に脚本を書く。

JSX コードの簡単な例を次に示します。

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

React に JSX が必要な理由は何ですか?

UIにはHTMLが必要であり、DOM内の各要素には処理すべきイベントや状態変化などが存在する。

React の場合、HTML と Java同じファイル内にスクリプトを記述し、DOMの状態変化を効率的に処理します。

JSX の式

JSX で式を使用する方法の簡単な例を次に示します。

以前のReactJSの例では、次のようなコードを書いていました。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

次に、上記のコードを変更して式を追加します。式は中括弧 {} の中で使用され、実行時に展開されます。React の式は、 Javaスクリプト式。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

次に、ブラウザで同じことをテストしてみましょう。

上記のスクリーンショットを見ると、{display} 式が置換されていないことがわかります。React は、.js ファイル内で式が使用されている場合にどうすればよいかわかりません。

以下に示すように、変更を追加して .jsx ファイルを作成しましょう。

テスト.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

必要なコードを追加しましたので、index.js で test.jsx ファイルを使用します。 h1タグ index.js 内で使用される変数なので、上記の test.jsx に示されているように同じものがエクスポートされます。

以下は、index.js の修正後のコードです。

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

index.jsでtest.jsxを使用するには、まず以下のようにインポートする必要があります。

import h1tag from './test.jsx';

以下に示すように、ReactDOM.render で h1tag を使用できるようになりました。

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

ブラウザで同じことを確認したときの出力は次のとおりです。

ReactJSのコンポーネントとは何ですか?

成分は純粋な Javaロジックを再利用可能な独立したコードに分割することで、コードを簡単に記述できるようにするスクリプト関数。

機能としてのコンポーネント

テスト.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

という関数を作成しました。 Hello これは、上記のようにh1タグを返します。関数名は、以下に示すように要素として機能します。

const Hello_comp = <Hello />;
export default Hello_comp;

コンポーネント Hello HTMLタグとして使用されます。割り当てられた こんにちは_comp 変数であり、同じものがエクスポートを使用してエクスポートされます。

それでは、以下に示すように、このコンポーネントをindex.jsファイルで使用してみましょう。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ブラウザでの出力は次のとおりです。

コンポーネントとしてのクラス

以下は、クラスをコンポーネントとして使用する ReactJS の例です。

テスト.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

index.jsファイルでは、Helloコンポーネントを次のように使用できます。

index.js

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

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

コンポーネント Hello は HTML タグとして使用されます。。

これは同じ出力です。

クラスコンポーネントと関数コンポーネントおよびフックの比較

コンポーネントの記述方法を2種類ご紹介しましたが、どちらを使うべきでしょうか？このページでは、クラスコンポーネントについて解説しています。クラスコンポーネントは状態とライフサイクルの概念を明確にするため、初心者にとって非常に有用であり、既存のコードベースにも依然として見られます。しかし、React 16.8でHooksが導入されて以来、関数コンポーネントでも状態を保持できるようになり、今後はすべての新規コードで関数コンポーネントの使用が推奨されています。

側面	クラスコンポーネント	フック付き関数コンポーネント
州／地域	this.state と this.setState()	useState()フック
ライフサイクル	componentDidMount、componentDidUpdate、componentWillUnmount	useEffect()フックは3つすべてをカバーします
構文	その他の定型コード（コンストラクタ、バインド、this）	短く、このキーワードなし
ステータス	サポート対象、従来型	新しいコードに推奨

以下は、このページにある状態の例をuseStateフックを使って書き直したものです。

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

どちらのバージョンも同じ出力を生成します。以下の章で使用されているクラス構文を学習し、各例をHooksに変換する練習をしてください。

ReactJS の状態とは何ですか?

州とは Javaスクリプトオブジェクトは、ReactJSのレンダリングで使用するデータを保持するもので、propsに似ています。状態データはプライベートオブジェクトであり、クラス内のコンポーネントで使用されます。

状態の例

以下は、クラス内で状態を使用する方法を示す実例です。

テスト.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

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

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

ブラウザでテストすると次のようになります。

ReactJS の Props とは何ですか?

プロップとは、コンポーネント内で使用されるプロパティのことです。コンポーネント内で使用できるグローバルオブジェクトまたは変数として機能します。

関数コンポーネントへの小道具

以下は、関数コンポーネントに props を渡す例です。

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

上記のように、 MSG に起因するコンポーネント。同じものにアクセスできます。 小道具 Hello 関数の中には、 MSG 属性の詳細、および同じものが式として使用されます。

このコンポーネントは、index.js で次のように使用されます。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ブラウザでの出力は次のとおりです。

クラスコンポーネントへのプロパティ

クラス内のプロパティにアクセスするには、次のようにします。

テスト.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

その MSG 属性は、次のように、index.js のコンポーネントに渡されます。

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

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

これはブラウザでの出力です。

また、チェックしてください：- 初心者向け AngularJS チュートリアル: AngularJS をステップバイステップで学ぶ

コンポーネントのライフサイクル

コンポーネント、ステート、プロップについて理解できたので、次のステップは、Reactがコンポーネントのメソッドを呼び出すタイミングを理解することです。コンポーネントのライフサイクルは、初期化、マウント、更新、アンマウントの各段階に分かれています。

各段階の詳細な説明は以下のとおりです。

ReactJSのコンポーネントは、以下の段階を経て構成されます。

初期化: これはコンポーネントのライフサイクルの最初の段階です。

ここには、デフォルトの小道具と初期レベルの状態が含まれます。

取り付けこのフェーズでは、コンポーネントがDOM内にレンダリングされます。マウント状態では、以下のメソッドが使用可能です。

render(): このメソッドは、作成されたすべてのコンポーネントに対して使用できます。HTMLノードを返します。
componentDidMount(): これは、コンポーネントがDOMに追加された直後に呼び出されます。

更新この状態では、ユーザーがDOMを操作すると、DOMが更新されます。例えば、テキストボックスに何かを入力すると、状態プロパティが更新されます。

更新状態で使用可能なメソッドは以下のとおりです。

shouldComponentUpdate(): 再レンダリングの前に呼び出されます。コンポーネントを更新するかどうかを決定できます。true を返すと、コンポーネントが再レンダリングされます。
componentDidUpdate(): コンポーネントが更新された後に呼び出されます。

アンマウント: この状態は、コンポーネントが不要になった場合、または取り外された場合に発生します。

アンマウント状態で使用できるメソッドは以下のとおりです。

componentWillUnmount(): コンポーネントが削除または破棄される直前に呼び出されます。

ライフサイクルメソッドの実例

以下に、各段階で呼び出されるメソッドを示す動作例を示します。

例: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

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

ブラウザで出力を確認すると次のようになります。

ブラウザのコンソールには以下が表示されます。

ユーザーがテキストボックスに入力すると:

コンソールには、以下のメッセージが表示されます。

コンポーネントがレンダリングされるタイミングと更新されるタイミングがわかったところで、状態とイベントを実際の使用例、つまりフォームを通じたユーザー入力の処理に適用してみましょう。

フォームの操作

ReactJSでは、次のようなHTML入力要素、、および <select /> は独自の状態を持ち、setState() メソッドを使用してユーザーが操作したときに更新する必要があります。

この章では、ReactJSでフォームを操作する方法を見ていきます。

これが実際の例です:

フォーム.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

入力フィールドについては状態を維持する必要があるため、React は特別なメソッドを提供しています。 setStateこれは、状態が変更されるたびに状態を維持するのに役立ちます。実際のアプリケーションでは、これも呼ばれます。 event.preventDefault() formSubmit 内に記述することで、送信時にブラウザがページを再読み込みするのを防ぎます。

テキストボックスと送信ボタンには、onChange イベントと onClick イベントを使用しています。ユーザーがテキストボックスに文字を入力すると、onChange イベントが呼び出され、状態オブジェクト内の name フィールドが更新されます。以下にその例を示します。

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

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

ブラウザでの出力は次のとおりです。

ステップ1） テキストボックスに名前を入力してください。

ステップ2） 送信ボタンをクリックしてください。

ReactJS でのイベントの操作

フォームはユーザーとのインタラクションのソースの一つにすぎません。ReactJS でイベントを扱う方法は、 Javaスクリプト。で使用されているすべてのイベントハンドラを使用できます。 Javaスクリプト。setState() メソッドは、ユーザーが HTML 要素を操作したときに状態を更新するために使用されます。

以下は、ReactJSでイベントを使用する方法を示す実例です。

イベント.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

入力フィールドについては、状態を維持する必要があるので、そのために React は以下を提供します。 setState 変更があった場合でも状態を維持するのに役立つ方法。

私たちはイベントを利用しました 変更します (NAIST) および onClick テキストボックスとボタン上。ユーザーがテキストボックス内に入力すると、 変更します イベントが呼び出され、状態オブジェクト内の名前フィールドが以下のように更新されます。

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

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

ブラウザでの出力は次のとおりです。

ユーザーが名前を入力すると：

ユーザーが「ここをクリック」ボタンをクリックすると、次のようになります。

ReactJS でのインライン CSS の操作

コンポーネントがデータとイベントを処理するようになったら、最後のステップはスタイリングです。ReactJSにおけるインラインCSSを理解するために、動作例を見ていきましょう。

追加スタイル.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

h1タグにcolor: 'red'スタイルを追加しました。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

ブラウザでの出力は次のとおりです。

要素に適用したいスタイルを持つオブジェクトを作成し、上記の例に示すように式を使用してスタイルを追加できます。

ReactJS での外部 CSS の操作

外部CSSファイルを作成しましょう。そのためには、css/というフォルダを作成し、その中にstyle.cssというファイルを追加してください。

style.cssの

.h1tag {
color:red;
}

style.css をindex.html ファイルに追加します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

それでは、.jsx ファイル内の h1 タグにクラスを追加しましょう。

追加スタイル.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

className属性にはクラスの詳細情報が与えられます。JSXでは、 className HTML の class 属性の代わりに、class は予約語であるため、 Javaスクリプトです。それでは、ブラウザでテストしてみましょう。

ブラウザでh1タグを検証すると、以下のような表示になります。

class="h1tag" が h1 タグに正常に追加されていることが確認できます。

ReactDOM.renderがcreateRootに置き換えられた理由

このページにあるすべての例では、ReactDOM.render を使用してアプリをマウントしています。これは、このコースで対象としている React 16 および 17 では正しい方法です。2022 年 3 月にリリースされた React 18 では、このエントリポイントが createRoot API に置き換えられ、React 19 では ReactDOM.render が完全に削除されました。その理由は並行処理です。createRoot を使用すると、React は UI の複数のバージョンを同時に準備し、優先度の低いレンダリングを中断し、ping そして、アニメーションも滑らかになります。自動バッチ処理、useTransition、Suspenseベースのストリーミングといった機能はすべて、これに依存しています。

このページ全体で使用されている index.js の現代版は次のようになります。

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

ここで学んだ他のすべて（コンポーネント、JSX、状態、プロパティ、イベント）は、エントリポイントでのこの1行の変更後も同じように機能します。このようなバージョンの違いは、 React JSの面接の質問そのため、両方のAPIを理解しておくことは有益です。

よくあるご質問

ReactJS はライブラリであり、完全なフレームワークではありません。ユーザーインターフェースの構築のみに特化しています。ルーティング、データ取得、サーバーレンダリングについては、開発者は React Router などのツールやフレームワークと組み合わせて使用します。 Next.js.

固体 Javaスクリプトの基本に関しては、ほとんどの学習者は定期的な練習を2～4週間続けることで、コンポーネント、JSX、ステート、プロップスを習得します。フック、ルーティング、API呼び出しなど、実務に必要なスキルを身につけるには、通常、小規模なプロジェクトを2～3か月かけて構築していく必要があります。

ReactJS は Web サイトを構築するためにブラウザ DOM にレンダリングしますが、React Native は同じコンポーネントモデルを使用してネイティブ iOS と Web サイトを構築します。 Android アプリ。両者間でスキルは移転可能ですが、React NativeはHTMLタグをネイティブUIコンポーネントに置き換えます。

はい。アシスタントとしては GitHubコパイロット (NAIST) および AI言語モデルを活用してコードのデバッグからデータの異常検出まで、コンポーネントのスキャフォールディング、エラーの説明、クラスコンポーネントのHooksへの変換が可能です。AIはReactDOM.renderのような古いAPIを提案する可能性があるため、生成されたコードは必ず確認してください。

近い将来にそうなる可能性は低いでしょう。AIは定型的なコーディング作業を効率化しますが、コンポーネントアーキテクチャの設計、アプリケーション全体の状態管理、アクセシビリティのレビュー、本番環境の問題のデバッグなどには、依然として開発者が必要です。ReactとAIを活用したワークフローを学ぶことは、あなたの価値を下げるのではなく、高めることになります。

また、チェックしてください：- React インタビューのトップ 70 の質問と回答 (更新)

初心者向けReactJSチュートリアル

ReactJSとは何ですか？

ReactJSの特徴

ReactJSの利点

ReactJSのデメリット

CDN から ReactJS を使用する

開発者向け

製品用

NPM パッケージの使用

最初の React プロジェクトセットアップを作成する方法

ViteでReactをセットアップする方法（最新のアプローチ）

JSXとは何ですか？

React に JSX が必要な理由は何ですか?

JSX の式

ReactJSのコンポーネントとは何ですか?

機能としてのコンポーネント

コンポーネントとしてのクラス

クラスコンポーネントと関数コンポーネントおよびフックの比較

ReactJS の状態とは何ですか?

状態の例

ReactJS の Props とは何ですか?

関数コンポーネントへの小道具

クラスコンポーネントへのプロパティ

コンポーネントのライフサイクル

ライフサイクルメソッドの実例

フォームの操作

ReactJS でのイベントの操作

ReactJS でのインライン CSS の操作

ReactJS での外部 CSS の操作

ReactDOM.renderがcreateRootに置き換えられた理由

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

ReactJSとは何ですか？

ReactJSの特徴

ReactJSの利点

ReactJSのデメリット

関連記事

CDN から ReactJS を使用する

開発者向け

製品用

NPM パッケージの使用

最初の React プロジェクト セットアップを作成する方法

ViteでReactをセットアップする方法（最新のアプローチ）

JSXとは何ですか？

React に JSX が必要な理由は何ですか?

JSX の式

ReactJSのコンポーネントとは何ですか?

機能としてのコンポーネント

コンポーネントとしてのクラス

クラスコンポーネントと関数コンポーネントおよびフックの比較

ReactJS の状態とは何ですか?

状態の例

ReactJS の Props とは何ですか?

関数コンポーネントへの小道具

クラスコンポーネントへのプロパティ

コンポーネントのライフサイクル

ライフサイクルメソッドの実例

フォームの操作

ReactJS でのイベントの操作

ReactJS でのインライン CSS の操作

ReactJS での外部 CSS の操作

ReactDOM.renderがcreateRootに置き換えられた理由

よくあるご質問

この投稿を要約すると次のようになります:

ニュースレターに登録する

最初の React プロジェクトセットアップを作成する方法