create-react-appを使わずプロジェクトを作る手順

create-react-appを使わずにReact.jsのプロジェクトを作る方法を解説します。

①プロジェクトに使うフォルダを作る

まず、mkdirコマンドでReact.jsのプロジェクトのフォルダを作ります。

mkdir フォルダ名

このように、エクスプローラーで新しいフォルダを作っても構いません。

②package.jsonファイルを作る

package.jsonファイルは、React.jsのプロジェクトに必要なパッケージを管理するファイルです。npm initコマンドを実行すると、package.jsonファイルが作成されます。

npm init

コマンドを実行すると、このように1つずつ質問がありますので、回答していきましょう。

package name: (test)
version: (1.0.0)
description:
entry point:
test command:
git repository:
keywords:
author:
license: (ISC)

最後の質問・回答が終わると、最後に出来上がるpackage.jsonのプレビューが表示されて「Is this OK? (yes)(この内容で大丈夫ですか？)」と出るので、yesと打ち込みましょう。

About to write to [このコマンドを実行したフォルダパス]\package.json:

{
	"name": "test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC"
}

Is this OK? (yes) yes

できあがったpackage.jsonがこちらです。

package.json

{
	"name": "test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC"
}

③React.jsをインストールする

React.jsをインストールするにあたり、npm install react react-domコマンドを実行します。

npm install react react-dom

すると、package.jsonに「dependecies」という項目が追加されます。「依存関係」と呼ばれるものです。

package.json

{
	"name": "test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	}
}

④Reactアプリを動かすためのscriptを準備する

React.jsで作ったページを開発環境で実行したり、出来上がったものを本番サーバーにアップロードするファイルに仕上げるときのscriptをインストールします。

npm install react-scripts

続いて、package.jsonの「scripts」を下記のように変更します。

package.json

{
	"name": "test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test",
		"eject": "react-scripts eject"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
		"react": "^18.2.0",
		"react-dom": "^18.2.0"
	}
}

⑤npm startが使用できるファイル構成を作る

フォルダ構成は何でも良いわけではなく、こちらのように配置します。

📁 フォルダ
├─ 📁 node_modules
├─ 📁 public
│　　├─ index.html
├── 📁 src
│　　└─ index.js
├── package.json
└── package-lock.json

/public/index.htmlの中身を書く

/public/index.htmlファイルは、React.jsのプロジェクトのエントリポイントとなるファイルです。次のコードをindex.htmlファイルに追加してください。

エントリポイントというのは、そのReactアプリケーションで最初に表示されるファイルと思ってもらえれば大丈夫です。

/public/index.html

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

/src/index.jsの中身を書く

/src/index.jsファイルは、/public/index.htmlで実行されます。

/src/index.js

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
	return (
		<h1>Hello World!</h1>
	);
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
);

⑥開発サーバーを起動する

準備ができたら、次のコマンドを実行します。

npm start

コマンドを実行すると、このような質問がきますので、yesと打ち込みましょう。

Would you like to add the defaults to your package.json? ... yes

しばらくすると、開発サーバーが起動し、「http://localhost:3000」といったURLでページが表示されます。

You can now view react-test in the browser.

Local:            http://localhost:3000
On Your Network:  http://***.***.***.**:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully