{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"codeExamples":{"edges":[{"node":{"id":"a-component-using-external-plugins","code":"class MarkdownEditor extends React.Component {\n  constructor(props) {\n    super(props);\n    this.md = new Remarkable();\n    this.handleChange = this.handleChange.bind(this);\n    this.state = { value: 'Hello, **world**!' };\n  }\n\n  handleChange(e) {\n    this.setState({ value: e.target.value });\n  }\n\n  getRawMarkup() {\n    return { __html: this.md.render(this.state.value) };\n  }\n\n  render() {\n    return (\n      <div className=\"MarkdownEditor\">\n        <h3>Input</h3>\n        <label htmlFor=\"markdown-content\">\n          Enter some markdown\n        </label>\n        <textarea\n          id=\"markdown-content\"\n          onChange={this.handleChange}\n          defaultValue={this.state.value}\n        />\n        <h3>Output</h3>\n        <div\n          className=\"content\"\n          dangerouslySetInnerHTML={this.getRawMarkup()}\n        />\n      </div>\n    );\n  }\n}\n\nroot.render(<MarkdownEditor />);\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md"}},{"node":{"id":"a-simple-component","code":"class HelloMessage extends React.Component {\n  render() {\n    return\n      <div dir=\"rtl\">مرحبا {this.props.name}</div>;\n  }\n}\n\nroot.render(<HelloMessage name=\"أحمد\" />);\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md"}},{"node":{"id":"a-stateful-component","code":"class Timer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { seconds: 0 };\n  }\n\n  tick() {\n    this.setState(state => ({\n      seconds: state.seconds + 1\n    }));\n  }\n\n  componentDidMount() {\n    this.interval = setInterval(() => this.tick(), 1000);\n  }\n\n  componentWillUnmount() {\n    clearInterval(this.interval);\n  }\n\n  render() {\n    return (\n      <div>\n        Seconds: {this.state.seconds}\n      </div>\n    );\n  }\n}\n\nroot.render(<Timer />);\n","mdAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md"}},{"node":{"id":"an-application","code":"class TodoApp extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { items: [], text: '' };\n    this.handleChange = this.handleChange.bind(this);\n    this.handleSubmit = this.handleSubmit.bind(this);\n  }\n\n  render() {\n    return (\n      <div>\n        <h3>TODO</h3>\n        <TodoList items={this.state.items} />\n        <form onSubmit={this.handleSubmit}>\n          <label htmlFor=\"new-todo\">\n            What needs to be done?\n          </label>\n          <input\n            id=\"new-todo\"\n            onChange={this.handleChange}\n            value={this.state.text}\n          />\n          <button>\n            Add #{this.state.items.length + 1}\n          </button>\n        </form>\n      </div>\n    );\n  }\n\n  handleChange(e) {\n    this.setState({ text: e.target.value });\n  }\n\n  handleSubmit(e) {\n    e.preventDefault();\n    if (this.state.text.length === 0) {\n      return;\n    }\n    const newItem = {\n      text: this.state.text,\n      id: Date.now()\n    };\n    this.setState(state => ({\n      items: state.items.concat(newItem),\n      text: ''\n    }));\n  }\n}\n\nclass TodoList extends React.Component {\n  render() {\n    return (\n      <ul>\n        {this.props.items.map(item => (\n          <li key={item.id}>{item.text}</li>\n        ))}\n      </ul>\n    );\n  }\n}\n\nroot.render(<TodoApp />);\n","mdAbsolutePath":"/vercel/path0/content/home/examples/an-application.md"}}]},"examples":{"edges":[{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-simple-component.md","fields":{"slug":"/home/examples/a-simple-component.html"},"frontmatter":{"title":"مكّون بسيط","domid":"hello-example"},"html":"<p>كل مكوّن React مزوّد بالدّالة <code class=\"gatsby-code-text\">Render()</code> التي تأخذ البيانات المدخلة و تُرجع ما يجب اظهاره.\nهذا المثال يستخدم تعابير تشبه XML أي (XML-Like) و التي تسمى JSX.\nالبيانات المرسلة خلال المكّون يمكن الوصول اليها ضمن الدالة <code class=\"gatsby-code-text\">Render()</code> بواسطة <code class=\"gatsby-code-text\">this.props</code>.</p>\n<p><strong>استخدام JSX اختياري، وليس مطلوباً او شرطاً لاستخدام React.</strong> جرّب <a href=\"https://babeljs.io/repl/#?presets=react&code_lz=MYewdgzgLgBApgGzgWzmWBeGAeAFgRgD4AJRBEAGhgHcQAnBAEwEJsB6AwgbgChRJY_KAEMAlmDh0YWRiGABXVOgB0AczhQAokiVQAQgE8AkowAUAcjogQUcwEpeAJTjDgUACIB5ALLK6aRklTRBQ0KCohMQk6Bx4gA\" target=\"_blank\" rel=\"noreferrer\">Babel REPL</a>\nلترى شيفرة الـ JavaScript الخام الموّلدة من خلال خطوة التحويل البرمجي لـ JSX.</p>"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-stateful-component.md","fields":{"slug":"/home/examples/a-stateful-component.html"},"frontmatter":{"title":"مكوّن الحالة  (Stateful)","domid":"timer-example"},"html":"<p>بالإضافة الى أخذ بيانات الإدخال (التي يمكن الوصول إليها من خلال <code class=\"gatsby-code-text\">this.props</code>)، يستطيع المكوّن أن يحتفظ بحالة بياناته الداخلية (التي يمكن الوصول إليها من خلال <code class=\"gatsby-code-text\">this.state</code>) . عندما تتغير حالة بيانات المكوّن، العلامات المرسومة أو المُظهرة سيتم تحديثها و إعادة رسمها من خلال إعادة تنفيذ الدّالة  <code class=\"gatsby-code-text\">render()</code>.</p>"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/an-application.md","fields":{"slug":"/home/examples/an-application.html"},"frontmatter":{"title":"تطبيق","domid":"todos-example"},"html":"<p>باستخدام <code class=\"gatsby-code-text\">props</code> و <code class=\"gatsby-code-text\">state</code>، نستطيع ان ننشأ برنامج صغير يعرض قائمة المهام التي يجب القيام بها (Todo list). هذا المثال يستخدم <code class=\"gatsby-code-text\">state</code> لمتابعة العناصر الموجودة في القائمة الحالية بالإضافة الى متابعة النص المُدخل من قبل المستخدم.\nعلى الرغم من أن معالجات الأحداث تبدو وكأنها مُضمّنة، إلا أنه سيتم جمعها وتنفيذها باستخدام تفويض الحدث.</p>"}},{"node":{"fileAbsolutePath":"/vercel/path0/content/home/examples/a-component-using-external-plugins.md","fields":{"slug":"/home/examples/a-component-using-external-plugins.html"},"frontmatter":{"title":"مكوّن يستخدم مكتبة خارجية","domid":"markdown-example"},"html":"<p>يسمح React باستخدام مكتبات (Libraries) خارجية بالإضافة الى أُطر عمل (Frameworks).\nهذا المثال يستخدم المكتبة <strong>remarkable</strong> كمكتبة خارجية لمعالجة تعابير من نوع Markdown، لتحويل قيمة <code class=\"gatsby-code-text\">&lt;textarea></code>  بشكل آني.</p>"}}]},"marketing":{"edges":[{"node":{"frontmatter":{"title":"تصريحي"},"html":"<p>React يجعل إنشاء واجهات المستخدم التفاعلية سهلا للغاية، ﻻ يجب عليك سوى أن تصمم واجهة بسيطة لكل حالة من حالات التطبيق و بعدها React يتكفل وبفاعلية بتحديث و إعادة رسم المكّون المعني بالتحديث فقط عند تغيُّر البيانات.</p>\n<p>الواجهات المُعرّفة (التصريحية)، تجعل الشيفرة الخاصة بالبرنامج سهلة التوقع عند تنفيذها و سهلة التصحيح في حالة وجود أخطاء.</p>"}},{"node":{"frontmatter":{"title":"يستند على المكوّن"},"html":"<p>يعتمد React بشكل أساسي على مفهوم المكوّنات (Components). حيث يجب عليك بناء مكوّنات مُغلَّفة تُدير حالتها الخاصّة، ومن ثمّ تُركِّب هذه المكوّنات مع بعضها لإنشاء واجهات مستخدم مُعقّدة.</p>\n<p> بما أنّ منطق المكوّنات مكتوب باستخدام JavaScript بدلًا من صيغة القوالب، فبإمكانك تمرير الكثير من البيانات عبر تطبيقك بسهولة وإبقاء الحالة بعيدة عن DOM. </p>"}},{"node":{"frontmatter":{"title":"تعلّم مرّة، واكتب في أي مكان"},"html":"<p>نحن لا نضع أي فرضيات مسبقة عن التكنولوجيا الأخرى التي تستخدمها، فلهذا يمكنك تطوير ميزات و إضافات باستخدام React  دون الحاجة الى إعادة كتابة أي شيفرة مكتوبة سابقاً.</p>\n<p>يُمكِن تصيير React من جهة الخادم باستخدام Node.js، ويمكن إنشاء تطبيقات الهواتف الذكية عبر\n<a href=\"https://reactnative.dev/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">React Native</a>.</p>"}}]}},"pageContext":{}},"staticQueryHashes":[]}