React.js はじめに

今回からReactをやります。

プロジェクト作成

以下のコマンドを実行するとプロジェクト名などを聞かれるので入力していきます。


npm create vite@latest

プロジェクト名を入力します。今回はtestにしました


*  Project name:
|  test
—

フレームワークを選びます。Reactを選びます


*  Select a framework:
|    Vanilla
|    Vue
|  > React
|    Preact
|    Lit
|    Svelte
|    Solid
|    Qwik
|    Angular
|    Others
—

言語はJavaScriptにしました


*  Select a variant:
|    TypeScript
|    TypeScript + SWC
|  > JavaScript
|    JavaScript + SWC
|    React Router v7 ↗
|    TanStack Router ↗
—

以下が表示されるのでコピペで実行するとWebサーバが起動されReactのサンプル画面が確認できます。


cd test
npm install
npm run dev

ソース

index.html

自動で生成されます。


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

src\main.jsx

自動で生成されます。


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

src\App.jsx

自動で生成されるのですが、分かりやすくするため単純なソースに書き換えました。


function App() {

  return (
    <>
      Hello World
    </>
  )
}

export default App

実行結果

ページのトップへ戻る