【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を使っていきましょう。