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

作成日: 更新日:

開発環境

  • 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をインストールすることができます。

1npm install react

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

1npm install react@16.13.1

React DOMのインストール

Reactを使用してWebアプリケーションを開発する場合、React DOMもインストールする必要があります。 React DOMは、npmパッケージマネージャーを使用し、以下のコマンドでReact DOMをインストールすることができます。

1npm install react-dom

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

1npm install react-dom@16.13.1

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

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

Reactプロジェクトの作成

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

1npx create-react-app my-app

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

Reactプロジェクトの起動

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

1cd my-app
2npm start

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

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

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

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

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

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

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

1<!-- react_app\public\index.html -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="utf-8" />
6    <title>React App</title>
7  </head>
8  <body>
9    <div id="root"></div>
10  </body>
11</html>

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

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

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

1// react_app\src\index.js
2import React from "react";
3import ReactDom from "react-dom";
4
5const App = () => {
6  return (
7    <>
8      <h1>HellowWorld!</h1>
9    </>
10  );
11};
12
13ReactDom.render(<App />, document.getElementById("root") );

Reactは基本的にアロー関数を使って記述していきます。 また、returnにDOMを記述する場合、開始タグと閉じタグの中に記述する必要があるため、コーディングの際は注意してください。 以上でHellowWorld!と表示されていれば成功です。

おわりに

Reactが正しくインストールするための手順を解説してきましたが、いかがだったでしょうか。 npmパッケージマネージャーを使用することにより、簡単にReactプロジェクトの作成やReactアプリケーションの起動までを行うことができます。 是非、モダンなフロントエンド開発の定番となりつつあるReactを使っていきましょう。

【React】インストールからHellowWordlを表示させるまでを解説 | いっしー@Webエンジニア