كيفية إنشاء مشروع React باستخدام Create React App في 10 خطوات عملية

مقدمة: لماذا يُعد Create React App خياراً مناسباً لبدء مشاريع React؟

تُعد حزمة Create React App من أسهل الأدوات التي تساعدك على إطلاق مشروع React جديد بسرعة وبدون إعدادات معقدة. فهي تجهز لك بيئة تطوير متكاملة تتيح التركيز على بناء الواجهة والمنطق البرمجي بدلاً من الانشغال بالإعدادات الأولية الخاصة بأدوات البناء والاختبار.

سواء كنت تعمل على مشروع شخصي صغير أو تطور تطبيقاً أكبر قابلًا للتوسع، فإن Create React App تمنحك نقطة انطلاق مستقرة وعملية. في هذا الدليل ستتعرف على الخطوات الأساسية لبناء مشروع React من الصفر، مع شرح واضح وملاحظات تقنية مفيدة لتحسين سير العمل.

الأدوات المطلوبة قبل البدء

• تثبيت Node.js على جهازك، ويُفضّل ألا يقل الإصدار عن 10.
• توفر مدير الحزم npm، وهو يأتي عادةً مع تثبيت Node.js. ويُشترط أن يكون الإصدار 5.2 أو أحدث.
• محرر أكواد احترافي مثل Visual Studio Code لتسهيل إدارة الملفات وتشغيل الأوامر.

الخطوة 1: تثبيت Create React App وإنشاء المشروع

لبدء مشروع جديد، افتح الطرفية Terminal أو موجّه الأوامر، ثم استخدم الأداة npx لتشغيل الحزمة مباشرةً دون تثبيتها يدوياً على النظام.

يمكنك أولاً التأكد من إصدار npm عبر الأمر npm -v.

لإنشاء مشروع جديد شغّل الأمر التالي:

npx create-react-app my-react-app

بعد تنفيذ الأمر، سيُنشأ مجلد باسم my-react-app مع تثبيت جميع الاعتماديات المطلوبة تلقائياً. غالباً تستغرق العملية بين دقيقتين إلى ثلاث دقائق، وقد تطول قليلاً حسب سرعة الجهاز والاتصال.

إذا كنت تريد إنشاء مشروع يدعم TypeScript منذ البداية، فاستخدم القالب الجاهز التالي:

npx create-react-app my-react-app --template typescript

الخطوة 2: فهم بنية المشروع بعد الإنشاء

بعد اكتمال إعداد المشروع، ستظهر لك بنية ملفات شبيهة بالتالي:

my-react-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
└── src

وظيفة أهم الملفات والمجلدات

• README.md: ملف توثيقي يحتوي على معلومات وروابط مفيدة للعمل على المشروع.
• node_modules: يضم جميع الحزم المثبتة والاعتماديات، وعادة لا تحتاج إلى التعديل بداخله.
• package.json: الملف المسؤول عن تعريف المشروع، وإدارة الحزم، والأوامر التشغيلية مثل start وbuild.
• .gitignore: يحدد الملفات والمجلدات التي يجب ألا يتتبعها Git.
• public: مخصص للملفات الثابتة مثل الصور والخطوط وملفات favicon.
• src: يحتوي على الشيفرة المصدرية للتطبيق، وهو المجلد الذي ستعمل داخله غالباً.

ومن المزايا المهمة أن إنشاء مشروع جديد عبر Create React App يُنشئ أيضاً مستودع Git تلقائياً، ما يسهّل عليك حفظ التغييرات منذ اللحظة الأولى باستخدام git add . وgit commit -m "message".

الخطوة 3: تشغيل مشروع React محلياً

بعد فتح المشروع في محرر الشيفرة، انتقل إلى الطرفية داخل المجلد الرئيسي للمشروع، ثم شغّل الأمر التالي:

npm start

سيُشغّل ذلك خادم التطوير، وعادة يُفتح التطبيق تلقائياً في المتصفح على العنوان localhost:3000. في هذه المرحلة سترى الصفحة الافتراضية التي ينشئها Create React App.

المحتوى الظاهر في الصفحة يأتي من الملف src/App.js. ويمكنك تعديل هذا الملف مباشرة لتخصيص واجهة التطبيق.

الشيفرة الافتراضية تكون على النحو التالي:

// src/App.js
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

يمكنك تبسيطها واستبدال النص الافتراضي بعنوان تطبيقك، مثل المثال التالي:

// src/App.js
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>React Posts Sharer</h1>
      </header>
    </div>
  );
}

export default App;

بعد الحفظ باستخدام Ctrl + S أو Command + S ستلاحظ التحديث الفوري دون الحاجة إلى إعادة تحميل الصفحة يدوياً، وهي من أفضل مزايا بيئة التطوير.

الخطوة 4: تشغيل الاختبارات باستخدام React Testing Library

يوفر Create React App بيئة اختبار جاهزة تعتمد على React Testing Library من خلال الحزمة @testing-library/react. يوجد افتراضياً ملف اختبار داخل src/App.test.js.

لتشغيل الاختبارات استخدم:

npm run test

بما أنك عدّلت محتوى الواجهة من رابط Learn React إلى عنوان جديد، فإن الاختبار الافتراضي سيفشل. لذلك عليك تحديث ملف الاختبار ليعكس النص الجديد.

// src/App.test.js
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders app title element", () => {
  render(<App />);
  const titleElement = screen.getByText(/React Posts Sharer/i);
  expect(titleElement).toBeInTheDocument();
});

عند تشغيل الاختبار مجدداً، ينبغي أن تحصل على نتيجة نجاح مشابهة لما يلي:

PASS src/App.test.js
✓ renders app title element (54 ms)

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.776 s, estimated 3 s
Ran all test suites related to changed files.

الميزة هنا أن الاختبارات تعيد التشغيل تلقائياً عند حفظ أي تعديل، ما يجعل دورة التطوير أسرع وأكثر موثوقية.

الخطوة 5: تعديل البيانات الوصفية وتحسين معلومات الصفحة

يرتبط تطبيق React بعنصر يحمل المعرّف root داخل الملف public/index.html، بينما يتولى الملف src/index.js ربط المكوّن الرئيسي بهذه الصفحة.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

أما الصفحة الأساسية فتكون داخل public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

من الجيد تعديل عنوان الصفحة ووصفها بما يتناسب مع التطبيق، لأن هذه البيانات مهمة لتجربة المستخدم وللظهور في محركات البحث.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="App for sharing peoples' posts from around the web" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React Posts Sharer</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

الخطوة 6: التعامل مع الصور والملفات الثابتة داخل المشروع

يمكنك داخل Create React App استيراد الصور والملفات مباشرة من مجلد src، كما لو كانت متغيرات داخلية.

// src/App.js
import "./App.css";
import logo from "./logo.svg";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>React Posts Sharer</h1>
      </header>
    </div>
  );
}

export default App;

وإذا نقلت الصورة إلى مجلد public، فلن تحتاج إلى import، بل يمكنك الوصول إليها مباشرة عبر المسار:

// src/App.js
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src="/logo.svg" className="App-logo" alt="logo" />
        <h1>React Posts Sharer</h1>
      </header>
    </div>
  );
}

export default App;

كما يمكن استخدام ملفات SVG كمكوّنات React مباشرة، وهي طريقة مرنة جداً خصوصاً عند الحاجة إلى تطبيق أنماط أو خصائص ديناميكية.

// src/App.js
import { ReactComponent as Logo } from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Logo style={{ height: 200 }} />
        <h1>React Posts Sharer</h1>
      </header>
    </div>
  );
}

export default App;

في هذا المثال، تم استيراد الملف كـ ReactComponent ثم إعادة تسميته إلى Logo باستخدام الكلمة as، وبعد ذلك استُخدم كمكوّن عادي داخل الواجهة.

الخطوة 7: تثبيت الاعتماديات الخارجية مثل axios

لجلب بيانات من واجهة برمجية خارجية API، يمكن استخدام الحزمة axios. لتثبيتها شغّل:

npm install axios

أو بالصيغة المختصرة:

npm i axios

بعد التثبيت ستجد الحزمة مضافة داخل package.json ضمن القسم dependencies:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.2",
    "web-vitals": "^1.0.1"
  }
}

وإذا رغبت لاحقاً بإضافة TypeScript إلى مشروع موجود، فيمكنك تثبيت الحزم اللازمة كالتالي:

npm install typescript @types/node @types/react @types/react-dom @types/jest

ثم أعد تشغيل خادم التطوير، وابدأ بتحويل الملفات من الامتداد .js إلى .tsx وفق الحاجة.

الخطوة 8: إنشاء مكوّنات منفصلة واستيرادها داخل التطبيق

بدلاً من وضع كل الشيفرة داخل المكوّن App، من الأفضل تقسيم الواجهة إلى مكوّنات مستقلة. لننشئ مكوّناً باسم Posts داخل المسار src/components/Posts.js ليجلب المقالات ويعرضها.

// src/components/Posts.js
import React from "react";
import axios from "axios";

function Posts() {
  const [posts, setPosts] = React.useState([]);

  React.useEffect(() => {
    axios
      .get("http://jsonplaceholder.typicode.com/posts")
      .then((response) => setPosts(response.data));
  }, []);

  return (
    <ul className="posts">
      {posts.map((post) => (
        <li className="post" key={post.id}>
          <h4>{post.title}</h4>
          <p>{post.body}</p>
        </li>
      ))}
    </ul>
  );
}

export default Posts;

بعدها استورد هذا المكوّن داخل App.js:

// src/App.js
import Posts from "./components/Posts";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src="/logo.svg" className="App-logo" alt="logo" />
        <h1>React Posts Sharer</h1>
      </header>
      <Posts />
    </div>
  );
}

export default App;

بهذا ستظهر المقالات المسحوبة من خدمة JSON Placeholder أسفل ترويسة التطبيق.

الخطوة 9: تنسيق التطبيق باستخدام CSS

يدعم Create React App ملفات CSS بشكل مباشر دون إعدادات إضافية. ويمكنك استيراد ملف App.css داخل أي مكوّن، مع الانتباه إلى أن الأنماط ستكون عامة ما لم تستخدم حلولاً مثل CSS Modules.

إليك مثالاً لتحسين مظهر التطبيق داخل src/App.css:

/* src/App.css */
.App {
  text-align: center;
  margin: 0 auto;
  max-width: 1000px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

li {
  list-style-type: none;
}

.post {
  margin-bottom: 4em;
}

.post h4 {
  font-size: 2rem;
}

كما يمكنك إضافة تنسيقات عامة داخل src/index.css:

/* src/index.css */
body {
  background-color: #282c34;
  color: white;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

بعد هذه التعديلات سيبدو التطبيق أكثر ترتيباً ووضوحاً للمستخدم.

الخطوة 10: بناء التطبيق للنشر وتشغيل النسخة النهائية

عندما تنتهي من التطوير وتصبح جاهزاً للنشر، استخدم الأمر التالي لإنشاء نسخة إنتاجية محسّنة:

npm run build

سينشئ هذا الأمر مجلد build الذي يحتوي على الملفات المضغوطة والمحسّنة للأداء. وغالباً سترى ناتجاً مشابهاً لما يلي:

Compiled successfully.

File sizes after gzip:

46.62 KB  build/static/js/2.1500c654.chunk.js
1.59 KB   build/static/js/3.8022f77f.chunk.js
1.17 KB   build/static/js/runtime-main.86c7b7c2.js
649 B     build/static/js/main.ef6580eb.chunk.js
430 B     build/static/css/main.5ae9c609.chunk.css

هذه النتائج ناتجة عن أداة Webpack التي تتولى تجميع الملفات وضغطها وتقسيمها إلى أجزاء chunks. ويُستخدم أيضاً ما يُعرف بالهاش hash داخل أسماء الملفات لمنع مشاكل التخزين المؤقت cache وضمان وصول المستخدمين إلى أحدث نسخة من التطبيق.

قبل رفع المشروع إلى خدمة استضافة، يمكنك اختبار النسخة النهائية محلياً باستخدام الحزمة serve عبر npx:

npx serve

غالباً سيعمل التطبيق هنا على منفذ مختلف مثل localhost:5000. وهذه خطوة مهمة لاكتشاف أي مشاكل قد لا تظهر أثناء وضع التطوير.

بعد ذلك يمكنك نشر التطبيق على منصات مثل Netlify أو GitHub Pages أو Heroku بحسب احتياجاتك.

نصائح عملية لنجاح مشروعك باستخدام Create React App

• ابدأ بهيكل مكوّنات واضح منذ اليوم الأول لتسهيل التوسع لاحقاً.
• عدّل بيانات meta مبكراً لتحسين قابلية الفهرسة والتعريف بالمشروع.
• احرص على اختبار المكوّنات الأساسية كلما أضفت وظائف جديدة.
• راجع حجم ملفات JavaScript بعد البناء لتجنب تراجع الأداء.
• استخدم واجهات برمجية تجريبية مثل JSON Placeholder لتسريع التطوير الأولي.

الخلاصة التقنية

يظل Create React App خياراً عملياً ومناسباً لتعلم React وبناء تطبيقات جاهزة بسرعة، خصوصاً إذا كنت تريد بيئة تطوير مستقرة دون الدخول في تعقيدات الإعداد اليدوي. ورغم أن بعض المشاريع المتقدمة قد تنتقل لاحقاً إلى أدوات أحدث أو أكثر مرونة، فإن فهم آلية العمل داخل Create React App يمنحك أساساً تقنياً قوياً في إدارة المكوّنات، والاعتماديات، والاختبارات، وعمليات البناء والنشر.