3,146 測定値

既存のプロジェクトや Web サイトに React を追加する必要がありますか?

に Filestack8m2023/01/03

長すぎる; 読むには

React は、地球上で最も人気のある JavaScript フレームワークです。これを使用して、機能豊富な Web アプリケーションをすばやく作成できます。これにより、既存のプロジェクトに新しい機能を簡単に追加できます。この投稿では、既存の HTML ページに React コンポーネントを追加する方法を紹介します。

featured image - 既存のプロジェクトや Web サイトに React を追加する必要がありますか?

React は、地球上で最も人気のある JavaScript フレームワークです。これを使用して、機能豊富な Web アプリケーションをすばやく作成できます。また、サイトで構築したReact 画像アップローダーのように、既存のプロジェクトに新しい機能を簡単に追加できます。

数行のコードを入力するだけです。それはあなたの人生をずっと楽にすることができます。しかし、React を既存のプロジェクトに追加するにはどうすればよいでしょうか?手順は何ですか？この投稿では、すべての詳細を見つけることができます。

React を既存のプロジェクトに追加するのは本当に簡単ですか?

はい、既存のアプリケーションに React を簡単に追加できます。プロセスは非常に簡単です。この記事では、既存の HTML ページに React コンポーネントを追加する方法を紹介します。同じ方法で自分の Web サイトに追加できます。または、空の HTML ファイルを作成して練習することもできます。

React を既存のプロジェクトに追加: 必要な機器

まず、ノードを PC にインストールする必要があります。 nodejs.orgから入手できます。少なくとも Node バージョン 10 が必要です。
次に、ノードパッケージマネージャー (npm) が必要です。 Node.js を使用して PC に自動的にインストールされます。 npm のバージョンは 5.2 以降である必要があります。
最後に、優れたコードエディターが必要です。市場にはたくさんのソリューションがあります。たとえば、Visual Studio Code は直感的なエディターです。開発者の間で非常に人気があります。ここからダウンロードできます。

React を既存のプロジェクトまたは Web サイトに追加する

このセクションでは、React コンポーネントを追加して、Web サイトの既存の HTML ページを変更します。手順は次のとおりです。

ステップ 1: DOM コンテナーを HTML に追加する

まず、変更する HTML ページを開きます。空の div 要素を作成します。これは、React を使用して変更を表示する領域です。

<div id="medium_blog_container">

</div>

ステップ 2: Script タグまたは React タグを追加する

次に、HTML ページの終了 </body> タグの直前に 3 つの <script> タグを追加する必要があります。

最初の 2 つのタグは React をロードします。 3 つ目は、コンポーネントコードをロードします。

ステップ 3: React コンポーネントを作成する

ここで、HTML ページの横に medium_post_component.js という JS ファイルを作成する必要があります。

JSX を使用してもしなくても、React を作成できます。上記の例は、JSX を使用していません。ブラウザ上で直接実行できます。

次の 2 行を見てください。

これらの 2 行で、最初のステップで追加した <div> を探しています。その中に「いいね」ボタンのReactコンポーネントを表示します。

React を既存のプロジェクトに追加 – JSX をプロジェクトに追加

JSX をプロジェクトに追加するために、バンドラーや開発サーバーなどの複雑なツールを使用する必要はありません。実際、これは CSS プリプロセッサーの追加と非常によく似ています。ただし、PC に Node.js がインストールされている必要があります。それが唯一の要件です。 JSX を追加するプロセスは非常に簡単です。次の手順に従うだけです。

まず、ターミナルでプロジェクトフォルダーに移動します。
次に、次のコマンドを実行します
npm init -y
上記のコマンドが失敗した場合は、次のコマンドを実行します。
npm install babel-cli@6 babel-preset-react-app@3
それでおしまい！プロジェクトに本番環境対応の JSX セットアップが正常に追加されました。

React を既存のプロジェクトに追加 – JSX プリプロセッサを実行

JSX プリプロセッサを実行するには、「src」というフォルダを作成する必要があります。次に、ターミナルで次のコマンドを実行します。

npx babel --watch src --out-dir . --presets react-app/prod

ヒント: 「babel パッケージを誤ってインストールしました」というエラーメッセージが表示されましたか?前のステップを見逃している可能性があります。同じフォルダで実行してみてください。問題を修正する必要があります。

プロセスが完了するまで待つ必要はありません。前述のコマンドは、JSX の自動ウォッチャーを開始します。

src フォルダーに like_button.js というファイルを作成すると、ウォッチャーは前処理済みの like_button.js ファイルを作成します。ブラウザに適したプレーンな JavaScript コードが含まれます。

また、最新の JavaScript 構文機能を利用できます。たとえば、古いブラウザーが壊れることを心配せずにクラスを使用できます。

npx はタイプミスではないことに注意してください。これは、npm 5.2 以降に付属するパッケージランナーツールです。

既存のプロジェクトに React を追加 – AJAX と API コンポーネントの React の呼び出し

API 呼び出しを行うためのライブラリはたくさんあります。ただし、これらは最も人気のあるものです。

フェッチ
アクシオス
React-Axios
Use-Http React-request など

React を既存のプロジェクトに追加 – Fetch を使用して React で HTTP 呼び出しを行う

Fetch() はブラウザベースの API です。これを使用して HTTP 呼び出しを行うことができます。 Fetch API の標準構文を見てみましょう。

let response = fetch(

API_URL,

.... (some more options)

);

ここでは、getNames という名前の関数を呼び出しています。データをフェッチします。また、他のパラメータをフェッチします。お気に入り：

方法: HTTP 呼び出しの種類を特定するのに役立ちます。
ヘッダー: 承認またはコンテンツのリクエストヘッダーを定義できます。
モード: モードは、モードのタイプ、cors または no-cors を定義します。
本文: これを使用して、追加データをリクエスト本文としてサーバーに送信できます。

React で Fetch を使用する例を次に示します。

async getName(){

//With .then and .catch section

let response = await fetch("https://jsonplaceholders.com/users") .then(resposne => { return response.json(); this.setState({ names:response })}) .catch(error => { console.log(error); }); }

React を既存のプロジェクトに追加するためのヒント

コンポーネントを再利用する

HTML ページの複数の場所に React コンポーネントを表示したい場合があります。それを行うには、次の手順に従う必要があります。

HTML ファイルに移動します。次に、次の行を追加します。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment.  <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment.  <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment.  <div class="like_button_container" data-commentid="3"></div> </p>   <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>  <script src="like_button.js"></script> </body> </html>

JavaScript ファイルに移動します。次のコードを挿入します。

'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked comment number ' + this.props.commentID; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } // Find all DOM containers, and render Like buttons into them. document.querySelectorAll('.like_button_container') .forEach(domContainer => { // Read the comment ID from a data-* attribute. const commentID = parseInt(domContainer.dataset.commentid, 10); const root = ReactDOM.createRoot(domContainer); root.render( e(LikeButton, { commentID: commentID }) ); });

このアプローチは、ページのパーツが互いに分離されている場合に役立つことに注意してください。ただし、React コード内では、コンポーネント構成を使用する必要があります。その方が使いやすいからです。

本番用に JavaScript を縮小する

縮小されていない JavaScript は、ページの速度に大きな影響を与える可能性があります。ユーザーをイライラさせてしまいます。そのため、React アプリをデプロイする前に JavaScript を縮小する必要があります。読み込み速度とユーザーエクスペリエンスを向上させます。

アプリケーションスクリプトは既に縮小されていますか?デプロイされた HTML が production.min.js ファイルで終わるバージョンの React をロードすることを確認しましたか?これが完了したら、サイトは運用準備完了です。

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

スクリプトの縮小手順がない場合は、次の手順に従って設定できます。

まず、Node.js をインストールする必要があります。

次に、プロジェクトフォルダーで次のコマンドを実行します。

npm init -y

次に、次のコマンドを実行します。

npm install terser

最後に、ファイルを縮小します。 like_button.js というファイルを縮小したい場合は、ターミナルで次のコマンドを実行するだけです。

npx terser -c -m -o like_button.min.js -- like_button.js

like_button.min.js という名前の新しいファイルが作成されます。縮小されたすべてのコードが含まれます。

JSXをすぐに試す

次の <script> タグをページに追加することで、プロジェクトで JSX をすばやく試すことができます。

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

これで、任意の <script> タグで JSX を使用できるようになりました。 type="text/babel" 属性を追加するだけです。

JSX を使用した HTML ファイルの例を次に示します。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> function MyApp() { return <h1>Hello, world!</h1>; } const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<MyApp />); </script>  </body> </html>

Filestack の React SDK の紹介

filestack-react は、filestack-js SDK のラッパーです。わずか数行のコードで Filestack サービスと統合できます。これを利用して、ファイルアップローダーの外観とパフォーマンスを大幅に向上させることができます。

アプリケーションで Filestack の React SDK を使用するにはどうすればよいですか?

まず、次のコマンドで Filestack の React SDK をインストールする必要があります。

npm install filestack-react

次に、filestack-react をアプリに挿入できます。

import { PickerOverlay } from 'filestack-react'; <PickerOverlay apikey={YOUR_API_KEY} onSuccess={(res) => console.log(res)} onUploadDone={(res) => console.log(res)} />

これを使用して、さまざまな機能を簡単に追加できます。たとえば、次の行を使用して、基本的なドロップペインピッカーをレンダリングできます。

<PickerDropPane apikey='YOUR_APIKEY'/>

Filestack を使用すると、React でのファイルのアップロードを簡単に有効にすることができます。詳細はこちらからご覧いただけます。