ReactJS - Reactアプリケーションの作成

こんにちは、未来のReact開発者たち！あなたが初めてのReactアプリケーションを作成する興奮する旅を案内するのがとても楽しみです。コンピュータサイエンスを教えてきた経験から、Reactは強力で、学ぶのも楽しいことを保証します。では、始めましょう！

ReactJS - Creating a React Application

Reactとは？

コードを書く前に、Reactとは何かを理解しましょう。Reactはユーザーインターフェースを構築するための人気のJavaScriptライブラリです。Facebookによって開発され、Netflix、Instagram、Airbnbなどの多くの大企業で使用されています。Reactは、複雑なウェブアプリケーションを簡単に構築するためのレゴブロックセットと考えてください。

開始する前に

Reactアプリケーションを作成するために、いくつかのツールが必要です。これらを以前に使用したことがない場合でも、一緒にそれぞれの手順を進めましょう！

前提条件

Node.jsとnpm（Nodeパッケージマネージャー）
コードエディタ（Visual Studio Codeを推奨します）

これらをまだインストールしていない場合は、少し時間を取ってインストールしてください。これは、美味しい料理を作る前にキッチンを準備するのと同じです！

Rollupバンドラーの使用

まず、Rollupを使用してReactアプリケーションを作成しましょう。RollupはJavaScriptのモジュールバンドラーで、小さなコード片をより大きな複雑なものに编译します。

ステップ1: プロジェクトのセットアップ

まず、プロジェクト用の新しいディレクトリを作成し、初期化します：

mkdir my-react-app
cd my-react-app
npm init -y

これにより、新しいフォルダーが作成され、新しいNode.jsプロジェクトが初期化されます。これは、私たちの家の基礎を築くようなものです！

ステップ2: 依存関係のインストール

必要なパッケージをインストールしましょう：

npm install react react-dom
npm install --save-dev @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace rollup-plugin-babel @rollup/plugin-babel @babel/preset-react rollup-plugin-terser

これらの長い名前に驚かないでください。これらはReactのレシピの材料だと思ってください！

ステップ3: 設定ファイルの作成

重要な2つのファイルを作成しましょう：

rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import babel from '@rollup/plugin-babel';
import { terser } from 'rollup-plugin-terser';

export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'iife',
sourcemap: true,
},
plugins: [
resolve(),
commonjs(),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
babel({
presets: ['@babel/preset-react'],
}),
terser(),
],
};

このファイルは、Rollupにアプリケーションをバンドルする方法を指示します。これは、シェフに料理の作り方を指示するのと同じです。

.babelrc：

{
"presets": ["@babel/preset-react"]
}

このファイルはBabelを設定し、現代のJavaScriptを古いブラウザでも理解できるように翻訳するのを助けます。

ステップ4: Reactコンポーネントの作成

まず、初めてのReactコンポーネントを作成しましょう。新しいファイルsrc/App.jsを作成します：

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>私の最初のReactアプリケーションにようこそ！</p>
</div>
);
}

export default App;

これは私たちのメインコンポーネントです。これは、私たちのショーのスターです！

次に、src/index.jsを作成します：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

このファイルは、私たちのAppコンポーネントをHTMLにレンダリングする責任を負います。

ステップ5: HTMLファイルの作成

新しいファイルpublic/index.htmlを作成します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のReactアプリ</title>
</head>
<body>
<div id="root"></div>
<script src="../dist/bundle.js"></script>
</body>
</html>

ここに私たちのReactアプリケーションがマウントされます。

ステップ6: package.jsonにスクリプトの追加

package.jsonに以下のスクリプトを追加します：

"scripts": {
"build": "rollup -c",
"start": "rollup -c -w"
}

これらのスクリプトは、アプリケーションをビルド하고実行するのに役立ちます。

ステップ7: アプリケーションのビルドと実行

さあ、私たちの創造物を生き返らせましょう！以下を実行します：

npm run build

これにより、バンドルされたJavaScriptファイルが作成されます。アプリケーションを表示するには、public/index.htmlをウェブブラウザで開きます。おめでとうございます！あなたはRollupを使用して初めてのReactアプリケーションを作成しました！

Parcelバンドラーの使用

Rollupの使用方法を見たので、次に別の人気のバンドラー、Parcelを使用してみましょう。Parcelはゼロコンフィギュレーションアプローチで知られており、非常に簡単に始められます。

ステップ1: プロジェクトのセットアップ

新しいプロジェクトを作成します：

mkdir my-parcel-react-app
cd my-parcel-react-app
npm init -y

ステップ2: 依存関係のインストール

ReactとParcelをインストールします：

npm install react react-dom
npm install --save-dev parcel-bundler

ステップ3: Reactコンポーネントの作成

src/App.jsを作成します：

import React from 'react';

function App() {
return (
<div>
<h1>Hello, React with Parcel!</h1>
<p>このアプリはParcelでバンドルされました。</p>
</div>
);
}

export default App;

src/index.jsを作成します：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

ステップ4: HTMLファイルの作成

src/index.htmlを作成します：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私のParcel Reactアプリ</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>

ここで、私たちは直接index.jsファイルにリンクしています。Parcelはバンドリングを自動的に行います！

ステップ5: package.jsonにスクリプトの追加

package.jsonを更新します：

"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}

ステップ6: アプリケーションの実行

アプリケーションを起動します：

npm start

Parcelは自動的にブラウザでアプリケーションを開き、変更を即座に反映します！

生産環境用にビルドするには：

npm run build

これにより、最適化されたファイルがdistディレクトリに作成されます。

RollupとParcelの比較

以下に、使用した2つのバンドラーの簡単な比較を示します：

機能	Rollup	Parcel
設定	設定ファイルが必要	ゼロコンフィギュレーション
速度	快速	非常に高速
バンドルサイズ	通常小さめ	稍微大きめ
学習曲線	陡峭	ゆるやか
柔軟性	高度にカスタマイズ可能	よりカスタマイズが少ない

どちらのバンドラーもそれぞれの強みがあり、プロジェクトの特定のニーズに応じて選択することが多いです。

結論

おめでとうございます！あなたはRollupとParcelの両方を使用してReactアプリケーションを作成しました。千里の行程は最初の一歩から始まります。あなたはReact開発の興奮する世界への第一歩を踏み出しました。

学びを続け、好奇心を持ち、最も重要なのは、楽しむことです！Reactは強力なツールですが、使い心地もよいです。ハッピーコーディング！

Credits: Image by storyset