初心者向け ReactJS チュートリアル: ステップバイステップの例で学ぶ

ReactJSとは何ですか？

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

ReactJSの特徴

JSX : JSX は JavaScript の拡張機能です。 React で JSX を使用することは必須ではありませんが、優れた機能の XNUMX つであり、使いやすいです。

コンポーネント: コンポーネントは純粋な JavaScript 関数のようなもので、ロジックを再利用可能な独立したコードに分割することでコードを簡単にします。コンポーネントを関数として使用したり、コンポーネントをクラスとして使用したりできます。コンポーネントには、作業を容易にする状態 (props) もあります。クラス内では、各プロパティの状態が維持されます。

仮想DOM： React は仮想 DOM、つまりメモリ内データ構造キャッシュを作成します。DOM の最終的な変更のみが後でブラウザの DOM に更新されます。

Javascript 式： JS 式は、中括弧 (例: {}) を使用して jsx ファイル内で使用できます。

ReactJSの利点

ReactJS を使用することの重要な利点/利点は次のとおりです。

ReactJS はメモリ内のデータ構造キャッシュを利用する仮想 dom を使用し、最終的な変更のみがブラウザー dom で更新されます。これによりアプリが高速化されます。
React コンポーネント機能を使用して、選択したコンポーネントを作成できます。コンポーネントは再利用でき、コードのメンテナンスにも役立ちます。
Reactjs はオープンソースの JavaScript ライブラリなので、簡単に始めることができます。
ReactJS は短期間で非常に人気があり、Facebook と Instagram によって維持されています。 Appleなど多くの有名企業で採用されており、 Netflix, etc.
Facebook はライブラリである ReactJS を保守しているため、よく保守され、更新され続けます。
ReactJS を使用すると、デスクトップアプリとモバイルアプリの両方でリッチな UI を開発できます。
コーディングのほとんどがで行われるため、デバッグとテストが簡単です。 Javascript HTML 上ではなく。

ReactJSのデメリット

ReactJS を使用する場合の短所/欠点は次のとおりです。

コードのほとんどは JSX で書かれています。つまり、HTML と CSS は JavaScript の一部ですが、他のほとんどのフレームワークは Html を JavaScript コードから分離することを好むため、非常に混乱する可能性があります。
ReactJSのファイルサイズは大きいです。

CDN から ReactJS を使用する

React の操作を開始するには、まず Reactjs をインストールする必要があります。以下に示すように、CDN JavaScript ファイルを使用すると、reactjs の使用を簡単に開始できます。

Reactjs の公式サイトにアクセスして CDN リンクを取得します。 https://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>

交換する バージョン リアクト開発.js とリアクトダム.developement.js の両方の最新の反応バージョンを使用します。最後にファイルをホストして、reactjs の操作を開始できます。

CDN ファイルの使用を計画している場合は、クロスドメインの問題を避けるために、必ずクロスオリジン属性を維持してください。 Reactjs コードはブラウザーで直接実行できないため、ブラウザーで実行する前に Babel を使用して JavaScript に変換する必要があります。

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

<script src="https://unpkg.com/[email protected]/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/[email protected]/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 パッケージの使用

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

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

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

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

reactproj\
package.json

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

以下は、reactjs のパッケージのリストです。

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

フォルダを作成する src / すべての JS コードがそのフォルダーに格納されます。 Reactjs プロジェクトのすべてのコードは src/ フォルダーで利用可能になります。以下に示すように、ファイルindex.jsを作成し、import 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 チュートリアルから これは、以下に示すように、開始ファイルである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 パッケージは、コードのコンパイルと、HTML ファイル (index.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",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

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

npm run start

C:\reactproj>npm run start		
> [email protected] 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>

次の章でも、同じプロセスを使用して JavaScript ファイルを実行します。すべての js および .jsx ファイルを src/ フォルダーに追加します。ファイル構造は次のようになります。

reatproj/
	 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. ファイルを src/ フォルダーにindex.jsとして保存します。

ステップ2） 簡単なコードを書きます。
このチュートリアルでは React JS で簡単なコードを作成し、メッセージを表示します。 「こんにちは、Guru99 チュートリアルからです!」

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） コードをコンパイルします。

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

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

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

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

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

最終ファイルをコンパイルするには、次のコマンドを実行します。

npm run start

上記のコマンドを実行すると、ファイルがコンパイルされ、エラーがあれば通知されます。すべてが正常であれば、ブラウザが開き、次の場所にあるindex.htmlファイルが実行されます。 http://localhost:3000/index.html

コマンド: npm run start:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

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

JSXとは何ですか？

JSXはJavaScriptの拡張機能です。HTMLと Javascript 一緒に。

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

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

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

UI の場合は HTML が必要で、DOM 内の各要素には処理されるイベントや状態の変更などが含まれます。

React の場合、同じファイル内で Html と JavaScript を使用し、効率的な方法で 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 の式は JavaScript の式と同じです。

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 内の text.jsx ファイルを使用します。 h1タグ script.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のコンポーネントとは何ですか?

コンポーネントは純粋な JavaScript 関数のようなもので、ロジックを再利用可能な独立したコードに分割することでコードを簡単にします。

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

テスト.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 変数と同じものは、export を使用してエクスポートされます。

次に示すように、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 タグとして使用されます。つまり、。

これは同じ出力です。

ReactJS の状態とは何ですか?

状態は、reactjs レンダーで使用されるデータを含む props に似た JavaScript オブジェクトです。状態データはプライベートオブジェクトであり、クラス内のコンポーネント内で使用されます。

状態の例

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

テスト.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 はコンポーネント内で使用されるプロパティです。これらは、コンポーネント内で使用できるグローバルオブジェクトまたは変数として機能します。

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

以下は、関数コンポーネントに 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')
);

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

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

クラス内の props にアクセスするには、次のように実行できます。

テスト.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 をステップバイステップで学ぶ

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

コンポーネントのライフサイクルは、初期化、マウント、更新、アンマウントの各段階に分かれています。

ここでは各コンポーネントについて詳しく説明します。

reactjs のコンポーネントには次の段階があります。

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

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

取り付け: このフェーズでは、コンポーネントが dom 内でレンダリングされます。マウント状態では次のメソッドを利用できます。

ComponentDidMount(): これは、コンポーネントが dom に追加されたときにも呼び出されます。

render(): 作成されたすべてのコンポーネントに対してこのメソッドがあります。 HTML ノードを返します。

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

更新状態で使用できるメソッドは次のとおりです。

shouldComponentUpdate() : コンポーネントが更新されたときに呼び出されます。

ComponentDidUpdate() : コンポーネントが更新された後。

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

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

コンポーネント willUnmount(): コンポーネントが削除または破棄されたときに呼び出されます。

実例

以下は、各状態で呼び出されるメソッドを示す実際の例です。

例: 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 はと呼ばれる特別なメソッドを提供します。 セット状態、 これは、変更があるたびに状態を維持するのに役立ちます。

テキストボックスと送信ボタンで onChange イベントと onClick イベントを使用しました。ユーザーがテキストボックス内に入力すると、onChange イベントが呼び出され、状態オブジェクト内の名前フィールドが以下のように更新されます。

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) テキストボックスに名前を入力します。

送信ボタンをクリックします

ReactJS でのイベントの操作

Reactjs でのイベントの操作は、JavaScript で行う方法と同じです。 JavaScript で使用されるすべてのイベントハンドラーを使用できます。 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;

イベントを利用させていただきました 変更します と 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>
    <script src = "out/script.min.js"></script>
  </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 属性にはクラスの詳細が指定されます。では、ブラウザでテストしてみましょう。

ブラウザで h1 タグを検査すると、次のように表示されます。

class=” h1tag” が h1 タグに正常に追加されたことがわかります。

まとめ

ReactJSはオープンソースのフロントエンドです Javaユーザーインターフェイスを構築するためのスクリプトライブラリ。Facebook によって管理されており、現在多くの企業で UI 開発に使用されています。
ReactJS のコア機能には、JSX、コンポーネント (機能コンポーネントおよびクラスベースのコンポーネント)、コンポーネントのライフサイクル、プロパティ、JavaScript 式と連携するコンポーネントの状態サポートが含まれます。
ReactJS のプロジェクトのセットアップについては、CDN ファイルを使用し、npm パッケージを使用してプロジェクトをビルドする方法について説明します。
JSX は JavaScript の拡張機能です。これは、HTML と JavaScript を一緒に使用できるテンプレートスクリプトです。
コンポーネントは純粋な JavaScript 関数のようなもので、ロジックを再利用可能な独立したコードに分割することでコードを簡単にします。
状態は、reactjs レンダーで使用されるデータを含む props に似た JavaScript オブジェクトです。状態データはプライベートオブジェクトであり、クラス内のコンポーネント内で使用されます。
Props はコンポーネント内で使用されるプロパティです。
コンポーネントのライフサイクルは、初期化、マウント、更新、アンマウントの各段階に分かれています。
のようなreactjs HTML入力要素、と <select /> には独自の状態があり、ユーザーが setState() メソッドを使用して操作するときに更新する必要があります。
Reactjs でのイベントの操作は、JavaScript で行う方法と同じです。 JavaScript で使用されるすべてのイベントハンドラーを使用できます。 setState() メソッドは、ユーザーが HTML 要素を操作するときに状態を更新するために使用されます。
ReactJS を使用すると、JavaScript 式を使用して外部 CSS だけでなくインライン CSS も操作できます。

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

よろしければ：

5 つのベスト React コース

ReactJSとは何ですか？

ReactJSの特徴

ReactJSの利点

ReactJSのデメリット

CDN から ReactJS を使用する

開発者向け

製品用

関連記事

NPM パッケージの使用

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

JSXとは何ですか？

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

JSX の式

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

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

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

ReactJS の状態とは何ですか?

状態の例

ReactJS の Props とは何ですか?

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

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

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

実例

フォームの操作

ReactJS でのイベントの操作

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

ReactJS での外部 CSS の操作

まとめ

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