Skip to main content

React演習（HelloWorld）

前提​

Node.js がインストールされていること

セットアップ​

# フォルダ作成と移動
# ※ github等などプロジェクト作成した場合は不要
$ mkdir HelloWorld
$ cd HelloWorld
# package.json の作成
$ npm init -y
# react と react-dom をインストール
$ npm install react react-dom
# vite とそのプラグインをインストール
$ npm install --save-dev vite @vitejs/plugin-react

package.json を編集​

以下を削除

    "test": "echo \"Error: no test specified\" && exit 1"

scriptsに以下を追加

    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"

Hello, World!​

以下を作成

  • vite.config.js
  • index.html
  • src/App.jsx
  • src/main.jsx
  • .gitignore
vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
});
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
  </head>
  <body>
    <div id="content"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
src/App.jsx
function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;
src/main.jsx
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.querySelector("#content")).render(<App />);
.gitignore
node_modules
dist

ポートの設定​

本チュートリアルで、Cloud9を利用する場合はvite.config.jsにポートの設定を追記してください。
Cloud9では使用できるポートが8080、8081、8082に限定されているため、Viteにポートを指定する設定を行う必要があります。

Vite の設定 | Vite

vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  server: {
    port: 8080
  },
  plugins: [react()],
});

ローカル開発サーバーを起動​

$ npm run dev

ローカルの場合​

http://localhost:5173/ にアクセスし確認

Cloud9の場合​

Preview (プレビュー)、Preview Running Application (実行中のアプリケーションのプレビュー)を順に選択し、確認