دليل المبتدئين إلى React: بناء واجهة المستخدم الأولى الخاصة بك من الصفر

React هي مكتبة JavaScript لبناء واجهات المستخدم. تم تطويرها وصيانتها بواسطة Facebook، وأصبحت واحدة من الأدوات الأكثر شعبية في تطوير الواجهة الأمامية. سيرشدك هذا الدليل خطوة بخطوة من الصفر لفهم المفاهيم الأساسية لـ React وبناء واجهة مستخدم بسيطة.

لماذا تختار React؟

تتمتع React بالمزايا التالية:

النمطية (Componentization): تقسم React واجهة المستخدم إلى مكونات مستقلة وقابلة لإعادة الاستخدام. هذا يجعل الكود أسهل في الصيانة والفهم.
التصريحية (Declarative): تستخدم React أسلوب البرمجة التصريحية، مما يعني أنك تحتاج فقط إلى وصف المحتوى الذي تريد عرضه، وستتعامل React تلقائيًا مع التحديثات والعرض.
الكفاءة: تستخدم React DOM افتراضيًا وخوارزمية diff ذكية، والتي يمكنها تحديث واجهة المستخدم بكفاءة وتقليل العرض غير الضروري.
دعم مجتمعي ضخم: تتمتع React بمجتمع ضخم ونظام بيئي غني، ويمكنك العثور على الكثير من البرامج التعليمية والمكتبات والأدوات لمساعدتك في التطوير.
القدرة عبر الأنظمة الأساسية: يتيح لك React Native استخدام React لتطوير تطبيقات الهاتف المحمول الأصلية (iOS و Android).

عمل تحضيري

قبل البدء، تحتاج إلى التأكد من تثبيت الأدوات التالية على جهاز الكمبيوتر الخاص بك:

Node.js: Node.js هي بيئة تشغيل JavaScript لتشغيل أدوات تطوير React. يمكنك تنزيله وتثبيته من https://nodejs.org/.
npm أو yarn: npm (Node Package Manager) و yarn هما مديران لحزم JavaScript لتثبيت وإدارة تبعيات React. عادةً ما يتم تثبيت npm عند تثبيت Node.js. يمكن تثبيت yarn من https://yarnpkg.com/.

إنشاء تطبيق React الأول الخاص بك

سنستخدم create-react-app لإنشاء مشروع React بسرعة.

الإنشاء باستخدام npm:

npx create-react-app my-first-react-app
cd my-first-react-app
npm start

الإنشاء باستخدام yarn:

yarn create react-app my-first-react-app
cd my-first-react-app
yarn start

بعد تنفيذ الأوامر أعلاه، سيقوم create-react-app تلقائيًا بإنشاء دليل باسم my-first-react-app وتهيئة مشروع React في هذا الدليل. سيقوم الأمر npm start أو yarn start بتشغيل خادم التطوير، ويمكنك زيارة http://localhost:3000 في المتصفح لعرض تطبيق React الخاص بك.

هيكل الدليل

هيكل دليل المشروع الذي تم إنشاؤه بواسطة create-react-app هو كما يلي:

my-first-react-app/
├── node_modules/         # المكتبات التي يعتمد عليها المشروع
├── public/               # الموارد الثابتة (مثل ملفات HTML)
│   ├── index.html        # ملف HTML المدخل للتطبيق
│   └── ...
├── src/                  # كود مصدر React
│   ├── App.css           # أنماط CSS لمكون App
│   ├── App.js            # مكون App
│   ├── App.test.js       # ملف اختبار مكون App
│   ├── index.css         # أنماط CSS عامة
│   ├── index.js            # ملف JavaScript المدخل للتطبيق
│   ├── logo.svg          # شعار React
│   └── ...
├── .gitignore            # ملف Git للتجاهل
├── package.json          # البيانات الوصفية للمشروع والاعتمادات
├── README.md             # وثائق شرح المشروع
└── yarn.lock             # ملف تأمين إصدارات الاعتماديات (إذا تم استخدام yarn)

فهم مكونات React

يتكون تطبيق React من مكونات. المكونات هي كتل تعليمات برمجية مستقلة وقابلة لإعادة الاستخدام تُستخدم لعرض أجزاء معينة من واجهة المستخدم.

في الملف src/App.js، يمكنك رؤية مكون App الافتراضي:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

شرح الكود:

import React from 'react'; استيراد مكتبة React.
function App() { ... } تعريف مكون دالة باسم App.
return ( ... ) إرجاع تعبير JSX يصف المحتوى الذي يجب أن يعرضه المكون.
export default App; تصدير مكون App لاستخدامه في ملفات أخرى.

JSX (JavaScript XML)

JSX هو امتداد لصياغة JavaScript يسمح لك بكتابة كود يشبه HTML في كود JavaScript. في المثال أعلاه، ... هو تعبير JSX. سيتم تحويل كود JSX إلى كود JavaScript قياسي بواسطة Babel حتى يتمكن المتصفح من فهمه.

تعديل مكون App

لنعدل مكون App لإنشاء عداد بسيط.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# 计数器

      当前计数: {count}

      +
      -
    
  );
}

export default App;

修改说明：

import React, { useState } from 'react'; 导入 useState Hook。useState 是一个 React Hook，用于在函数组件中添加状态。
const [count, setCount] = useState(0); 使用 useState Hook 创建一个名为 count 的状态变量，并初始化为 0。setCount 是一个用于更新 count 状态的函数。
const increment = () => { setCount(count + 1); }; 定义一个名为 increment 的函数，用于将 count 状态加 1。
const decrement = () => { setCount(count - 1); }; 定义一个名为 decrement 的函数，用于将 count 状态减 1。
`当前计数: {count}

在页面中显示count状态的值。 {count}` 是一个 JSX 表达式，用于在 JSX 代码中插入 JavaScript 变量。

+ 和 - 创建两个按钮，分别绑定 increment 和 decrement 函数。 onClick 是一个事件处理器，用于在按钮被点击时执行指定的函数。

保存 src/App.js 文件后，浏览器会自动刷新，你将看到一个简单的计数器。点击 "+" 按钮会增加计数，点击 "-" 按钮会减少计数。

使用 CSS 样式

你可以使用 CSS 来美化你的 React 应用。 create-react-app 支持 CSS Modules 和普通的 CSS 文件。

使用 CSS Modules:

CSS Modules 允许你为每个组件创建独立的 CSS 样式，避免样式冲突。要在组件中使用 CSS Modules，你需要创建一个以 .module.css 结尾的文件。

例如，创建一个名为 App.module.css 的文件，并在其中添加以下 CSS 样式：

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

然后在 src/App.js 文件中导入 CSS Modules：

import React, { useState } from 'react';
import styles from './App.module.css'; // 导入 CSS Modules

function App() {
  const [count, setCount] = useState(0); const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* استخدام كائن styles للإشارة إلى فئات CSS */}
      

# عداد

      العداد الحالي: {count}

      +
      -
    
  );
}

export default App;

استخدام ملف CSS عادي:

يمكنك أيضًا استخدام ملف CSS عادي لتعريف الأنماط العامة. في ملف src/index.css، يمكنك تعريف الأنماط العامة.

على سبيل المثال، أضف نمط CSS التالي: