MERN スタック入門: 初心者ガイド

MERN スタックとは何ですか?

MERN は Web 開発におけるアベンジャーズのようなもので、素晴らしい Web アプリを作成するために協力するスーパーヒーローのチームです。チームは次のとおりです:

• MongoDB: データを JSON のようなドキュメントに保存する冷却データベース。金曜日の夜の予定に合わせて柔軟に対応します。
• Express.js: サーバー側の開発を簡単にするバックエンド ウィザード。これを手術の背後にある頭脳と考えてください。
• React.js: 動的でインタラクティブなユーザー インターフェイスの構築を担当する、現場のクールな子供です。ユーザーはきっと気に入ってくれるでしょう。
• Node.js: サーバー上で JavaScript を実行するサイレント パワーハウス。必要なときにいつでもそばにいてくれる友達のようなものです。

これらを組み合わせることで、Web 開発がスムーズかつ高速になり、そしてあえて言えば楽しいものになります。

---

MERN を選ぶ理由

MERN に時間をかける価値がある (そして眠れない夜も) 理由は次のとおりです:

• すべてを支配する 1 つの言語: どこでも JavaScript!フロントエンド、バックエンド、データベースのすべてを 1 つの言語で。ユニバーサルリモコンを持っているようなものです。
• スケーラビリティの目標: 小さな副プロジェクトから次の 10 億ドル規模のアプリまで、MERN はプロのように拡張します。
• コミュニティパワー: 行き詰まっていませんか?ググってみてください。 MERN コミュニティには、おそらくあなたの問題に対するミーム、つまり解決策があるでしょう。
• カスタマイズ可能な AF: オープンソース技術なので、思う存分調整できます。ワイルドに楽しみましょう (ただし、ある程度の正気は保つかもしれません)。

---

環境のセットアップ

MERN の傑作の構築を開始する前に、準備を整える必要があります。チェックリストは次のとおりです:

1. Node.js と npm: Node.js 公式 Web サイトから入手します。これらはパンとバターのようなもので、これなしでは生きていけません。
2. MongoDB: MongoDB 公式 Web サイトからダウンロードします。プロのヒント: NoSQL という用語を怖がらないでください。大したことではありません。
3. コード エディター: VS Code はコード エディターの Netflix です。みんなが使っていてとても良いです。

上司のように設定を確認します:

node -v
npm -v
mongo --version

---

初めての MERN アプリ

1. プロジェクトを初期化します

新しいプロジェクトを作成することから始めます。あなたの赤ちゃんのようなものだと考えてください。

mkdir mern-app
cd mern-app
npm init -y

2. バックエンドをセットアップする

バックエンドグッズをインストールします:

npm install express mongoose dotenv

index.js ファイルを作成し、バックエンドに命を吹き込みます:

const express = require('express');
const mongoose = require('mongoose');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 5000;

// Middleware
app.use(express.json());

// Routes
app.get('/', (req, res) => {
  res.send('Welcome to the MERN Stack!');
});

// MongoDB Connection
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

3. フロントエンドをセットアップする

フロントエンドに切り替えます:

npx create-react-app client

React サーバーをキックスタートします:

node -v
npm -v
mongo --version

4. バックエンドとフロントエンドを接続

• axios ライブラリを使用して、親友のようにバックエンドと通信します。
• 気まずい沈黙を避けるために、このプロキシ設定を React package.json ファイルに追加します。

mkdir mern-app
cd mern-app
npm init -y

さて、フロントエンドとバックエンドがスムーズに会話するのを見てください。

---

学習リソース

これが MERN スタックのシラバスです (退屈な講義を除いたもの):

• React ドキュメント (React で幽霊になった場合用)。
• Express.js ドキュメント (バックエンドのチートシート)。
• MongoDB Docs (ダミー用のデータベース)。
• Node.js ドキュメント (JavaScript は世界、または少なくともこのスタックを実行します)。

---

初心者向けのヒント

1. シンプルに保つ: 次の Facebook をすぐに構築しないでください。まずはToDoリストから始めましょう。私たちを信頼してください。
2. 実践して学ぶ: 読書は素晴らしいですが、腕まくりしてコーディングすることに勝るものはありません。
3. Google はあなたの親友です: 困っていますか?どこかで誰かがすでに同じ問題に直面しています。
4. マスター JavaScript: これは MERN のバックボーンです。基本をしっかりと身につければ、残りは後から続きます。

---

結論

MERN スタックは、Web 開発の世界への黄金のチケットです。強力で初心者に優しく、とても楽しい作業です。それで、何を待っていますか？ターミナルを起動して、コーディングを始めましょう!

覚えておいてください、どんな専門家もかつては諦めなかった初心者でした。これはわかりましたね！ ?

以上がMERN スタック入門: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。