logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

On this page

  • Overview
  • جرب React
  • جرب React محلياً
  • ابدأ مشروع React جديد
  • إضافة React إلى مشروع موجود
  • الخطوات التالية

    GET STARTED

  • Quick Start
    • Tutorial: Tic-Tac-Toe
    • Thinking in React
  • Installation
    • Creating a React App
    • Build a React App from Scratch
    • Add React to an Existing Project
  • Setup
    • Editor Setup
    • Using TypeScript
    • React Developer Tools
  • React Compiler
    • Introduction
    • Installation
    • Incremental Adoption
    • Debugging and Troubleshooting

  • LEARN REACT

  • Describing the UI
    • Your First Component
    • Importing and Exporting Components
    • Writing Markup with JSX
    • JavaScript in JSX with Curly Braces
    • Passing Props to a Component
    • Conditional Rendering
    • Rendering Lists
    • Keeping Components Pure
    • Your UI as a Tree
  • Adding Interactivity
    • Responding to Events
    • State: A Component's Memory
    • Render and Commit
    • State as a Snapshot
    • Queueing a Series of State Updates
    • Updating Objects in State
    • Updating Arrays in State
  • Managing State
    • Reacting to Input with State
    • Choosing the State Structure
    • Sharing State Between Components
    • Preserving and Resetting State
    • Extracting State Logic into a Reducer
    • Passing Data Deeply with Context
    • Scaling Up with Reducer and Context
  • Escape Hatches
    • Referencing Values with Refs
    • Manipulating the DOM with Refs
    • Synchronizing with Effects
    • You Might Not Need an Effect
    • Lifecycle of Reactive Effects
    • Separating Events from Effects
    • Removing Effect Dependencies
    • Reusing Logic with Custom Hooks
Learn React

التثبيت

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

In this chapter

  • كيفية بدء مشروع React جديد
  • كيفية إضافة React إلى مشروع موجود
  • كيفية إعداد محرر النصوص الخاص بك
  • كيفية تثبيت أدوات مطور React

جرب React

لا يلزم تثبيت أي شيء لتجربة React. جرب تعديل هذا الـsandbox!

function Greeting({ name }) { return <h1>Hello, {name}</h1>; } export default function App() { return <Greeting name="world" /> }

يمكنك تعديله مباشرةً أو فتحه في علامة تبويب جديدة عن طريق الضغط على زر “Fork” (تفريع) في الزاوية العلوية اليمنى.

تحتوي معظم الصفحات في توثيق React على sandboxes مثل هذا. وفيما عدا توثيق React، هناك العديد من الـsandboxes المتاحة عبر الإنترنت التي تدعم React: على سبيل المثال، CodeSandbox، StackBlitz، أو CodePen.

جرب React محلياً

لتجربة React محلياً على جهازك، حمّل صفحة ال HTML هذه. افتحها في محرر النصوص الخاص بك وفي متصفحك!

ابدأ مشروع React جديد

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

إضافة React إلى مشروع موجود

إذا كنت تريد تجربة استخدام React في تطبيق أو موقع ويب موجود، إضافة React إلى مشروع موجود.

الخطوات التالية

انتقل إلى دليل البدء السريع لجولة في أهم مفاهيم React التي ستواجهها يومياً.

PreviousThinking in React
NextCreating a React App
Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
Learn React
Quick Start
Installation
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
API Reference
React APIs
React DOM APIs
Community
Code of Conduct
Meet the Team
Docs Contributors
Acknowledgements
More
Blog
React Native
Privacy
Terms
Fork
function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />
}