React は、地球上で最も人気のある JavaScript フレームワークです。これを使用して、機能豊富な Web アプリケーションをすばやく作成できます。また、サイトで構築した のように、既存のプロジェクトに新しい機能を簡単に追加できます。 React 画像アップローダー 数行のコードを入力するだけです。それはあなたの人生をずっと楽にすることができます。しかし、React を既存のプロジェクトに追加するにはどうすればよいでしょうか?手順は何ですか？この投稿では、すべての詳細を見つけることができます。  React を既存のプロジェクトに追加するのは本当に簡単ですか? はい、既存のアプリケーションに React を簡単に追加できます。プロセスは非常に簡単です。この記事では、既存の HTML ページに React コンポーネントを追加する方法を紹介します。同じ方法で自分の Web サイトに追加できます。または、空の HTML ファイルを作成して練習することもできます。  React を既存のプロジェクトに追加: 必要な機器 まず、ノードを PC にインストールする必要があります。  から入手できます。少なくとも Node バージョン 10 が必要です。 nodejs.org 次に、ノード パッケージ マネージャー (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 でのファイルのアップロードを簡単に有効にすることができます。詳細はこちらからご覧いただけます。 結論 この記事では、React を既存のプロジェクトに追加する方法を学びました。また、コンポーネントの再利用や本番用の JavaScript の縮小など、役に立つヒントも知っています。これで、React の活用を開始して、既存のプロジェクトに素晴らしい機能を簡単に追加できます。  React を既存のプロジェクトに追加する – よくある質問 React コンポーネントとは コンポーネントは、React のコア ビルディング ブロックの 1 つです。それらは、独立した再利用可能なコードのビットです。これらを使用すると、アプリケーションの UI を簡単に構築できます。   npxで反応アプリを作成するにはどうすればよいですか? このコマンドを使用して、npx で反応アプリを作成できます: 「npx create react app」。 コーディングにおける React とは?  React は効率的で柔軟な JavaScript ライブラリです。 「コンポーネント」と呼ばれる小さく分離されたコードを使用して、複雑なユーザー インターフェイスを簡単に構築できます。 無料でサインアップして、今すぐ Filestack で Web アプリケーションに最適なファイル アップロード ソリューションを体験してください。

2022 - HackerNoon Contributor of the Year - Api

Learn More

Nominated for 2022 - HackerNoon Contributor of the Year - Api

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

タップして稼ぐ：テレグラムはソラナより先に次の100億人の暗号通貨ユーザーを獲得する可能性がある

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps