docs/getting-started/installing-react

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

docs/getting-started/installing-react

مقدمة

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

مفاهيم رئيسية

1. React

هي مكتبة لتطوير واجهات المستخدم الأمامية (UI) تعتمد على مبدأ التفاعل المكوني (Component-Based Architecture). تتيح لك React إنشاء واجهات مستخدم ديناميكية بسهولة من خلال استخدام مكونات متعددة يمكن تكرار استخدامها.

2. npm (Node Package Manager)

هو نظام إدارة الحزم لـ Node.js، يتيح لك تثبيت وتحديث وتنزيل الحزم البرمجية بسهولة. يتم استخدامه لتنزيل المكتبات اللازمة لتشغيل React.

3. Create React App

هو أداة تساعدك في إنشاء تطبيقات React بسرعة، حيث يقوم بإنشاء بنية تحتية مسبقة التحضير وتثبيت المكتبات اللازمة.

خطوات تطوير Timeline

  1. تنزيل وتثبيت Node.js: يمكنك تنزيل Node.js من الموقع الرسمي here. بعد التثبيت، يمكنك التحقق من إصدار Node.js باستخدام الأمر node -v.

  2. تثبيت npm: يتم تثبيت npm مع Node.js. يمكنك التحقق من إصدار npm باستخدام الأمر npm -v.

  3. إنشاء تطبيق جديد باستخدام Create React App: يمكنك إنشاء تطبيق جديد باستخدام الأمر npx create-react-app my-app، حيث سيتم إنشاء مجلد جديد يحتوي على بنية تحتية مسبقة التحضير لتطبيق React.

  4. دخول مجلد التطبيق: انتقل إلى مجلد التطبيق باستخدام الأمر cd my-app.

  5. تشغيل التطبيق: يمكنك تشغيل التطبيق باستخدام الأمر npm start. هذا الأمر سيفتح تطبيقك في متصفح الويب الخاص بك.

مواضيع مرتبطة

1. React Router

يُستخدم لإنشاء روابط بين صفحات مختلفة داخل تطبيق React.

2. Redux

يُستخدم لتحكم أفضل في حالة التطبيق (state management).

3. TypeScript

يُستخدم لتوسيع لغة JavaScript بقدرات نوعية (type safety).

مراجع

React Logo

ما هي الخطوات التالية بعد إنشاء تطبيق React؟ هل ستقوم بتطوير مكونات جديدة أم تحسين بنية تحتية الحالية؟