Introduction to React.js Part.1
こんにちは、ワタナベ(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ファイルの作成までを実施しました。
この記事が気に入ったらサポートをしてみませんか?