【React】インストールからHellowWordlを表示させるまでを解説

動画で解説を見る

1 開発環境
2 Reactを正しくインストールするまでの手順
3 Reactが正しくインストールされているかを確認
4 ReactアプリケーションにHellowWorldを表示させる
- 4.1 index.htmlファイルを編集する
- 4.2 index.jsファイルを編集する
5 おわりに

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Node.js:v18.14.0
npm:9.3.1
react:18.2.0
react-dom:18.2.0

Reactを正しくインストールするまでの手順

Reactを正しくインストールするまでの手順は、以下の手順を実行する必要があります。

Node.jsのインストール

最初にNode.jsをインストールする必要があります。

Node.jsは、Reactの実行に必要なJavaScriptランタイムであり、JavaScriptエンジン上に構築されたJavaScript実行環境の1つです。

以下のリンクから、「windows」「mac」「linux」など自分の環境に合ったNode.jsのインストーラーをダウンロードしてインストールします。

https://nodejs.org/en/download/

Reactのインストール

Node.jsがインストールされたら、次にReactをインストールします。

Reactは、npmパッケージマネージャーを使用し、以下のコマンドでReactをインストールすることができます。

npm install react

1	npm install react

Reactを特定のバージョンでインストールするには、npm installコマンドに@とバージョン番号を追加します。

npm install react@16.13.1

1	npm install react@16.13.1

React DOMのインストール

Reactを使用してWebアプリケーションを開発する場合、React DOMもインストールする必要があります。

React DOMは、npmパッケージマネージャーを使用し、以下のコマンドでReact DOMをインストールすることができます。

npm install react-dom

1	npm install react-dom

React DOMを特定のバージョンでインストールするには、npm installコマンドに@とバージョン番号を追加します。

npm install react-dom@16.13.1

1	npm install react-dom@16.13.1

Reactが正しくインストールされているかを確認

Reactが正しくインストールされているかを確認するには、以下の手順で実行してReactアプリケーションを起動します。

Reactプロジェクトの作成

まず、Reactを使用するための新しいプロジェクトを作成します。

Reactプロジェクトはコマンドラインで以下のコマンドを実行することにより、Reactの開発に必要なすべてのツールを含む新しいプロジェクトを作成することができます。

npx create-react-app my-app

1	npx create-react-app my-app

create-react-appがReactプロジェクトを作成するためのコマンド、my-appがプロジェクト名になります。

Reactプロジェクトの起動

Reactプロジェクトが作成されたら、コマンドラインで以下のコマンドを使用してアプリケーションを起動します。

cd my-app
npm start

1 2	cd my-app npm start

cdで作成したReactプロジェクトのディレクトリへ移動し、npm startでReactプロジェクトを起動することができ、ブラウザが自動的に開いてReactアプリケーションが実行されます。

Reactアプリケーションの動作確認

最後にReactアプリケーションの動作確認をします。

Webブラウザが開いたら「Welcome to React」とページに表示されていれば、Reactアプリケーションが正常に実行されています。

ReactアプリケーションにHellowWorldを表示させる

ReactアプリケーションにHellowWorldを表示させるまでの手順は下記になります。

index.htmlファイルを編集する

まずはindex.htmlファイルを編集していきます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>React App</title>

</head>

<body>

</body>

</html>

上記の「id="root"」にコンポーネントを表示させる形になります。

index.jsファイルを編集する

次にindex.jsファイルを編集していきます。

import React from "react";
import ReactDom from "react-dom";

const App = () => {
  return (
    <>
      <h1>HellowWorld!</h1>
    </>
  );
};

ReactDom.render(<App />, document.getElementById("root") );

import React from "react";

import ReactDom from "react-dom";

const App = () => {

return (

<h1>HellowWorld!</h1>

</>

);

};

ReactDom.render(<App />, document.getElementById("root") );

Reactは基本的にアロー関数を使って記述していきます。

また、returnにDOMを記述する場合、開始タグと閉じタグの中に記述する必要があるため、コーディングの際は注意してください。

以上でHellowWorld!と表示されていれば成功です。

おわりに

Reactが正しくインストールするための手順を解説してきましたが、いかがだったでしょうか。

npmパッケージマネージャーを使用することにより、簡単にReactプロジェクトの作成やReactアプリケーションの起動までを行うことができます。

是非、モダンなフロントエンド開発の定番となりつつあるReactを使っていきましょう。