React プロジェクトを最初から作成する

7 分

このモジュールでは、スタータープロジェクトを使用することで、稼働させるまでの時間を短縮しました。このセットアップにより、React といくつかの新しい構文に集中できました。ご自分の作業に、スタータープロジェクトを自由に利用してください。

プロジェクトを最初から構築してみることもできます。空のフォルダーから始めるには、このユニットの手順のようにします。この手順では、スタータープロジェクトと同じように Snowpack を使用します。

このユニットは省略してもかまいません。独自のプロジェクトを作成する必要がない場合は、次のユニットに進んでください。

プロジェクトの構造を理解する

セットアップの中心には、コードが格納される 2 つの主要なフォルダーがあります。

public
- HTML、CSS、画像、またはその他の静的ファイルが格納されます
- index.html ファイルと index.css ファイルを格納します
src
- レンダリングする必要のあるすべてのファイルが格納されます
- すべての .jsx ファイルを格納します

また、アプリケーションを構成するために次の 2 つのファイルを作成します。

package.json: アプリケーションのパッケージとスクリプトのリストが含まれます
snowpack.config.js: Snowpack の構成オプションが含まれます

このアプリケーションには、3 つの主要なパッケージが必要です。

Snowpack: JSX を HTML および JavaScript にレンダリングするために使用されます
React: コンポーネントの作成に使用されます
React-DOM: アプリケーションをマウントするために使用されます

初期の構造を作成する

最初に、空のディレクトリに、npm を使用して必要なコンポーネントをインストールします。次に、Snowpack を構成し、スクリプトを package.json ファイルに追加します。

ターミナルまたはコマンドウィンドウを開きます。それから、次のコマンドを実行して、npm 用のディレクトリと package.json ファイルを作成します。 Mac または Linux では mkdir を使用し、Windows では md を使用してディレクトリを作成します。
```
# Windows
md react-recipes && cd react-recipes
md src
md public
touch package.json
echo "{}" > package.json

# Linux or macOS
mkdir react-recipes && cd react-recipes
mkdir src
mkdir public
touch package.json
echo "{}" > package.json
```
同じターミナルまたはコマンドウィンドウで次のコードを実行します。
```
npm install --save-dev snowpack
npm install react react-dom
```
Note

Snowpack は "開発の依存関係" です。つまり、ビルドプロセスの間に必要な JavaScript と HTML ファイルが生成されるため、運用環境では必要ありません。
次のコマンドを実行して、Visual Studio Code でディレクトリを開きます。
```
code .
```

Snowpack をセットアップする

Snowpack のようなツールの利点の 1 つは、多くの場合、自動的に構成されることです。ただし、コードのフォルダー構造を示す必要があります。フォルダー構造を示すには、snowpack.config.js ファイルでオプションを設定します。

Visual Studio Code で、[ファイル]>[新しいファイル] を選択して、新しいファイルを作成します。
ファイルに snowpack.config.js という名前を指定します。

次のコードを新しいファイルに追加します。

module.exports = {
    mount: {
        'public': '/',
        'src': '/dist'
    }
}

このコードにより、アプリケーションのルートとして public フォルダーを使用することが Snowpack に指示されます。また、生成される JavaScript ファイルと HTML ファイルのための仮想の場所として、src ディレクトリが設定されます。

npm スクリプトを作成する

開発作業をサポートするため、Snowpack で 2 つのスクリプトを使用します。 1 つ目のスクリプトで、開発サーバーが起動されます。アプリケーションを変更すると、この操作によりページが自動的に更新されます。 2 つ目のスクリプトは、デプロイ用にすべてのファイルをビルドする準備ができたときに使用します。

Visual Studio Code で package.json ファイルを開きます。

ファイルの末尾にある最後の中かっこ (}) の上に、次のコードを追加します。このコードにより、開始スクリプトとビルドスクリプトが作成されます。

{
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build"
    }
}

ファイル "全体" は次のコードのようになるはずです。

{
  "devDependencies": {
    "snowpack": "^2.18.5"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "scripts": {
      "start": "snowpack dev",
      "build": "snowpack build"
  }
}

[ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。

これで、スタータープロジェクトがセットアップされました。これまでのユニットで行ったのと同じように、index.html、App.jsx、その他のファイルを追加できます。

続行

プロジェクトの構造を理解する

初期の構造を作成する

Snowpack をセットアップする

npm スクリプトを作成する

フィードバック