↩ テクノロジー開発非公開: React に Bootstrap をインストールしてより詳細なアプリを作成する 4 つの方法

React に Bootstrap をインストールしてより詳細なアプリを作成する 4 つの方法

React は、シングルページアプリケーションやユーザーインターフェイスを構築するための最も人気のある JavaScript フレームワークおよびライブラリの 1 つです。再利用可能なコンポーネントを使用してユーザーインターフェイスを構築する柔軟性、開発のスピード、サポート的なコミュニティが人気の理由です。

ただし、React のアプリをより視覚的に魅力的で見栄えの良いものにするには、 React を Cascading Style Sheets (CSS) と組み合わせる必要があります。 CSS を最初から書くのは時間がかかる場合があります。

開発者は、React アプリの主要な機能ではなく、スタイル設定に多くの時間を費やす可能性があります。良いニュースは、Bootstrap のようなツールやフレームワークを使用すると、React アプリに CSS を簡単に追加できることです。

コンテンツ 表示

ブートストラップとは何ですか?

Bootstrap は、フロントエンド開発用のオープンソース CSS フレームワークです。 Bootstrap を使用すると、開発者は JavaScript および CSS ベースのデザインツールとテンプレートの包括的なセットを通じて、応答性の高いモバイルファーストの Web サイトを作成できます。

Bootstrap は Twitter によって作成され、同じ会社のエンジニアチームによって保守されています。そのソースコードは GitHub で管理されており、コミュニティメンバーはバグレポートや提案に貢献したり、送信したりできます。 Bootstrap 5.3.0-alpha1 は、この記事の執筆時点での最新バージョンです。

React で Bootstrap を使用する理由

時間の節約 : Bootstrap がフォーマットを処理するため、機能に集中できる時間が増えます。したがって、フォームやボタンの外観などの問題を心配する必要はなく、送信ボタンがバックエンドまたは API にデータを送信するかどうかなどの領域について心配する必要はありません。
使いやすさ: Bootstrap を React アプリに追加したら、事前に設計された UI コンポーネントを取得してアプリに追加するだけです。
一貫した設計: ほとんどのアプリは時間の経過とともにサイズが大きくなります。忠実なユーザーを引き付けたい場合は、Web サイトの一貫したデザインを確保することが重要です。 Bootstrap には一貫したスタイルがあり、ページに均一な外観を与えます。
豊富なテンプレートから選択可能 : Bootstrap には、いくつか例を挙げると、ナビゲーションバー、ボタン、フォーム、カルーセルからドロップダウンに至るまで、数百のテンプレートから選択できます。
カスタマイズの容易さ: Bootstrap にはデザインテンプレートがありますが、フォントサイズ、色、その他の機能をニーズに合わせていつでもカスタマイズできます。
コミュニティサポート: Bootstrap には、作業を開始するための広範なドキュメントが用意されています。ただし、常に新しい機能を追加し、この CSS フレームワークを維持するため、大規模なコミュニティに頼ることはできます。
レスポンシブデザイン: React アプリに Bootstrap を追加すると、Web アプリはすべての画面サイズで確実にレスポンシブになります。

React に Bootstrap をインストールする方法

React アプリには、デフォルトでは Bootstrap がインストールされていません。ただし、React に Bootstrap を追加/インストールする方法を調べる前に、いくつかのことを確認する必要があります。

前提条件

Node.js がインストールされていることを確認する: このクロスプラットフォーム JavaScript ランタイム環境により、開発者は Web ブラウザーの外部で JavaScript を実行できます。

次のコマンドを使用して、node.js が PC にインストールされているかどうかを確認します。

 node -v

node.js がインストールされている場合は、ターミナルに次のような出力が表示されます。

インストールされていない場合は、 https://nodejs.org/en/ からダウンロード手順を確認できます。

React がインストールされていることを確認します。Bootstrap がフォーマットを行う間、React を使用して機能を作成します。

次のコマンドを使用して、PC に React がインストールされているかどうかを確認します。

 npm list react

React がマシンにグローバルにインストールされている場合、ターミナルには次のようなものが表示されます。

React アプリを作成する : React アプリを手動で作成することもできますが、多くの作業が必要です。デモンストレーションの目的で、create-react-app コマンドを使用します。 React アプリを作成するには、次の手順に従います。

マシンにreact-create-appをインストールします。このコマンドを使用する

npm install -g create-react-app

このコマンドを使用して React アプリを作成します

npx create-react-app my-app

my-app を 任意の名前に置き換えることができます。この例では、アプリに「react-b」という名前を付けました。

インストールすると、端末に同様のものが表示されます。

開始するには次のコマンドを実行してください

cd react-b (前の手順で選択したアプリの名前を使用します)
npm start (このコマンドは React アプリを開始します)

次のステップに進み、Bootstrap を React アプリに追加/インストールできます。

React に Bootstrap をインストールしてより詳細なアプリを作成する 4 つの方法

NPM インストールブートストラップメソッド

Node.js には、npm (ノードパッケージマネージャー) がデフォルトでインストールされています。

次のコマンドで npm のバージョンを確認できます。

 npm -v

npm がインストールされている場合は、9.2.0 のような出力が表示されます。

これで、次のコマンドを使用してブートストラップをインストールできるようになります。

 npm install bootstrap

完了したら、 ./src/index.js ファイルに移動します。この行を先頭に追加します。

import 'bootstrap/dist/css/bootstrap.css';

Yarn パッケージマネージャーの使用

npm とは異なり、node.js をインストールするときに、yarn はデフォルトではインストールされません。

このコマンドを使用して yard をインストールします。

 npm install -g yarn

このコマンドは、yarn をグローバルにインストールするため、React アプリを作成するたびにパッケージをインストールする必要はなくなります。

次のコマンドを実行して、ブートストラップを React に追加します。

 yarn add bootstrap

完了したら、 ./src/index.js ファイルに移動します。この行を先頭に追加します。

import 'bootstrap/dist/css/bootstrap.css';

Bootstrap は、他の CSS ファイルよりも前に、アプリのエントリファイルの先頭で常にインポートする必要があります。これにより、React アプリの作成時にテンプレートのデフォルト値を変更する必要がある場合に、Bootstrap エントリを簡単に変更できます。

CDN方式

コンテンツ配信ネットワーク (CDN) リンクを使用して、Bootstrap を React に追加できます。この CDN リンクを追加すると、プロジェクトフォルダーにファイルをダウンロードしてホストしなくても、Bootstrap ライブラリが React アプリに組み込まれます。次の手順を実行します。

ルートフォルダーで .public/index.html ファイルに移動します。
<head> タグに、この <link> タグを追加します

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

JavaScript の依存関係をアプリに追加する必要があります。 Index.html ファイルの本文に移動し、終了 <body/> タグの直前に次のタグを追加します。

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Bootstrap がついに React アプリにインストールされました。

React ブートストラップパッケージの使用

これまで説明してきたアプローチは、もともと HTML ファイル用に設計されました。これをよりよく理解するには、ブートストラップの次のドロップダウンコードを検討してください。

 <div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown button

  </button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">Action</a></li>

    <li><a class="dropdown-item" href="#">Another action</a></li>

    <li><a class="dropdown-item" href="#">Something else here</a></li>

  </ul>

</div>

コードの何が間違っているのでしょうか?デフォルトでは、ブートストラップはクラスを使用してその部門 (DIV) を分類します。ただし、React はキャメルケース構文を使用する JSX を使用します。したがって、クラスを className に手動で置き換える必要があります。

そのコードを React で動作させるには、すべての「クラス」を「className」に置き換える必要があります。最終的なコードは次のようになります。

 <div className="dropdown">

  <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown button

  </button>

  <ul className="dropdown-menu">

    <li><a className="dropdown-item" href="#">Action</a></li>

    <li><a className="dropdown-item" href="#">Another action</a></li>

    <li><a className="dropdown-item" href="#">Something else here</a></li>

  </ul>

</div>

幸いなことに、手動介入を必要としないあと 2 つのアプローチ、react-bootstrap と Reactstrap があります。

反応ブートストラップ

React-bootstrap には、最初から構築された真の React コンポーネントが含まれています。このライブラリは Bootstrap コアと互換性があります。

React-bootstrap の使用を開始するには、次の手順に従ってください。

次のコマンドを使用して React-bootstrap をインストールします。

 npm install react-bootstrap bootstrap

src/index.js または App.js ファイルに移動し、この行を他の CSS ファイルの前に追加します。

import 'bootstrap/dist/css/bootstrap.min.css';

React-bootstrap を使用すると、ライブラリ全体ではなく特定のコンポーネントをインポートできます。たとえば、コンポーネントの 1 つにボタンをインポートする必要がある場合は、次のようにインポートできます。

import { Button } from 'react-bootstrap';

リアクトストラップ

これはBootstrap用のReactコンポーネントライブラリです。 Reactstrap は、スタイルとテーマを Bootstrap CSS フレームワークに依存しています。このライブラリは、適切な Bootstrap クラスを React アプリにインポートし、一貫したアプリのスタイルを実現できるようにします。また、機能をトリガーするために Bootstrap の JavaScript ファイルを追加する必要もありません。

Reactstrap を React アプリに追加するには、次の手順に従います。

次のコマンドを使用して Reactstrap をインストールします。

 npm install reactstrap react react-dom

次のコマンドを使用してブートストラップをインポートします。

 npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'; (この行を app.js に追加します)

CDN リンクオプションを使用して、アプリにブートストラップを含めることもできます。最初の手順の後、ルートディレクトリに移動し、 .public/index.html ファイルに移動して、この行を <head> タグに追加します。

 <link

    rel="stylesheet"

    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"

  />

Reactstrap を使用すると、ライブラリ全体ではなく特定のコンポーネントをインポートできます。たとえば、コンポーネントの 1 つにボタンをインポートする必要がある場合は、次のようにインポートできます。

import { Button } from 'reactstrap';

結論

上記は、Bootstrap を React アプリにインストールして Web アプリのスタイルを設定するために使用できるいくつかのアプローチです。最終目標は同じであるため、インストール方法の選択は好みの問題です。

React と Bootstrap を組み合わせることで、アプリの成長に合わせてすべての CSS スタイルを追跡する手間が省けます。機能に集中する時間が増えるほど、アプリのスタイル設定が簡単かつ効率的になります。

モバイルアプリ開発に React Native を選択する理由をいくつか検討してみるとよいでしょう。

「 React に Bootstrap をインストールしてより詳細なアプリを作成する 4 つの方法」についてわかりやすく解説！絶対に観るべきベスト2動画

【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~

https://www.youtube-nocookie.com/watch?v=nRCNL9T3J98&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB

【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~ (https://www.youtube-nocookie.com/watch?v=nRCNL9T3J98&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB)

【React入門】概要〜環境構築〜カウントアプリの作成（初心者向け）React Tutorial For Beginners

https://www.youtube-nocookie.com/watch?v=5opmvZkJKz4&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB

【React入門】概要〜環境構築〜カウントアプリの作成（初心者向け）React Tutorial For Beginners (https://www.youtube-nocookie.com/watch?v=5opmvZkJKz4&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB)

開発

React は、シングルページアプリケーションやユーザーインターフェイスを構築するための最も人気のある JavaScript フレームワークおよびライブラリの 1 つです。再利用可能なコンポーネントを使用してユーザーインターフェイスを構築する柔軟性、開発のスピード、サポート的なコミュニティが人気の理由です。

ただし、React のアプリをより視覚的に魅力的で見栄えの良いものにするには、 React を Cascading Style Sheets (CSS) と組み合わせる必要があります。 CSS を最初から書くのは時間がかかる場合があります。

開発者は、React アプリの主要な機能ではなく、スタイル設定に多くの時間を費やす可能性があります。良いニュースは、Bootstrap のようなツールやフレームワークを使用すると、React アプリに CSS を簡単に追加できることです。

コンテンツ 表示

ブートストラップとは何ですか?

Bootstrap は、フロントエンド開発用のオープンソース CSS フレームワークです。 Bootstrap を使用すると、開発者は JavaScript および CSS ベースのデザインツールとテンプレートの包括的なセットを通じて、応答性の高いモバイルファーストの Web サイトを作成できます。

Bootstrap は Twitter によって作成され、同じ会社のエンジニアチームによって保守されています。そのソースコードは GitHub で管理されており、コミュニティメンバーはバグレポートや提案に貢献したり、送信したりできます。 Bootstrap 5.3.0-alpha1 は、この記事の執筆時点での最新バージョンです。

React で Bootstrap を使用する理由

時間の節約 : Bootstrap がフォーマットを処理するため、機能に集中できる時間が増えます。したがって、フォームやボタンの外観などの問題を心配する必要はなく、送信ボタンがバックエンドまたは API にデータを送信するかどうかなどの領域について心配する必要はありません。
使いやすさ: Bootstrap を React アプリに追加したら、事前に設計された UI コンポーネントを取得してアプリに追加するだけです。
一貫した設計: ほとんどのアプリは時間の経過とともにサイズが大きくなります。忠実なユーザーを引き付けたい場合は、Web サイトの一貫したデザインを確保することが重要です。 Bootstrap には一貫したスタイルがあり、ページに均一な外観を与えます。
豊富なテンプレートから選択可能 : Bootstrap には、いくつか例を挙げると、ナビゲーションバー、ボタン、フォーム、カルーセルからドロップダウンに至るまで、数百のテンプレートから選択できます。
カスタマイズの容易さ: Bootstrap にはデザインテンプレートがありますが、フォントサイズ、色、その他の機能をニーズに合わせていつでもカスタマイズできます。
コミュニティサポート: Bootstrap には、作業を開始するための広範なドキュメントが用意されています。ただし、常に新しい機能を追加し、この CSS フレームワークを維持するため、大規模なコミュニティに頼ることはできます。
レスポンシブデザイン: React アプリに Bootstrap を追加すると、Web アプリはすべての画面サイズで確実にレスポンシブになります。

React に Bootstrap をインストールする方法

React アプリには、デフォルトでは Bootstrap がインストールされていません。ただし、React に Bootstrap を追加/インストールする方法を調べる前に、いくつかのことを確認する必要があります。

前提条件

Node.js がインストールされていることを確認する: このクロスプラットフォーム JavaScript ランタイム環境により、開発者は Web ブラウザーの外部で JavaScript を実行できます。

次のコマンドを使用して、node.js が PC にインストールされているかどうかを確認します。

 node -v

node.js がインストールされている場合は、ターミナルに次のような出力が表示されます。

インストールされていない場合は、 https://nodejs.org/en/ からダウンロード手順を確認できます。

React がインストールされていることを確認します。Bootstrap がフォーマットを行う間、React を使用して機能を作成します。

次のコマンドを使用して、PC に React がインストールされているかどうかを確認します。

 npm list react

React がマシンにグローバルにインストールされている場合、ターミナルには次のようなものが表示されます。

React アプリを作成する : React アプリを手動で作成することもできますが、多くの作業が必要です。デモンストレーションの目的で、create-react-app コマンドを使用します。 React アプリを作成するには、次の手順に従います。

マシンにreact-create-appをインストールします。このコマンドを使用する

npm install -g create-react-app

このコマンドを使用して React アプリを作成します

npx create-react-app my-app

my-app を 任意の名前に置き換えることができます。この例では、アプリに「react-b」という名前を付けました。

インストールすると、端末に同様のものが表示されます。

開始するには次のコマンドを実行してください

cd react-b (前の手順で選択したアプリの名前を使用します)
npm start (このコマンドは React アプリを開始します)

次のステップに進み、Bootstrap を React アプリに追加/インストールできます。

NPM インストールブートストラップメソッド

Node.js には、npm (ノードパッケージマネージャー) がデフォルトでインストールされています。

次のコマンドで npm のバージョンを確認できます。

 npm -v

npm がインストールされている場合は、9.2.0 のような出力が表示されます。

これで、次のコマンドを使用してブートストラップをインストールできるようになります。

 npm install bootstrap

完了したら、 ./src/index.js ファイルに移動します。この行を先頭に追加します。

import 'bootstrap/dist/css/bootstrap.css';

Yarn パッケージマネージャーの使用

npm とは異なり、node.js をインストールするときに、yarn はデフォルトではインストールされません。

このコマンドを使用して yard をインストールします。

 npm install -g yarn

このコマンドは、yarn をグローバルにインストールするため、React アプリを作成するたびにパッケージをインストールする必要はなくなります。

次のコマンドを実行して、ブートストラップを React に追加します。

 yarn add bootstrap

完了したら、 ./src/index.js ファイルに移動します。この行を先頭に追加します。

import 'bootstrap/dist/css/bootstrap.css';

Bootstrap は、他の CSS ファイルよりも前に、アプリのエントリファイルの先頭で常にインポートする必要があります。これにより、React アプリの作成時にテンプレートのデフォルト値を変更する必要がある場合に、Bootstrap エントリを簡単に変更できます。

CDN方式

コンテンツ配信ネットワーク (CDN) リンクを使用して、Bootstrap を React に追加できます。この CDN リンクを追加すると、プロジェクトフォルダーにファイルをダウンロードしてホストしなくても、Bootstrap ライブラリが React アプリに組み込まれます。次の手順を実行します。

ルートフォルダーで .public/index.html ファイルに移動します。
<head> タグに、この <link> タグを追加します

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

JavaScript の依存関係をアプリに追加する必要があります。 Index.html ファイルの本文に移動し、終了 <body/> タグの直前に次のタグを追加します。

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

Bootstrap がついに React アプリにインストールされました。

React ブートストラップパッケージの使用

これまで説明してきたアプローチは、もともと HTML ファイル用に設計されました。これをよりよく理解するには、ブートストラップの次のドロップダウンコードを検討してください。

 <div class="dropdown">

  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown button

  </button>

  <ul class="dropdown-menu">

    <li><a class="dropdown-item" href="#">Action</a></li>

    <li><a class="dropdown-item" href="#">Another action</a></li>

    <li><a class="dropdown-item" href="#">Something else here</a></li>

  </ul>

</div>

コードの何が間違っているのでしょうか?デフォルトでは、ブートストラップはクラスを使用してその部門 (DIV) を分類します。ただし、React はキャメルケース構文を使用する JSX を使用します。したがって、クラスを className に手動で置き換える必要があります。

そのコードを React で動作させるには、すべての「クラス」を「className」に置き換える必要があります。最終的なコードは次のようになります。

 <div className="dropdown">

  <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">

    Dropdown button

  </button>

  <ul className="dropdown-menu">

    <li><a className="dropdown-item" href="#">Action</a></li>

    <li><a className="dropdown-item" href="#">Another action</a></li>

    <li><a className="dropdown-item" href="#">Something else here</a></li>

  </ul>

</div>

幸いなことに、手動介入を必要としないあと 2 つのアプローチ、react-bootstrap と Reactstrap があります。

反応ブートストラップ

React-bootstrap には、最初から構築された真の React コンポーネントが含まれています。このライブラリは Bootstrap コアと互換性があります。

React-bootstrap の使用を開始するには、次の手順に従ってください。

次のコマンドを使用して React-bootstrap をインストールします。

 npm install react-bootstrap bootstrap

src/index.js または App.js ファイルに移動し、この行を他の CSS ファイルの前に追加します。

import 'bootstrap/dist/css/bootstrap.min.css';

React-bootstrap を使用すると、ライブラリ全体ではなく特定のコンポーネントをインポートできます。たとえば、コンポーネントの 1 つにボタンをインポートする必要がある場合は、次のようにインポートできます。

import { Button } from 'react-bootstrap';

リアクトストラップ

これはBootstrap用のReactコンポーネントライブラリです。 Reactstrap は、スタイルとテーマを Bootstrap CSS フレームワークに依存しています。このライブラリは、適切な Bootstrap クラスを React アプリにインポートし、一貫したアプリのスタイルを実現できるようにします。また、機能をトリガーするために Bootstrap の JavaScript ファイルを追加する必要もありません。

Reactstrap を React アプリに追加するには、次の手順に従います。

次のコマンドを使用して Reactstrap をインストールします。

 npm install reactstrap react react-dom

次のコマンドを使用してブートストラップをインポートします。

 npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'; (この行を app.js に追加します)

CDN リンクオプションを使用して、アプリにブートストラップを含めることもできます。最初の手順の後、ルートディレクトリに移動し、 .public/index.html ファイルに移動して、この行を <head> タグに追加します。

 <link

    rel="stylesheet"

    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"

  />

Reactstrap を使用すると、ライブラリ全体ではなく特定のコンポーネントをインポートできます。たとえば、コンポーネントの 1 つにボタンをインポートする必要がある場合は、次のようにインポートできます。

import { Button } from 'reactstrap';

結論

上記は、Bootstrap を React アプリにインストールして Web アプリのスタイルを設定するために使用できるいくつかのアプローチです。最終目標は同じであるため、インストール方法の選択は好みの問題です。

React と Bootstrap を組み合わせることで、アプリの成長に合わせてすべての CSS スタイルを追跡する手間が省けます。機能に集中する時間が増えるほど、アプリのスタイル設定が簡単かつ効率的になります。

モバイルアプリ開発に React Native を選択する理由をいくつか検討してみるとよいでしょう。

「 React に Bootstrap をインストールしてより詳細なアプリを作成する 4 つの方法」についてわかりやすく解説！絶対に観るべきベスト2動画

【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~

https://www.youtube-nocookie.com/watch?v=nRCNL9T3J98&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB

【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~ (https://www.youtube-nocookie.com/watch?v=nRCNL9T3J98&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB)

【React入門】概要〜環境構築〜カウントアプリの作成（初心者向け）React Tutorial For Beginners

https://www.youtube-nocookie.com/watch?v=5opmvZkJKz4&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB

【React入門】概要〜環境構築〜カウントアプリの作成（初心者向け）React Tutorial For Beginners (https://www.youtube-nocookie.com/watch?v=5opmvZkJKz4&pp=ygVsIFJlYWN0IOOBqyBCb290c3RyYXAg44KS44Kk44Oz44K544OI44O844Or44GX44Gm44KI44KK6Kmz57Sw44Gq44Ki44OX44Oq44KS5L2c5oiQ44GZ44KLIDQg44Gk44Gu5pa55rOVJmhsPUpB)

開発