ایجاد یک پروژه React از پایه بدون استفاده از create-react-app

ایجاد و راه اندازی پروژه React از ابتدا ممکن است گاهی اوقات کمی مشکل ساز باشد، حتی اگر اولین بار نیست که یک پروژه React را شروع می‌کنید. به همین دلیل است که از create-react-app استفاده می‌کنیم، دستوری که تمام کامپوننت‌ها و ماژول‌ها را برای ما آماده و نصب می‌کند و پس از اتمام این روند، برنامه آماده است.

هرچند بهره گیری از create-react-app برای شروع کار بسیار خوب است، مخصوصا برای کسانی که در دنیای React تازه وارد هستند یا نمی‌خواهند وقت خود را برای تنظیم همه چیز صرف کنند. اما جالب است بدانید یک مورد دیگر نیز وجود دارد که این کارها را برای ما انجام می‌دهد.

همانطور که می‌توانید تصور کنید، این روش به سادگی اجرای یک دستور ساده نخواهد بود، اما مطمئنا برای حرفه توسعه دهنده شما رضایت بخش‌تر و مفیدتر است (ناگفته نماند که این یک فرآیند قابل استفاده مجدد است). همچنین از شر موارد نه چندان ضروری که همراه با create-react-app ایجاد شده و پروژه شما را بیش از حد سنگین می‌کند، خلاص می‌شوید.

توجه داشته باشید که من از ساختار خاصی برای پروژه استفاده نخواهم کرد، زیرا فکر می‌کنم این کار بسیار سلیقه‌ای است و هر توسعه‌دهنده‌ای به روشی متفاوت کار می‌کند، بنابراین این انتخاب را به شخص شما واگذار می‌کنم.

بسیار خب با تمام این گفته‌ها بیایید به اصل مطلب بپردازیم.

مرحله 1: ایجاد پوشه‌ای که پروژه را میزبانی می‌کند

در ابتدا قصد داریم با ایجاد یک دایرکتوری جدید برای پروژه خود در محلی که انتخاب می‌کنیم، کار را شروع کنیم.

mkdir my-react-project

پس از ایجاد می‌خواهیم وارد آن شویم.

cd my-react-project

مرحله 2: شروع پروژه

برای شروع پروژه می‌خواهیم یک دستور npm را اجرا کنیم.

npm یک پکیج می‌باشد که مدیریت نسخه‌ها و وابستگی‌ها را به عهده دارد و برای جاوااسکریپت ساخته شده است. اگر هنوز npm را نصب نکرده‌اید باید مستقیما Node.js را نصب کنید، زیرا آنها با هم کار می‌کنند و npm نیز در نصب Node.js گنجانده شده است. Node.js هم به ما اجازه می‌دهد جاوااسکریپت را در سمت سرور اجرا کنیم.

همچنین می‌توانید از یک مدیر بسته متفاوت مانند Yarn یا Bower استفاده کنید.

اگر مطمئن نیستید که npm/Node.js را قبلا نصب کرده‌اید، فقط کافی است دستورات زیر را اجرا کرده تا آخرین نسخه‌های نصب شده را مشاهده کنید. اگر این دستورات شماره نسخه را نشان داد، در حال حاضر آنها را در سیستم خود دارید. در غیر این صورت باید دوباره آن‌ها را نصب کنید.

npm -v

node -v

هنگامی که npm و Node.js را برای استفاده در سیستم آماده کردیم، دستور زیر را اجرا می‌کنیم:

npm init

این دستور یک فایل package.json ایجاد می‌کند، این فایلی است که تمام وابستگی‌ها و اسکریپت‌های پروژه ما در آن مشخص می‌شود.

در طول مراحل ایجاد فایل، ترمینال سوالاتی را از شما می‌پرسد تا اجازه دهد پروژه خود را با اطلاعات مناسب در مورد آن تنظیم کنید. اگر می‌خواهید از سوال فعلی بگذرید، کافیست enter را فشار دهید تا به پرسش بعدی برود.

اگر تمایلی به دادن اطلاعات اضافی برای پروژه ندارید یا می‌خواهید بعدا آن را پیکربندی کنید، فقط فلگ y- را به دستور اضافه کنید:

npm init -y

پس از نصب، یک فایل جدید package.json در پروژه خود خواهیم داشت که به صورت زیر است:

{
  "name": "my-react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

مرحله 3: نصب وابستگی‌ها

برای اینکه برنامه React ما به درستی و مطابق انتظار کار کند، باید چند وابستگی به صورت دستی نصب کنیم.

وابستگی‌های React

ما وابستگی‌های زیر را در سمت React نصب خواهیم کرد:

react: كتابخانه جاوااسکریپت كه با آن كار خواهيم كرد.

react-dom: پکیجی حاوی برخی از متدها برای مدیریت عناصر DOM.

react-router-dom: پکیجی که شامل اتصالات DOM برای React Router است.

npm install react react-dom react-router-dom

وابستگی‌های Webpack

برای آماده سازی پروژه خود برای وب به یک بسته نرم‌افزاری ماژول نیز نیاز خواهیم داشت. Webpack تمام فایل‌های جاوااسکریپت موجود در پروژه را بسته بندی کرده و تمام منابع لازم را برای استفاده در مرورگر آماده می‌کند.

از آنجا که برای کار در محیط توسعه فقط به Webpack نیاز داریم، بنابراین می‌خواهیم تمام وابستگی‌های مربوط به آن را با اضافه کردن flag --save-dev یا D- به دستور نصب کنیم.

همچنین وابستگی‌های زیر را در کنار Webpack نصب خواهیم کرد:

webpack: پکیج نرم‌افزاری.

webpack-cli: CLI برای Webpack.

npm install --save-dev webpack webpack-cli

وابستگی‌های Babel

Babel یک کامپایلر جاوااسکریپت است که جاوااسکریپت ES6 را به جاوااسکریپت ES5 تبدیل می‌کند، زیرا همه مرورگرها در حال حاضر از ویژگی‌های ECMAScript 6 پشتیبانی نمی‌کنند.

وابستگی‌های مربوط به Babel که می‌خواهیم نصب کنیم شامل موارد زیر است:

babel/core@: هسته کامپایلر Babel.

babel/preset-react@: پکیجی حاوی مجموعه‌ای از پلاگین‌ها است که برای پشتیبانی از ویژگی‌های React استفاده می‌شود.

npm install --save-dev @babel/core @babel/preset-react

قبل از اینکه بیشتر به وابستگی‌ها بپردازیم، می‌خواهیم Babel را در پروژه خود پیکربندی کنیم تا فایل‌های جاوااسکریپت ما طبق آنچه در نظر گرفته شده منتقل شوند.

بیایید به ترمینال برگردیم تا یک فایل جدید برای این پیکربندی ایجاد کنیم:

touch .babelrc

سپس فقط کد زیر را اضافه کنید:

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

لودرها برای Webpack

Webpack برای پیش پردازش فایل‌ها به چیزی به نام لودر نیاز دارد. آنها برای بسته بندی منابع استاتیک فراتر از جاوااسکریپت مفید هستند.

اینها لودرهای اساسی اند که ما با آنها کار خواهیم کرد:

babel-loader: لودر برای Babel.

html-loader: لودر برای HTML.

style-loader: لودری که استایل‌ها را به DOM تزریق می‌کند.

css-loader: لودر برای CSS.

(*)sass-loader: لودر برای SASS.

(*) این لودر کاملا ضروری نیست، اما درصورتی که بخواهید از پیش پردازنده CSS استفاده کنید، برای آن نیز به لودر نیاز دارید. همچنین لودرهایی برای LESS ، PostCSS ، Stylus و... نیز وجود دارد.

npm install --save-dev babel-loader html-loader style-loader css-loader sass-loader

پلاگین‌های Webpack

ما همچنین به پلاگین‌های Webpack نیاز داریم که برای اهداف بسته بندی به ما کمک می‌کنند.

html-webpack-plugin: این پلاگین برای ایجاد فایل‌های HTML استفاده می‌شود که باندل‌ها را رزرو می‌کند.

توجه: از آنجا که ما در یک محیط توسعه کار می‌کنیم، فقط از یک لودر برای استایل‌ها استفاده خواهیم کرد. اما برای بیلدها توصیه می‌شود CSS را از باندل با استفاده از MiniCssExtractPlugin استخراج کنید. این پلاگین CSS را استخراج کرده و آن را در فایل‌های جداگانه دسته بندی می‌کند و برای هر فایل جاوااسکریپت حاوی CSS فایل‌هایی ایجاد می‌کند.

لودر سریعتر است و در داخل تگ <style> استایل‌ها را به صورت داخلی تنظیم می‌کند، در حالی که این پلاگین با استفاده از تگ <link> فایل استایل‌های خارجی را به سند HTML لینک می‌دهد.

وابستگی‌های سرور

برنامه ما همچنین به یک سرور نیاز دارد، بنابراین از وابستگی‌های مربوط به سرور نیز استفاده خواهیم کرد. ما قصد داریم موارد زیر را نصب کنیم:

express: فریمورک Node.js که برای ایجاد فایل سرور و رسیدگی به درخواست‌های سرور از آن استفاده خواهیم کرد.

nodemon: ابزاری که هر زمان تغییری در دایرکتوری برنامه ایجاد شود، برنامه وب ما را رفرش می‌کند.

npm install express

npm install --save-dev nodemon

مرحله 4: پیکربندی Webpack

مرحله بعدی قرار دادن لودرها و پلاگین‌های Webpack است که به تازگی در یک فایل پیکربندی نصب کرده‌ایم تا به آن اطلاع دهیم رفتار آن در روند بسته فایل‌های ما چگونه است.

برای شروع قصد داریم یک فایل خالی برای این منظور ایجاد کنیم. بازگشت به ترمینال:

touch webpack.config.js

قبل از رفتن به محتوای این فایل پیکربندی می‌خواهیم ببینیم که این برنامه واقعا چه کاری انجام می‌دهد و چگونه رفتار می‌کند.

اول از همه باید به Webpack بگوییم که نقطه ورود برنامه ما کدام خواهد بود. این نقطه ورود یک فایل جاوااسکریپت به نام index.js است.

همچنین باید فایل خروجی را مشخص کنیم، این آخرین فایل جاوااسکریپت است که به صورت باندل شده و تنها یک فایل است که به طور صریح از فایل HTML ارائه شده ارجاع می‌شود.

در این مرحله ذکر پوشه dist مهم است. این پوشه یک دایرکتوری است که به عنوان بخشی از فرآیند باندلینگ ایجاد شده و تمام فایل‌های استاتیک تولید شده در نتیجه آن را در خود نگه می‌دارد.

موارد بیشتری که Webpack باید بداند نوع فایل‌هایی است که برای ترجمه صحیح با آنها کار می‌کند. در حال حاضر شامل انواع HTML ، CSS، SASS/SCSS و JavaScript می‌باشد. اما اگر در آینده نیاز به کار با انواع مختلفی از فایل‌ها داشته باشیم (قطعا این اتفاق خواهد افتاد) از جمله تصاویر، فونت‌ها و... اینها نیز به لودرهای خاص خود نیاز دارند.

و در آخر باید پیکربندی پلاگین‌های لازم را انجام دهیم. در این حالت HtmlWebpackPlugin ، HTML تولید شده برای مرورگر را ایجاد می‌کند.

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/",
  },
  module: {
    rules:[
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.html$/,
        use: "html-loader"
      },
      /*Choose only one of the following two: if you're using 
      plain CSS, use the first one, and if you're using a
      preprocessor, in this case SASS, use the second one*/
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ],
      },
    ], 
  },  
  plugins: [
    new HTMLWebpackPlugin({
      template: "index.html"
    }),
  ]
}

مرحله 5: ایجاد الگوی HTML

این ساده‌ترین مرحله است اما به هر حال باید آن را انجام دهیم.

ما باید یک سند HTML اصلی ایجاد کنیم که توسط HTMLWebpackPlugin به عنوان الگویی برای تولید سند جدید استفاده شود. به همین راحتی!

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

به <div> خالی با آی دی root توجه کنید. بعدا درمورد آن صحبت خواهیم کرد.

مرحله 6: ایجاد سرور

سرور قرار است یک فایل جاوااسکریپت جدید باشد که درگاهی را برای گوش دادن به شما باز می‌کند و چند درخواست انجام می‌دهد.

touch app.js

ما قصد داریم آن را app.js بنامیم اما شما می‌توانید هر نام دلخواهی به آن بدهید. فقط مراقب بزرگ‌نویسی باشید. بعدا این مورد را خواهید فهمید.

app.js

const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 3000;

app.listen(port, () => {
   console.log(`The app server is running on port: ${port}`);
});

const DIST_DIR = path.join(__dirname, "dist");
const HTML_FILE = path.join(DIST_DIR, "index.html");

app.use(express.json());
app.use(express.static("public"));
app.use(express.static("dist"));

app.get("/", (req, res) => {
   res.sendFile(HTML_FILE, function(err){
      if(err){
         res.status(500).send(err);
      }
   });
});

کاری که ما در این فایل انجام می‌دهیم شروع یک سرور جدید است که برای اتصال به پورت 3000 گوش می‌دهد. سپس فایل HTML تولید شده توسط Webpack به URL اصلی ارسال می‌شود (به عبارت دیگر این HTML صفحه اصلی برنامه ما خواهد بود). همچنین نشان می‌دهیم که هر فایلی در دایرکتوری public و dist است استاتیک بوده و باید به همین ترتیب با آنها رفتار شود.

مرحله 7: ایجاد برنامه React

اکنون قصد داریم App.js را ایجاد کنیم که اصلی‌ترین کامپوننت برنامه ری‌اکت ما خواهد بود (قبلا که برای بزرگ‌نویسی هشدار داده بودیم در اینجا اهمیت پیدا می‌کند).

App.js

import React from "react";

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

export default App;

رندر این کامپوننت به HTML تزریق می‌شود، بنابراین آنچه که با باز کردن مرورگر مشاهده خواهیم کرد: Hello, World!

بیایید نگاهی به چگونگی انجام این کار بیندازیم.

مرحله 8: ایجاد نقطه ورود به برنامه React

در این مرحله می‌خواهیم مسیریابی را برای برنامه خود مشخص کنیم و همچنین جایی که در DOM باید محتوای React وارد شود.

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import App from "./App.js";
import "./styles.scss";

const appRouting = (
  <Router>
    <Switch>
      <Route exact path="/" component={App} />
    </Switch>
  </Router>
);

ReactDOM.render(appRouting, document.getElementById("root"));

ما فقط نشان می‌دهیم که وقتی URL دقیقا با مسیر ریشه مطابقت داشته باشد، باید کامپوننت برنامه رندر شود و محتوای آن باید در داخل تگی با آی دی root در فایل index قرار گیرد.

مرحله 9: تعریف اسکریپت‌ها

در آخر می‌خواهیم اسکریپت‌ها را تنظیم کنیم تا بتوانیم برنامه خود را بسازیم و اجرا کنیم.

دوباره به package.json برگردیم، در ابتدا چیزی شبیه به این در بخش اسکریپت‌ها داشتیم:

{
  ...
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
    }
  ...
}

اکنون می‌خواهیم دو مورد دیگر اضافه کنیم:

{
  ...
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist && webpack --mode development",
    "dev": "nodemon app.js"
  ...
}