【React】VS CodeのLive Serverを使って簡単に動作確認しちゃうよ！簡単にレンダリングだ！

投稿者 投稿日:

VS Codeの拡張機能であるLive Serverを使用して、Reactアプリケーションを簡単に実行する方法を説明します

Live Serverは静的なHTMLやJavaScriptファイルをローカルサーバーで実行し、リアルタイムで変更を反映させることができる便利な拡張機能です

Live Server拡張機能をインストールする

VS Codeを開いて、左側のメニューから拡張機能を開きます
検索バーに「Live Server」と入力して、拡張機能をインストールします

Live Serverを使用してReactアプリを実行する

ReactプロジェクトをVS Codeで開き、srcディレクトリ内のindex.jsを編集します

// src/index.js

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Live Serverを起動する

VS Codeのエディタで、publicディレクトリにあるindex.htmlを右クリックし、「Open with Live Server」を選択します
Live Serverが起動し、ブラウザが自動的に開かれてReactアプリが表示されます

また、コードを変更すると、Live Serverがリアルタイムで更新を反映してくれます


この方法でLive Serverを使用すると、Reactアプリケーションを手軽にローカルで実行・開発することができます
Live Serverはファイルの変更を監視して自動的に再読み込みするため、リアルタイムで変更を確認できるので便利です

ぜひ便利な拡張機能を使用してみてください！

是非フォローしてください

最新の情報をお伝えします

投稿者: Mon