diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 57b5e39f4..e0a976a74 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "الدليل التطبيقي: مدخل إلى React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,97 +12,95 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +لا يفترض هذا الدليل أي معرفة مسبقة بمكتبة React. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## قبل أن نبدأ بالدليل التطبيقي {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React. +سنبني لعبة صغيرة خلال هذا الدليل التطبيقي. **ربّما قد ترغب بتخطي هذا الدليل لأنّك لا تريد بناء الألعاب، ولكن أعطيها فرصة.** إنّ التقنيات التي ستتعلمها في هذا الدليل أساسيّة لبناء أي تطبيق React، وسيعطيك إتقانها فهمًا أعمق لمكتبة React. ->Tip +>نصيحة > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +>هذا الدليل مُصمَّم للأشخاص الذين يُفضّلون **التعلّم بالممارسة**. إن كنت تُفضّل تعلّم المفاهيم من البداية راجع [مستندات React من البداية خطوة بخطوة](/docs/hello-world.html). قد تجد هذا الدليل متكاملًا مع مستندات React. -The tutorial is divided into several sections: +هذا الدليل مقسّم إلى عدّة أقسام: -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* يُعطيك قسم [الإعداد من أجل الدليل التطبيقي](#setup-for-the-tutorial) **نقطة بداية** لمتابعة الدليل. +* يُعلّمك قسم [لمحة عامّة](#overview) **أساسيات** React: المكوّنات، والخاصيّات، والحالة. +* يُعلِّمك قسم [إكمال اللعبة](#completing-the-game) **أكثر التقنيات إستعمالا** في تطوير React. +* يُعطيك قسم [إضافة السفر عبر الزمن](#adding-time-travel) **نظرة أعمق** إلى نقاط القوة الفريدة لمكتبة React. -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +لا يجب عليك إكمال جميع الأقسام دفعة واحدة للحصول على الفائدة المرجوة من هذا الدليل. حاول الذهاب أبعد ما يمكن حتى ولو كان قسمًا أو قسمين. -### What Are We Building? {#what-are-we-building} +لا بأس من نسخ ولصق الشيفرة عند متابعتك مع هذا الدليل، ولكن نوصي أن تكتبها بيدك. سيُساعدك ذلك بتطوير ذاكرتك وبإعطائك فهمًا أعمق لمكتبة React. -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +###ماذا سنبني؟ {#what-are-we-building} -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +سنرى في هذا الدليل كيفيّة بناء لعبة إكس-أو (اسمها بالإنجليزيّة tic-tac-toe) باستخدام React. -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +بإمكانك أن ترى **[النتيجة النهائيّة لما سنبنيه من هنا](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. إن كانت الشيفرة غير مفهومة بالنسبة لك أو كنتَ غير متآلف مع صياغة الشيفرة، فلا تقلق! فالهدف من هذا الدليل هو مساعدتك على فهم React وصياغتها. -You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +نوصي بأن تلقي نظرة على لعبة إكس-أو قبل المتابعة. إحدى الميزات التي ستلاحظها وجود قائمة مُرقّمة على يمين لوحة اللعبة. تُعطيك هذه القائمة سجلًّا عن كل التحركات التي حصلت في اللعبة، وتُحدَّث بينما تستمر اللعبة. -### Prerequisites {#prerequisites} +تستطيع إغلاق لعبة إكس-أو بعدما تتآلف معها. سننطلق من قالب بسيط في هذا الدليل. خطوتنا التالية هي إتمام الإعداد لكي تستطيع البدء ببناء اللعبة. -We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. +### المتطلّبات الأساسيّة {#prerequisites} -If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. +سنفترض أنّك متآلف مع HTML و JavaScript، ولكن يجب أن تكون قادرًا على المتابعة حتى ولو كنت قادمًا من لغة برمجة أخرى. سنفترض أنّك متآلف مع المفاهيم البرمجيّة مثل الدوال، والكائنات، والمصفوفات، وبدرجة أقل الأصناف. -## Setup for the Tutorial {#setup-for-the-tutorial} +إن احتجت لمراجعة JavaScript نوصيك بالرجوع إلى [مستندات JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) في موسوعة حسوب. لاحظ أنّنا نستخدم بعض الميزات من ES6، وهي إصدار جديد من JavaScript. سنستخدم في هذا الدليل [الدوال السهمية](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)، [الأصناف](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)، والتصريحين [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) و [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const). بإمكانك استخدام [Babel REPL](babel://es5-syntax-example) لتتحقّق إلى ماذا تُصرَّف شيفرة ES6. -There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. +## الإعداد من أجل الدليل {#setup-for-the-tutorial} -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +هناك طريقتان لإكمال هذا الدليل، بإمكانك إمّا كتابة الشيفرة في متصفحك، أو إعداد بيئة تطوير محلية على حاسوبك. -This is the quickest way to get started! +### الخيار الأول للإعداد: كتابة الشيفرة في المتصفح {#setup-option-1-write-code-in-the-browser} -First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial. +هذه أسرع طريقة للبدء. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +في البداية افتح **[هذه الشيفرة المبدئيّة](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** في نافذة جديدة. يجب أن تعرض النافذة الجديدة لوحة لعبة إكس-أو وشيفرة React. سنُعدِّل شيفرة React في هذا الدليل. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +بإمكانك الآن تجاوز الخيار الثاني للإعداد والذهاب إلى قسم [لمحة عامّة](#overview) للحصول على لمحة عامّة عن React. -This is completely optional and not required for this tutorial! +### الخيار الثاني للإعداد: بيئة التطوير المحليّة {#setup-option-2-local-development-environment} + +هذا الخيار اختياري وغير مطلوب من أجل هذا الدليل.
-Optional: Instructions for following along locally using your preferred text editor +اختياري: تعليمات للمتابعة بشكل محلي باستخدام مُحرِّر النصوص المفضّل لديك -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +يتطلّب هذا الإعداد المزيد من العمل ولكنّه يسمح لك بمتابعة هذا الدليل باستخدام مُحرِّر نصوص من اختيارك. هذه هي الخطوات التي يجب عليك اتباعها: -1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. -2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project. +1. تأكّد من امتلاكك لأحدث إصدار من [Node.js](https://nodejs.org/en/). +2. اتبع [تعليمات التثبيت لإنشاء تطبيق React](/docs/create-a-new-react-app.html#create-react-app) لصنع مشروع جديد ```bash npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project - -> Note: -> ->**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step. +1. احذف كافة الملفات الموجودة في المجلّد src/‎ للمشروع الجديد (لا تحذف هذا المجلّد، فقط محتوياته). ```bash cd my-app cd src -# If you're using a Mac or Linux: +# إن كنت تستخدم نظام ماك او لينكس rm -f * -# Or, if you're on Windows: +# أو، إن كنت تستخدم نظام ويندوز del * -# Then, switch back to the project folder +# ثم، عد إلى مجلد المشروع cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +1. أضف ملفًّا يُدعى `index.css` في المجلّد `src/`‎ مع [وضع شيفرة CSS هذه ضمنه](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). -5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +2. أضف ملفًّا يُدعى `index.js` في المجلّد `src/`‎ مع [ضع شيفرة JavaScript هذه ضمنه](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add these three lines to the top of `index.js` in the `src/` folder: +3. أضف هذه الأسطر الثلاثة إلى بداية الملف `index.js` في المجلّد `src/`‎: ```js import React from 'react'; @@ -110,32 +108,32 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. +إن نفّذت الآن الأمر `npm start` في مجلّد المشروع وفتحت الرابط `http://localhost:3000` في المتصفّح، فبإمكانك أن ترى حقل فارغ للعبة إكس-أو. -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +نوصي بمتابعة [هذه التعليمات](https://babeljs.io/docs/editors/) لإعداد ميّزة تعليم الصياغة (syntax highlighting) في مُحرِّر النصوص لديك.
-### Help, I'm Stuck! {#help-im-stuck} +### ساعدني، أنا عالق! {#help-im-stuck} -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +إن وجدت أيّة صعوبات، تحقّق من [مصادر مجتمع React](/community/support.html)، بالأخص [دردشة Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) هي طريقة رائعة للحصول على المساعدة بسرعة. إن لم تتلقى أي إجابة أو بقيت عالقًا عند مشكلة ما، يُرجى تقديم المشكلة وسنساعدك في حلّها. -## Overview {#overview} +## لمحة عامّة {#overview} -Now that you're set up, let's get an overview of React! +الآن بعد أن قمت بالإعداد ، دعنا نلقي نظرة عامة على React! -### What Is React? {#what-is-react} +### ما هي React؟ {#what-is-react} -React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". +React هي مكتبة JavaScript مرنة، وفعّالة، وتصريحيّة لبناء واجهات المستخدم. تُتيح لك تركيب واجهات مستخدم مُعقّدة من قطع معزولة وصغيرة من الشيفرة تُدعى المكوّنات "components". -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +تمتلك React أنواع مختلفة من المكوّنات، ولكن سنبدأ بالمكوّنات التي هي أصناف فرعية من الصنف `React.Component`: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

قائمة تسوق لأجل {this.props.name}