工作と競馬2

電子工作、プログラミング、木工といった工作の記録記事、競馬に関する考察記事を掲載するブログ

トップ > 技術メモ > VS Codeで、React + React Bootstrapアプリを開発する環境を作る

VS Codeで、React + React Bootstrapアプリを開発する環境を作る

技術メモ 技術メモ#HTML/css/javascript

概要

VS Codeで、React + React Bootstrapアプリを開発する環境を作成し、サンプルアプリが動くまでの手順をメモした。



背景と目的

最近、たまたまReact、React Bootstrapを触る必要があったため、環境を整え、最低限のサンプルアプリが動作することを確認するまでの手順をメモしておく。


詳細

0. 環境


1. create-react-appインストール

Node.jsパッケージのcreate-react-appをインストールする。

npm install create-react-app


2. サンプルアプリを準備

以下を実行。数分かかった。

npx create-react-app react-test

起動させると、。3000番ポートが他で使われている場合は警告が出て違うポートを使って起動される。

cd react-test
npm start


3. Visual Studio Codeで開く

作成されたreact-testフォルダをVSCodeで開く。

RUN AND DEBUGメニューから、Run Script: startを選び、実行すると、先ほどと同じくブラウザが立ち上がり、VSCode上からアプリを実行できたことがわかる。


4. React Bootstrap

React Bootstrap UIをサンプルアプリに追加してみる。具体的には、こちらにある

というのBadgeとButtonを表示させる。

4.1 パッケージインストール

アプリのプロジェクトのフォルダに移動して、インストールを実行すること。

cd react-test
npm install react-bootstrap bootstrap

4.2 アプリにコードを追記

まず、index.js冒頭で、bootstrapのcssをインポートする。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';

:

次に、App.jsで、UIコンポーネントをインポートし、BadgeとButtonのhtmlを記述。

import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        // ここを追加 ----------------
        <div>
        Example heading
        <Badge bg="secondary" as={Button}>
          New
        </Badge>
      </div>
       // ------------------------------
      </header>
    </div>
  );
}

export default App;

4.3 動作確認

実行した結果が以下。追加したBootstrap UIが表示されている。


参考情報


まとめと今後の課題

ひとまず、VS CodeでReact + React Bootstrapを開発する環境が整えられた。VS Codeの拡張機能で便利そうなものがあるらしいので、適宜試して追加していく。


ランキング参加中
DIY