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

ReactJSとは何ですか?

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

ReactJSの特徴

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

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

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

JavaScript 式: JS 式は、curly を使用して jsx ファイル内で使用できます。 brackets、 例えば {}。

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 以下の説明に必要なファイルが得られます。wing 画像。

CDN から ReactJS を使用する

開発者向け

<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/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>

出力:

製品出力の場合

ドに入りますtails 次の章のコードで、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 の基本的なコードが返されました。ドについて解説していきますtails それについては次の章で説明します。表示したい こんにちは、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		
> 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>

NPM パッケージの使用

次の章でも、同じプロセスを使用して 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"
  },

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

npm run start

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

コマンド: npm run start:

C:\reactproj>npm run start

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

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

最初の React プロジェクトの出力

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')
);

上記のコードを変更して式を追加します。式はカーリー内で使用されます brackets {} であり、実行時に展開されます。 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')
); 

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

JSX 出力の式

{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;


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

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

コンポーネント こんにちは 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 でのコンポーネントの出力

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

以下は、クラスをコンポーネントとして使用する 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 出力の状態

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 属性tailsと同様の表現が使われます。

このコンポーネントは、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 のコンポーネントには次のようなものがありますwing ステージ:

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

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

取り付け: このフェーズでは、コンポーネントが dom 内でレンダリングされます。 私たちは次のことにさらされていますwing 実装状態での方法。

  • ComponentDidMount(): これは、コンポーネントが dom に追加されたときにも呼び出されます。
  • render(): 作成されたすべてのコンポーネントに対してこのメ​​ソッドがあります。 HTML ノードを返します。

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

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

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

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

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

コンポーネント 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')
); 

ブラウザで出力を確認すると

出力

ブラウザコンソールでは、次のようになります。

ブラウザコンソール出力

ユーザーがテキストを入力するときbox:

ユーザー値の出力

コンソールで次のようにしてくださいwing メッセージが表示されます:

コンソール出力

フォームの操作

のような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 を使用しました。box そして送信ボタン。 ユーザーがテキスト内に入力するときbox onChange イベントが呼び出され、state オブジェクト state 内の 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) テキストにあなたの名前を入力してくださいbox:

フォーム出力の操作

  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;

入力フィールドの場合は状態を維持する必要があるため、そのために React は と呼ばれる特別なメソッドを提供します。 セット状態、 これは、変更があるたびに状態を維持するのに役立ちます。

イベントを利用させていただきました 変更します > onClick テキスト上でbox そしてボタン。 ユーザーがテキスト内に入力するときbox が待 変更します イベントが呼び出され、状態オブジェクトの状態内の名前フィールドが以下のように更新されます。

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')
);

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

インライン CSS 出力の操作

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

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 属性にはクラス de が与えられます。tails。次に、ブラウザでテストしてみましょう。

外部 CSS 出力の操作

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

外部 CSS 出力の操作

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

まとめ

  • ReactJS は、ユーザー インターフェイスを構築するためのオープンソース フロントエンド JavaScript ライブラリです。 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 の質問と回答 (更新)