Introduction to React.js Part.1

wtnb_dev

こんにちは、ワタナベ（wtnb_dev）です。

先日以下のnoteを書きました。

ヌメロンで学ぶJavaScriptの基本文法

JavaScriptを使って、ヌメロンと呼ばれるゲームの実装方法を解説しています。

本記事では、JavaScriptのフレームワークである「React.js」の基本的な使い方について解説していきます。

ただ基本文法をやっても面白くないので、題材として、ヌメロンをReact.jsで実装し、Webブラウザ上で動くようにしていきたいと思います。

対象読者

・node、npm、yarnの使い方が分かる方
・React.js初学者

開発環境の構築

それでは早速やっていきましょう。まずは、開発環境の構築です。

React.jsでは、create-react-appと呼ばれる、React.jsプロジェクトの雛形を作成するコマンドが用意されていますが、今回はwebpackなどの使い方にも慣れるように、1から構築していきたいと思います。

1. 作業ディレクトリの作成

今回ヌメロンを開発していく作業ディレクトリを作成します。

好きな場所に好きな名前でディレクトリを作成してください。

ここでは、「react-numeron」といった名前で進めていきます。

$ mkdir react-numeron
$ cd react-numeron/

2. パッケージ初期化

「yarn init -y」を実行し、パッケージを初期化します。

ここではyarnの説明は省略しますが、興味のある方は以下で学習できます。

$ yarn init -y
yarn init v1.17.3
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.03s.

以下のようなpackage.jsonが生成されれば成功です。

{
  "name": "react-numeron",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

3. srcディレクトリの作成

ソースコードを格納するためのsrcディレクトリを作成しておきましょう。

$ mkdir src

4. index.htmlの作成

ディレクトリが準備できたので、実際にソースコードを書いていきましょう。

まずは土台となるHTMLファイルを作成します。

srcディレクトリ内に、index.htmlを作成し、以下のHTMLを記載します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Sample Page</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

まとめ

とりあえず作業ディレクトリの作成と、土台となるHTMLファイルの作成までを実施しました。

この記事が気に入ったらサポートをしてみませんか？