---
title: "بناء مواقع ثابتة دون React، باستخدام React (الجزء 1/3)"
description: "React رائعة ونحب العمل بها، لكننا ببساطة لا نريدها داخل ملفات HTML وCSS وJavascript النهائية."
canonical: https://oozou.com/ar/blog/building-static-sites-without-react-using-react-part-1-3-70
locale: ar
date: 2020-07-20
author: "OOZOU Team"
---

# بناء مواقع ثابتة دون React، باستخدام React (الجزء 1/3)

> React رائعة ونحب العمل بها، لكننا ببساطة لا نريدها داخل ملفات HTML وCSS وJavascript النهائية.

Published: 2020-07-20 · Author: OOZOU Team (Engineering) · 3 min read

نحن في عام 2020، والحديث يتزايد عن توليد المواقع الثابتة (static site generation) باستخدام أطر الواجهات مثل [React](https://reactjs.org/). ولدينا مكتبات جيدة كثيرة، بل أطر عمل كاملة، مثل [Gatsby](https://www.gatsbyjs.org/) و[NextJS](https://nextjs.org/) و[react-static](https://github.com/react-static/react-static) وغيرها.

> لماذا إذن نتحدث عن طريقة أخرى لتوليد المواقع الثابتة بدل استخدام هذه الأدوات الرائعة الموجودة؟

في الأساس، تنشئ كل هذه الأدوات ملفات HTML وCSS وJavascript ثابتة، لكنها تترك فيها بصمات React. وهذا ليس أمرًا سيئًا على الإطلاق، بل هو أفضل ما حدث على الإطلاق. فأنتم تحصلون على بيئة تشغيل React ومعها فوائد [virtual DOM](https://reactjs.org/docs/faq-internals.html). لكن تخيّلوا أننا مطالبون بإنشاء ملفات HTML تقليدية بسيطة، مع بعض منطق الواجهة في script يعمل على جهة العميل. يمكننا استخدام كثير من محركات القوالب (template engines) المتاحة، لكن لماذا لا نستخدم React؟

# نظرة عامة

منذ أن قدّمت React الدالة [renderStaticMarkup](https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup)، يستخدمها كثيرون للعرض من جهة الخادم (server-side rendering) وإخراج HTML بسيط، وهذه فكرة أنيقة. سنستخدمها لتوليد المحتوى المُعرَض مسبقًا (pre-rendered). ثم نستخرج ملفات CSS وJavascript المرتبطة به. وأخيرًا نضع المحتوى المُعرَض مسبقًا داخل قالب HTML مع وسوم script وstylesheet الصحيحة، ونُخرج الملفات.

# الإعداد

لنبدأ بملف package.json

```json
{
  "name": "react-no-react",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.10.4",
    "@babel/node": "^7.10.4",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "glob": "^7.1.6"
  }
}
```

كما ترون، نحتاج إلى React وReactDOM وBabel. نستخدم Babel لتحويل (transpile) كود Javascript الذي قد نكتبه بصيغة ES6 للعمل على جهة العميل. وسنستخدم babel-node أيضًا كأداة CLI.
لننشئ هيكل المشروع.

```
.
├── pages
│   ├── AboutUs.jsx
│   └── Home.jsx
├── scripts
│   └── build.js
├── babel.config.js
└── package.json
```

في ملف babel.config.js ننشئ الإعداد على هذا النحو

```javascript
module.exports = {
  presets: ["@babel/env", "@babel/react"],
};
```

ثم في ملف scripts/build.js.

```javascript
import React from "react";
import path from "path";
import fs from "fs";
import glob from "glob";
import { renderToStaticMarkup } from "react-dom/server";
import { spawnSync } from "child_process";

const cwd = path.resolve(__dirname, "..");

// We glob all the files under "pages" directory
const reactFiles = glob.sync("pages/**/*.jsx", { cwd });

reactFiles.forEach((reactFile) => {
  const fileName = path.basename(reactFile).replace(".jsx", "");

  // Page components are from "default" export
  const Component = require(path.resolve(__dirname, "../", reactFile)).default;
  const staticMarkup = renderToStaticMarkup(<Component />);

  // Generate HTML file name from ".jsx" files by replacing the extension with ".html"
  const htmlFile = path.resolve(
    __dirname,
    "../dist/",
    reactFile.replace(".jsx", ".html")
  );

  const dirName = path.dirname(htmlFile);

  // In case we have nested page structure, we need to create directory recursively.
  fs.mkdirSync(dirName, { recursive: true });

  fs.writeFileSync(
    htmlFile,
    `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>${fileName}</title>
</head>
<body>
  ${staticMarkup}
</body>
</html>`,
    "utf8"
  );
});
```

لننشئ الصفحات

```javascript
// pages/Home.jsx
import React from "react";

export default () => <h1>Home Page</h1>;
```
```javascript
// pages/AboutUs.jsx
import React from "react";

export default () => <h1>About Us</h1>;
```

وأخيرًا، أنشئوا script للبناء داخل package.json

```json
...
"scripts": {
  "build": "babel-node scripts/build.js"
},
...
```

شغّلوا الـ script

```
npm run build
```

أو

```
yarn build
```

بعد ذلك يُفترض أن تروا ملفين جديدين.

```
.
├── dist
│   ├── AboutUs.html
│   └── Home.html
...
```

لكن هذه مجرد ملفات HTML بسيطة. فماذا عن CSS وJS والملفات الثابتة (static assets)؟ هذا ما سنناقشه في الجزء التالي، فإن كان الموضوع يهمكم، تابعونا.اقرأوا التالي: [بناء مواقع ثابتة دون React، باستخدام React (الجزء 2/3)](https://oozou.com/blog/building-static-sites-without-react-using-react-part-2-3-72)

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ar/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"