` tag handled when declared in a component?","questionOptions":[{"text":"It is rendered in the body as part of the visible DOM.","id":"arGyJdgZdyuGeTwrdQ3Nd","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"It is rendered in the body as part of the visible DOM.\n"},{"text":"It is ignored and must still be set with `document.title`.","id":"vyOh4GPrxh1TOed-ynyBL","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"It is ignored and must still be set with <code>document.title</code>.\n"},{"text":"It only works with class components.","id":"ysYAfMskYfnv_iWfWkVxo","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"It only works with class components.\n"},{"text":"React moves it into the `<head>` automatically.","id":"eij8wQlP2W52CyXwCUxjl","correct":true,"explanation":{"mdText":"React 19 extracts `<title>` and other metadata tags from the JSX and automatically inserts them into the document `<head>`.","mdHtml":"React 19 extracts <code><title></code> and other metadata tags from the JSX and automatically inserts them into the document <code><head></code>.\n"},"mdHtml":"React moves it into the <code><head></code> automatically.\n"}],"multipleAnswers":false,"questionTextHtml":"In React 19, how is the <code><title></code> tag handled when declared in a component?\n"},{"id":"uem9pCSK3ADvtrHElbjH5","questionText":"Which script-related behavior is correctly handled by React 19’s declarative `<script>` support?","questionOptions":[{"text":"Scripts are always placed at the bottom of the body.","id":"RsQ1tKpg5WyfZCGp2QpDP","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Scripts are always placed at the bottom of the body.\n"},{"text":"Scripts with `async` or `defer` are injected into `<head>` and cleaned up on unmount.","id":"ePdD7Qx51U5zLO2pfWagQ","correct":true,"explanation":{"mdText":"React 19 allows declarative script loading in JSX, including `async`, `defer`, and other attributes. The script is cleaned up when the component unmounts.","mdHtml":"React 19 allows declarative script loading in JSX, including <code>async</code>, <code>defer</code>, and other attributes. The script is cleaned up when the component unmounts.\n"},"mdHtml":"Scripts with <code>async</code> or <code>defer</code> are injected into <code><head></code> and cleaned up on unmount.\n"},{"text":"Scripts are run twice for hydration safety.","id":"9YmKuiQxEKdIj-tKMhcIU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Scripts are run twice for hydration safety.\n"},{"text":"Scripts cannot be removed after being inserted.","id":"jidl0MiVBvWrPsA9n-bwJ","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Scripts cannot be removed after being inserted.\n"}],"multipleAnswers":false,"questionTextHtml":"Which script-related behavior is correctly handled by React 19’s declarative <code><script></code> support?\n"},{"id":"Ns2_SVDtEMg9KGo7SuwW3","questionText":"**(True or False)** Passing a ref as a prop in React 19 still requires the use of `forwardRef`.","questionOptions":[{"text":"True","id":"SdGq2tX9zG4t62dvhT6IC","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"True\n"},{"text":"False","id":"-l8enqBKSDtfzfk0KIYo4","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed as regular props, so `forwardRef` is only needed when exposing imperative methods.","mdHtml":"React 19 allows refs to be passed as regular props, so <code>forwardRef</code> is only needed when exposing imperative methods.\n"},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) Passing a ref as a prop in React 19 still requires the use of <code>forwardRef</code>.\n"},{"id":"_dJAj8gbXdfIZVL8w5T7R","questionText":"**(True or False)** In React 19, cleanup functions returned from a ref callback can fully replace the need for `useEffect` in some cases.","questionOptions":[{"text":"True","id":"UJT-_0-v3qh0RZfopLsuU","correct":true,"explanation":{"mdText":"Ref callback cleanup can manage DOM event listeners, timers, or subscriptions without needing `useEffect`.","mdHtml":"Ref callback cleanup can manage DOM event listeners, timers, or subscriptions without needing <code>useEffect</code>.\n"},"mdHtml":"True\n"},{"text":"False","id":"Wqr2RH5btFcKgIrmYNClj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) In React 19, cleanup functions returned from a ref callback can fully replace the need for <code>useEffect</code> in some cases.\n"},{"id":"p3t3Se0POGqzRkxrFz4ZZ","questionText":"**(True or False)** In React 19, you can use a functional component directly as a context provider’s `value`.","questionOptions":[{"text":"True","id":"BgNxxWpSFzEZyvGlpJjuG","correct":true,"explanation":{"mdText":"The rendered value of the functional component is passed to all consumers of that context.","mdHtml":"The rendered value of the functional component is passed to all consumers of that context.\n"},"mdHtml":"True\n"},{"text":"False","id":"irI2qO8Fx5uOb5qspBU1-","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) In React 19, you can use a functional component directly as a context provider’s <code>value</code>.\n"},{"id":"mADP0QLQnT8_P1fUZkOFN","questionText":"**(True or False)** React 19 supports setting document metadata like `<title>` and `<meta>` by directly writing them inside JSX.","questionOptions":[{"text":"True","id":"CYh3Ibq2h7bfK24S4Y6GO","correct":true,"explanation":{"mdText":"These tags are recognized and moved to the document head automatically during rendering.","mdHtml":"These tags are recognized and moved to the document head automatically during rendering.\n"},"mdHtml":"True\n"},{"text":"False","id":"lZXytM3StJhjnt1_7osBj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) React 19 supports setting document metadata like <code><title></code> and <code><meta></code> by directly writing them inside JSX.\n"},{"id":"O7__Q6Tf4jAuQ15uqoiFB","questionText":"**(True or False)** React 19’s support for `<script>` in JSX only works for inline scripts,. not external sources.","questionOptions":[{"text":"True","id":"NdQQh9_8yFmxVXbKbINp5","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"True\n"},{"text":"False","id":"ZfqqQuKvpoyKwKuhlAmS9","correct":true,"explanation":{"mdText":"React 19 allows loading both inline and external scripts using the `<script>` tag in JSX.","mdHtml":"React 19 allows loading both inline and external scripts using the <code><script></code> tag in JSX.\n"},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) React 19’s support for <code><script></code> in JSX only works for inline scripts,. not external sources.\n"},{"id":"t7ESX-2Ac-myBSr6E9cmv","questionText":"What happens when this component is rendered?\n```jsx\nfunction App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n```","questionOptions":[{"text":"The input will not be focusable.","id":"K7Xob0sU1C1li1p70Pbip","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"The input will not be focusable.\n"},{"text":"An error will be thrown because `ref` must be called `ref`.","id":"6S3nNX715AyfzsCgY5RHU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"An error will be thrown because <code>ref</code> must be called <code>ref</code>.\n"},{"text":"The `ref` will be correctly attached to the input element.","id":"M6GDpFj6HKvdUY6ePWKCf","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed with any prop name and applied directly to elements—no `forwardRef` needed.","mdHtml":"React 19 allows refs to be passed with any prop name and applied directly to elements—no <code>forwardRef</code> needed.\n"},"mdHtml":"The <code>ref</code> will be correctly attached to the input element.\n"},{"text":"Nothing will be rendered.","id":"YOLgPKOGXTigFSg2akknB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Nothing will be rendered.\n"}],"multipleAnswers":false,"questionTextHtml":"What happens when this component is rendered?\n<pre><code class=\"language-jsx\">function App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n</code></pre>\n"},{"id":"f6P1untKYw-mvafJOCzgL","questionText":"What happens when the component unmounts?\n```jsx\nfunction App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n```","questionOptions":[{"text":"The interval will continue running.","id":"5-cLgPClWBofmX76wRRbh","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"The interval will continue running.\n"},{"text":"The interval will be cleared automatically.","id":"OYOuDEyehH9I9hO6jh7XV","correct":true,"explanation":{"mdText":"The cleanup function returned from the ref callback clears the interval when the component unmounts or the node changes.","mdHtml":"The cleanup function returned from the ref callback clears the interval when the component unmounts or the node changes.\n"},"mdHtml":"The interval will be cleared automatically.\n"},{"text":"An error will be thrown.","id":"WMsaRVBY9u5U4uexdnJMG","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"An error will be thrown.\n"},{"text":"The cleanup will only happen if `useEffect` is used.","id":"bdFVGiZcajiIXt_HZap66","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"The cleanup will only happen if <code>useEffect</code> is used.\n"}],"multipleAnswers":false,"questionTextHtml":"What happens when the component unmounts?\n<pre><code class=\"language-jsx\">function App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n</code></pre>\n"},{"id":"SIL7fkCcIMujlxnKv0eXi","questionText":"What is rendered for the following?\n```jsx\nfunction RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n```","questionOptions":[{"text":"`admin`","id":"mx1jZiyGg1MnmwacbTI8W","correct":true,"explanation":{"mdText":"`<RoleValue />` returns `'admin'`, which becomes the context value.","mdHtml":"<code><RoleValue /></code> returns <code>'admin'</code>, which becomes the context value.\n"},"mdHtml":"<code>admin</code>\n"},{"text":"`<RoleValue />`","id":"Cu6HzEx1H10ZtCwmsy2FF","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code><RoleValue /></code>\n"},{"text":"`undefined`","id":"RFqYarK5upDlHEHRMCZSB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code>undefined</code>\n"},{"text":"Nothing","id":"YxPGDyr3iXoQGQvbaMejc","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Nothing\n"}],"multipleAnswers":false,"questionTextHtml":"What is rendered for the following?\n<pre><code class=\"language-jsx\">function RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n</code></pre>\n"},{"id":"olpGkgGtN8YKeGFuiern_","questionText":"What happens when this component is rendered?\n```jsx\nfunction Page() {\n return (\n <>\n <title>My Page

10:[["$","$L123",null,{"props":{"lessonContent":{"components":[{"type":"Quiz","mode":"edit","content":{"version":"1.0","title":"","renderMode":"slide","dynamicQuestionsCount":"","questions":[{"questionText":"What best describes the advantage of using `ref` as a prop in React 19?","questionOptions":[{"text":"It removes the need for `useRef` altogether.","id":"GFw-1XQH6msbuOyG4LMb9","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

It removes the need for useRef altogether.

\n"},{"text":"It allows refs to be passed without using `forwardRef` and applied like regular props.","id":"DIA1-eHl4NIJgie5NCvf-","correct":true,"explanation":{"mdText":"React 19 allows you to pass a `ref` as a regular named prop (e.g., `inputRef`), and apply it directly to a DOM element without needing `forwardRef`, making components simpler and cleaner.","mdHtml":"

React 19 allows you to pass a ref as a regular named prop (e.g., inputRef), and apply it directly to a DOM element without needing forwardRef, making components simpler and cleaner.

\n"},"mdHtml":"

It allows refs to be passed without using forwardRef and applied like regular props.

\n"},{"text":"It forces all refs to be named `refProp`.","id":"2fZ0PPrsJnuSmR49cSolt","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

It forces all refs to be named refProp.

\n"},{"text":"It only works with class components.","id":"Y1OwCwMtCLiviTl-9ol0F","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

It only works with class components.

\n"}],"id":"0_question_0","questionTextHtml":"

What best describes the advantage of using ref as a prop in React 19?

\n"},{"id":"MaR2j0_9Ap5877FSBUAy6","questionText":"When using a cleanup function in a ref callback, when does React execute this function?","questionOptions":[{"text":"On every render","id":"rhIWZ9O2d07gj0wLIKWJ0","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

On every render

\n"},{"text":"Only on the initial mount","id":"jlrlMMo0YkWZ6k7ABqArE","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

Only on the initial mount

\n"},{"text":"When the component unmounts or the ref changes","id":"P7YdjCt7gniJpcGczkhld","correct":true,"explanation":{"mdText":"The cleanup function returned from a ref callback in React 19 runs either when the component unmounts or the ref is reassigned to a different node.","mdHtml":"

The cleanup function returned from a ref callback in React 19 runs either when the component unmounts or the ref is reassigned to a different node.

\n"},"mdHtml":"

When the component unmounts or the ref changes

\n"},{"text":"After a time-out of 1000 ms","id":"9wyVznYb1lGLFTVclDZ7Q","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

After a time-out of 1000 ms

\n"}],"multipleAnswers":false,"questionTextHtml":"

When using a cleanup function in a ref callback, when does React execute this function?

\n"},{"id":"OIEhy3s9rnms6DOaUoxPA","questionText":"Which statement is *true* about using a component as a context value in React 19?","questionOptions":[{"text":"The component is ignored and a warning is thrown.","id":"Ck0HlZVmF1uEWXFad-1bd","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

The component is ignored and a warning is thrown.

\n"},{"text":"The component is rendered outside the tree.","id":"iCPZ3K9m3bZ1bAmX3trfs","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

The component is rendered outside the tree.

\n"},{"text":"The return value of the component becomes the context value.","id":"StXORyCMPJ3pfidtoMtM2","correct":true,"explanation":{"mdText":"React 19 lets you pass a component as the `value` to a provider, and uses that component’s return value as the actual context value.","mdHtml":"

React 19 lets you pass a component as the value to a provider, and uses that component’s return value as the actual context value.

\n"},"mdHtml":"

The return value of the component becomes the context value.

\n"},{"text":"The context becomes unusable in children.","id":"B_4Q6-g1a-Xjh62DuUhLY","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

The context becomes unusable in children.

\n"}],"multipleAnswers":false,"questionTextHtml":"

Which statement is true about using a component as a context value in React 19?

\n"},{"id":"oPgmfMXfc3vEyXSpwu6Nr","questionText":"In React 19, how is the `` tag handled when declared in a component?","questionOptions":[{"text":"It is rendered in the body as part of the visible DOM.","id":"arGyJdgZdyuGeTwrdQ3Nd","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"It is rendered in the body as part of the visible DOM.\n"},{"text":"It is ignored and must still be set with `document.title`.","id":"vyOh4GPrxh1TOed-ynyBL","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"It is ignored and must still be set with <code>document.title</code>.\n"},{"text":"It only works with class components.","id":"ysYAfMskYfnv_iWfWkVxo","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"It only works with class components.\n"},{"text":"React moves it into the `<head>` automatically.","id":"eij8wQlP2W52CyXwCUxjl","correct":true,"explanation":{"mdText":"React 19 extracts `<title>` and other metadata tags from the JSX and automatically inserts them into the document `<head>`.","mdHtml":"React 19 extracts <code><title></code> and other metadata tags from the JSX and automatically inserts them into the document <code><head></code>.\n"},"mdHtml":"React moves it into the <code><head></code> automatically.\n"}],"multipleAnswers":false,"questionTextHtml":"In React 19, how is the <code><title></code> tag handled when declared in a component?\n"},{"id":"uem9pCSK3ADvtrHElbjH5","questionText":"Which script-related behavior is correctly handled by React 19’s declarative `<script>` support?","questionOptions":[{"text":"Scripts are always placed at the bottom of the body.","id":"RsQ1tKpg5WyfZCGp2QpDP","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Scripts are always placed at the bottom of the body.\n"},{"text":"Scripts with `async` or `defer` are injected into `<head>` and cleaned up on unmount.","id":"ePdD7Qx51U5zLO2pfWagQ","correct":true,"explanation":{"mdText":"React 19 allows declarative script loading in JSX, including `async`, `defer`, and other attributes. The script is cleaned up when the component unmounts.","mdHtml":"React 19 allows declarative script loading in JSX, including <code>async</code>, <code>defer</code>, and other attributes. The script is cleaned up when the component unmounts.\n"},"mdHtml":"Scripts with <code>async</code> or <code>defer</code> are injected into <code><head></code> and cleaned up on unmount.\n"},{"text":"Scripts are run twice for hydration safety.","id":"9YmKuiQxEKdIj-tKMhcIU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Scripts are run twice for hydration safety.\n"},{"text":"Scripts cannot be removed after being inserted.","id":"jidl0MiVBvWrPsA9n-bwJ","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Scripts cannot be removed after being inserted.\n"}],"multipleAnswers":false,"questionTextHtml":"Which script-related behavior is correctly handled by React 19’s declarative <code><script></code> support?\n"},{"id":"Ns2_SVDtEMg9KGo7SuwW3","questionText":"**(True or False)** Passing a ref as a prop in React 19 still requires the use of `forwardRef`.","questionOptions":[{"text":"True","id":"SdGq2tX9zG4t62dvhT6IC","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"True\n"},{"text":"False","id":"-l8enqBKSDtfzfk0KIYo4","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed as regular props, so `forwardRef` is only needed when exposing imperative methods.","mdHtml":"React 19 allows refs to be passed as regular props, so <code>forwardRef</code> is only needed when exposing imperative methods.\n"},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) Passing a ref as a prop in React 19 still requires the use of <code>forwardRef</code>.\n"},{"id":"_dJAj8gbXdfIZVL8w5T7R","questionText":"**(True or False)** In React 19, cleanup functions returned from a ref callback can fully replace the need for `useEffect` in some cases.","questionOptions":[{"text":"True","id":"UJT-_0-v3qh0RZfopLsuU","correct":true,"explanation":{"mdText":"Ref callback cleanup can manage DOM event listeners, timers, or subscriptions without needing `useEffect`.","mdHtml":"Ref callback cleanup can manage DOM event listeners, timers, or subscriptions without needing <code>useEffect</code>.\n"},"mdHtml":"True\n"},{"text":"False","id":"Wqr2RH5btFcKgIrmYNClj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) In React 19, cleanup functions returned from a ref callback can fully replace the need for <code>useEffect</code> in some cases.\n"},{"id":"p3t3Se0POGqzRkxrFz4ZZ","questionText":"**(True or False)** In React 19, you can use a functional component directly as a context provider’s `value`.","questionOptions":[{"text":"True","id":"BgNxxWpSFzEZyvGlpJjuG","correct":true,"explanation":{"mdText":"The rendered value of the functional component is passed to all consumers of that context.","mdHtml":"The rendered value of the functional component is passed to all consumers of that context.\n"},"mdHtml":"True\n"},{"text":"False","id":"irI2qO8Fx5uOb5qspBU1-","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) In React 19, you can use a functional component directly as a context provider’s <code>value</code>.\n"},{"id":"mADP0QLQnT8_P1fUZkOFN","questionText":"**(True or False)** React 19 supports setting document metadata like `<title>` and `<meta>` by directly writing them inside JSX.","questionOptions":[{"text":"True","id":"CYh3Ibq2h7bfK24S4Y6GO","correct":true,"explanation":{"mdText":"These tags are recognized and moved to the document head automatically during rendering.","mdHtml":"These tags are recognized and moved to the document head automatically during rendering.\n"},"mdHtml":"True\n"},{"text":"False","id":"lZXytM3StJhjnt1_7osBj","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) React 19 supports setting document metadata like <code><title></code> and <code><meta></code> by directly writing them inside JSX.\n"},{"id":"O7__Q6Tf4jAuQ15uqoiFB","questionText":"**(True or False)** React 19’s support for `<script>` in JSX only works for inline scripts,. not external sources.","questionOptions":[{"text":"True","id":"NdQQh9_8yFmxVXbKbINp5","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"True\n"},{"text":"False","id":"ZfqqQuKvpoyKwKuhlAmS9","correct":true,"explanation":{"mdText":"React 19 allows loading both inline and external scripts using the `<script>` tag in JSX.","mdHtml":"React 19 allows loading both inline and external scripts using the <code><script></code> tag in JSX.\n"},"mdHtml":"False\n"}],"multipleAnswers":false,"questionTextHtml":"(True or False) React 19’s support for <code><script></code> in JSX only works for inline scripts,. not external sources.\n"},{"id":"t7ESX-2Ac-myBSr6E9cmv","questionText":"What happens when this component is rendered?\n```jsx\nfunction App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n```","questionOptions":[{"text":"The input will not be focusable.","id":"K7Xob0sU1C1li1p70Pbip","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"The input will not be focusable.\n"},{"text":"An error will be thrown because `ref` must be called `ref`.","id":"6S3nNX715AyfzsCgY5RHU","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"An error will be thrown because <code>ref</code> must be called <code>ref</code>.\n"},{"text":"The `ref` will be correctly attached to the input element.","id":"M6GDpFj6HKvdUY6ePWKCf","correct":true,"explanation":{"mdText":"React 19 allows refs to be passed with any prop name and applied directly to elements—no `forwardRef` needed.","mdHtml":"React 19 allows refs to be passed with any prop name and applied directly to elements—no <code>forwardRef</code> needed.\n"},"mdHtml":"The <code>ref</code> will be correctly attached to the input element.\n"},{"text":"Nothing will be rendered.","id":"YOLgPKOGXTigFSg2akknB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Nothing will be rendered.\n"}],"multipleAnswers":false,"questionTextHtml":"What happens when this component is rendered?\n<pre><code class=\"language-jsx\">function App() {\n const inputRef = useRef();\n return <FancyInput inputRef={inputRef} />;\n}\n\nfunction FancyInput({ inputRef }) {\n return <input ref={inputRef} />;\n}\n\nexport default App\n</code></pre>\n"},{"id":"f6P1untKYw-mvafJOCzgL","questionText":"What happens when the component unmounts?\n```jsx\nfunction App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n```","questionOptions":[{"text":"The interval will continue running.","id":"5-cLgPClWBofmX76wRRbh","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"The interval will continue running.\n"},{"text":"The interval will be cleared automatically.","id":"OYOuDEyehH9I9hO6jh7XV","correct":true,"explanation":{"mdText":"The cleanup function returned from the ref callback clears the interval when the component unmounts or the node changes.","mdHtml":"The cleanup function returned from the ref callback clears the interval when the component unmounts or the node changes.\n"},"mdHtml":"The interval will be cleared automatically.\n"},{"text":"An error will be thrown.","id":"WMsaRVBY9u5U4uexdnJMG","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"An error will be thrown.\n"},{"text":"The cleanup will only happen if `useEffect` is used.","id":"bdFVGiZcajiIXt_HZap66","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"The cleanup will only happen if <code>useEffect</code> is used.\n"}],"multipleAnswers":false,"questionTextHtml":"What happens when the component unmounts?\n<pre><code class=\"language-jsx\">function App() {\n return (\n <div\n ref={(node) => {\n if (!node) return;\n const id = setInterval(() => console.log('Running'), 1000);\n return () => clearInterval(id);\n }}\n >\n Running task...\n </div>\n );\n}\n</code></pre>\n"},{"id":"SIL7fkCcIMujlxnKv0eXi","questionText":"What is rendered for the following?\n```jsx\nfunction RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n```","questionOptions":[{"text":"`admin`","id":"mx1jZiyGg1MnmwacbTI8W","correct":true,"explanation":{"mdText":"`<RoleValue />` returns `'admin'`, which becomes the context value.","mdHtml":"<code><RoleValue /></code> returns <code>'admin'</code>, which becomes the context value.\n"},"mdHtml":"<code>admin</code>\n"},{"text":"`<RoleValue />`","id":"Cu6HzEx1H10ZtCwmsy2FF","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code><RoleValue /></code>\n"},{"text":"`undefined`","id":"RFqYarK5upDlHEHRMCZSB","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"<code>undefined</code>\n"},{"text":"Nothing","id":"YxPGDyr3iXoQGQvbaMejc","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Nothing\n"}],"multipleAnswers":false,"questionTextHtml":"What is rendered for the following?\n<pre><code class=\"language-jsx\">function RoleValue() {\n return 'admin';\n}\n\nfunction App() {\n return (\n <RoleContext.Provider value={<RoleValue />}>\n <Dashboard />\n </RoleContext.Provider>\n );\n}\n\nfunction Dashboard() {\n const role = useContext(RoleContext);\n return {role};\n}\n</code></pre>\n"},{"id":"olpGkgGtN8YKeGFuiern_","questionText":"What happens when this component is rendered?\n```jsx\nfunction Page() {\n return (\n <>\n <title>My Page\n \n \n );\n}\n```","questionOptions":[{"text":"Nothing, these tags are ignored in JSX.","id":"GRmupmGG7Bvb3_4zwW73f","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

Nothing, these tags are ignored in JSX.

\n"},{"text":"They will appear in the body.","id":"GFp5Gnu7hlI0ardH6VUHR","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

They will appear in the body.

Nothing, these tags are ignored in JSX.

\n"},{"text":"They will appear in the body.","id":"GFp5Gnu7hlI0ardH6VUHR","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

They will appear in the body.

Nothing, these tags are ignored in JSX.

\n"},{"text":"They will appear in the body.","id":"GFp5Gnu7hlI0ardH6VUHR","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"

They will appear in the body.

\n"},{"text":"They will be injected into the document ``.","id":"aJPm5Qy82TY677m0Ju12K","correct":true,"explanation":{"mdText":"React 19 extracts `` and `<meta>` from JSX and injects them into the `<head>` automatically.","mdHtml":"React 19 extracts <code><title></code> and <code><meta></code> from JSX and injects them into the <code><head></code> automatically.\n"},"mdHtml":"They will be injected into the document <code><head></code>.\n"},{"text":"Only the title will be injected.","id":"aSDBmfzHE3Ogv-piYHboE","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Only the title will be injected.\n"}],"multipleAnswers":false,"questionTextHtml":"What happens when this component is rendered?\n<pre><code class=\"language-jsx\">function Page() {\n return (\n <>\n <title>My Page</title>\n <meta name="description" content="Welcome to My Page" />\n </>\n );\n}\n</code></pre>\n"},{"id":"V3GgJEX54Fexv4UEel6-Y","questionText":"What happens during execution?\n```jsx\nfunction ScriptLoader() {\n return (\n <>\n <script src=\"https://example.com/widget.js\" async />\n Widget Loaded\n </>\n );\n}\n```","questionOptions":[{"text":"Script will block rendering.","id":"-NDM5xT0olOGyc3QY-ykO","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Script will block rendering.\n"},{"text":"Script will be ignored in JSX.","id":"ByvU6l_RNVVCnoV9WIkZ5","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"Script will be ignored in JSX.\n"},{"text":"Script will load asynchronously and clean up on unmount.","id":"4mk-ziUFtPHRMTK_-HVpU","correct":true,"explanation":{"mdText":"React 19 allows external scripts to load with `async` or `defer` attributes. React handles lifecycle and cleanup.","mdHtml":"React 19 allows external scripts to load with <code>async</code> or <code>defer</code> attributes. React handles lifecycle and cleanup.\n"},"mdHtml":"Script will load asynchronously and clean up on unmount.\n"},{"text":"JSX scripts must use `useEffect`.","id":"d06B9WHMZ5NbXKC8Rko1r","correct":false,"explanation":{"mdText":"","mdHtml":""},"mdHtml":"JSX scripts must use <code>useEffect</code>.\n"}],"multipleAnswers":false,"questionTextHtml":"What happens during execution?\n<pre><code class=\"language-jsx\">function ScriptLoader() {\n return (\n <>\n <script src="https://example.com/widget.js" async />\n Widget Loaded\n </>\n );\n}\n</code></pre>\n"}],"comp_id":"mrqknSLSLLzcHQpD9NqlT"},"iteration":0,"hash":0,"children":[{"text":""}],"status":"normal","saveVersion":33,"contentID":"Me0jmcljAna1NfPfyjUnV"}]},"isPreviewLesson":false,"pageType":"collection_lesson","aiCoachVideoUrl":"https://youtu.be/kgl8y9J3O6c","collectionDetailsSSR":{"title":"تعلم React","summary":"أتقن كيفية بناء واجهات المستخدم الحديثة مع React. من لوحات المعلومات إلى تطبيقات الأجهزة المحمولة، يُعد React أساس العديد من أكثر واجهات المستخدم قابلية للتطوير اليوم. تُعلّم هذه الدورة React من خلال أمثلة عملية وتحديات عملية، مما يساعدك بناء أساس متين في تقنيات التطوير العملية. ستتجاوز بناء الجمل النحوية لفهم كيفية تحديث React لـ DOM، وإدارة الحالة، والتعامل مع تفاعل المستخدم. ابنِ مكونات يمكنك إعادة استخدامها. تعلّم JSX، والخطافات، والتوجيه، والميزات الجديدة في React 19 التي تُحسّن الأداء وتُبسّط الكود. سواء كنت تُنشئ تطبيق React الأول الخاص بك أو تُحسّن واجهة فريقك الأمامية، تُزوّدك هذه الدورة بالهيكل والأمثلة والمهارات اللازمة للقيام بذلك على النحو الصحيح.","details":"","clos":["القدرة على بناء واجهات مستخدم ديناميكية وقابلة للتعديل باستخدام تصميم React القائم على المكونات","معرفة عملية بـ JSX، امتداد XML القوي JavaScript ، لإنشاء كود إعلاني وقابل للصيانة","خبرة عملية في استخدام أدوات مثل useState وuseEffect للتعامل مع البيانات الديناميكية والآثار الجانبية في المكونات الوظيفية","القدرة على بناء تطبيقات صفحة واحدة سلسة مع مسارات ديناميكية ومتداخلة باستخدام React Router","فهم ميزات React 19 الجديدة لإدارة البيانات الوصفية وأوراق الأنماط والموارد الخارجية بشكل إعلاني"],"arabic_available":true,"toc":{"categories":[{"id":"esrl1ixf4","title":"قبل أن نبدأ","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":4707653546016768,"id":4707653546016768,"title":"مقدمة عن الدورة","is_preview":true,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"introduction-to-the-course","title_arabic":"مقدمة عن الدورة","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"يقدم هذا الفصل مقدمة عن الدورة، ويوضح أهدافها وبنيتها ونصائح عملية لتحقيق النجاح في رحلة تعلم React.","title_arabic":"قبل أن نبدأ","summary_arabic":"يقدم هذا الفصل مقدمة عن الدورة، ويوضح أهدافها وبنيتها ونصائح عملية لتحقيق النجاح في رحلة تعلم React."},{"id":"ujnr6xcd1","title":"JavaScript لـ React— مراجعة سريعة","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":5273970234753024,"id":5273970234753024,"title":"المتغيرات وأنواع البيانات","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"variables-and-data-types","title_arabic":"المتغيرات وأنواع البيانات","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6017846327246848,"id":6017846327246848,"title":"الوظائف، ووظائف الأسهم، وعمليات الاسترجاع","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"functions-arrow-functions-and-callbacks","title_arabic":"الوظائف، ووظائف الأسهم، وعمليات الاسترجاع","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6305923234922496,"id":6305923234922496,"title":"النطاق والإغلاقات","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"scope-and-closures","title_arabic":"النطاق والإغلاقات","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4581745725145088,"id":4581745725145088,"title":"الكائنات والمصفوفات","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"objects-and-arrays","title_arabic":"الكائنات والمصفوفات","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6041037351288832,"id":6041037351288832,"title":"برمجة JavaScript غير المتزامنة","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"javascript-asynchronous-programming","title_arabic":"برمجة JavaScript غير المتزامنة","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5739113364193280,"id":5739113364193280,"title":"ميزات JavaScript الحديثة وES6+","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"modern-javascript-and-es6-features","title_arabic":"ميزات JavaScript الحديثة وES6+","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5945078084665344,"id":5945078084665344,"title":"أساسيات DOM لمطوري React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"dom-essentials-for-react-developers","title_arabic":"أساسيات DOM لمطوري React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6500630653173760,"id":6500630653173760,"title":"اختبار: أساسيات JavaScript لـ React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"quiz-javascript-fundamentals-for-react","title_arabic":"اختبار: أساسيات JavaScript لـ React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5928243658358784,"id":5928243658358784,"title":"التحدي: تطبيق قائمة المهام الديناميكية","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"challenge-dynamic-to-do-list-application","title_arabic":"التحدي: تطبيق قائمة المهام الديناميكية","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5858146965127168,"id":5858146965127168,"title":"الحل: تطبيق قائمة المهام الديناميكية","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"solution-dynamic-to-do-list-application","title_arabic":"الحل: تطبيق قائمة المهام الديناميكية","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"قم بمراجعة أساسيات JavaScript وميزات ES6+ الحديثة وأساسيات DOM لبناء أساس قوي لتطوير React في هذا الفصل.","title_arabic":"JavaScript لـ React— مراجعة سريعة","summary_arabic":"قم بمراجعة أساسيات JavaScript وميزات ES6+ الحديثة وأساسيات DOM لبناء أساس قوي لتطوير React في هذا الفصل."},{"id":"ef9l58b69","title":"مقدمة إلى React","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":5868141832175616,"id":5868141832175616,"title":"لماذا React؟","is_preview":true,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"why-react","title_arabic":"لماذا React؟","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5488554577100800,"id":5488554577100800,"title":"ما هو React؟","is_preview":true,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"what-is-react","title_arabic":"ما هو React؟","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6667336218443776,"id":6667336218443776,"title":"DOM الافتراضي: قوة React","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"virtual-dom-the-power-of-react","title_arabic":"DOM الافتراضي: قوة React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6178594072428544,"id":6178594072428544,"title":"فهم بناء جملة JSX","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"understanding-jsx-syntax","title_arabic":"فهم بناء جملة JSX","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4905934294220800,"id":4905934294220800,"title":"عرض عناصر JSX في React","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"rendering-jsx-elements-in-react","title_arabic":"عرض عناصر JSX في React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6247557926092800,"id":6247557926092800,"title":"اختبار: مقدمة إلى React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"quiz-introduction-to-react","title_arabic":"اختبار: مقدمة إلى React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6673045924478976,"id":6673045924478976,"title":"التحدي: عرض صفحة ملف تعريف ديناميكية","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"challenge-displaying-a-dynamic-profile-page","title_arabic":"التحدي: عرض صفحة ملف تعريف ديناميكية","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6456393261776896,"id":6456393261776896,"title":"الحل: عرض صفحة ملف تعريف ديناميكية","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"solution-displaying-a-dynamic-profile-page","title_arabic":"الحل: عرض صفحة ملف تعريف ديناميكية","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"استكشف React وفوائده، وقواعد لغة JSX، وDOM الافتراضية، وكيفية عرض العناصر الديناميكية، ووضع الأساس لتطوير React.","title_arabic":"مقدمة إلى React","summary_arabic":"استكشف React وفوائده، وقواعد لغة JSX، وDOM الافتراضية، وكيفية عرض العناصر الديناميكية، ووضع الأساس لتطوير React."},{"id":"i2alfs5hh","title":"مكونات React","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":6051602324914176,"id":6051602324914176,"title":"مقدمة لمكونات React","is_preview":true,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"introduction-to-react-components","title_arabic":"مقدمة إلى مكونات React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6181952703299584,"id":6181952703299584,"title":"تمرير الدعائم إلى المكونات","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"passing-props-to-components","title_arabic":"تمرير الدعائم إلى المكونات","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5701484929220608,"id":5701484929220608,"title":"تنسيق المكونات في React","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"styling-components-in-react","title_arabic":"تنسيق المكونات في React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5507968299040768,"id":5507968299040768,"title":"التعامل مع الأحداث في مكونات React","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"handling-events-in-react-components","title_arabic":"التعامل مع الأحداث في مكونات React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6499411167674368,"id":6499411167674368,"title":"إنشاء مكونات عديمة الجنسية","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"creating-stateless-components","title_arabic":"إنشاء مكونات عديمة الجنسية","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4910286102724608,"id":4910286102724608,"title":"اختبار: مكونات React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"quiz-react-components","title_arabic":"اختبار: مكونات React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5921827925131264,"id":5921827925131264,"title":"التحدي: صفحة قائمة المنتجات","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"challenge-product-listing-page","title_arabic":"التحدي: صفحة قائمة المنتجات","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5156340101414912,"id":5156340101414912,"title":"الحل: صفحة قائمة المنتجات","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"solution-product-listing-page","title_arabic":"الحل: صفحة قائمة المنتجات","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"انغمس في مكونات React لبناء واجهات مستخدم ديناميكية مع الدعائم، ومعالجة الأحداث، وتنسيق المكونات، وإنشاء مكون عديم الحالة قابل لإعادة الاستخدام.","title_arabic":"مكونات React","summary_arabic":"انغمس في مكونات React لبناء واجهات مستخدم ديناميكية مع الدعائم، ومعالجة الأحداث، وتنسيق المكونات، وإنشاء مكون عديم الحالة قابل لإعادة الاستخدام."},{"id":"0f6re3c65","title":"الخطافات: إدارة الحالات والتأثيرات في مكونات React","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":5729095163183104,"id":5729095163183104,"title":"فهم الخطافات في React","is_preview":true,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"understanding-hooks-in-react","title_arabic":"فهم الخطافات في React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6104869133221888,"id":6104869133221888,"title":"خطاف useState","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"the-usestate-hook","title_arabic":"خطاف useState","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5287128247697408,"id":5287128247697408,"title":"خطاف useEffect","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"the-useeffect-hook","title_arabic":"خطاف useEffect","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5371146733486080,"id":5371146733486080,"title":"دمج useState وuseEffect للتفاعلات الديناميكية","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"combining-usestate-and-useeffect-for-dynamic-interactions","title_arabic":"دمج useState وuseEffect للتفاعلات الديناميكية","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4868643176710144,"id":4868643176710144,"title":"خطاف useContext","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"the-usecontext-hook","title_arabic":"خطاف useContext","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4972898575319040,"id":4972898575319040,"title":"خطاف useRef","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"the-useref-hook","title_arabic":"خطاف useRef","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5656133819039744,"id":5656133819039744,"title":"خطاف useMemo","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"the-usememo-hook","title_arabic":"خطاف useMemo","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5897860710531072,"id":5897860710531072,"title":"اختبار: خطافات React","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"quiz-react-hooks","title_arabic":"اختبار: خطافات React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6178221420052480,"id":6178221420052480,"title":"التحدي: نظام إدارة المخزون مع المواضيع","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"challenge-inventory-management-system-with-theming","title_arabic":"التحدي: نظام إدارة المخزون مع المواضيع","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4957694349148160,"id":4957694349148160,"title":"الحل: نظام إدارة المخزون مع التخصيص","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"solution-inventory-management-system-with-theming","title_arabic":"الحل: نظام إدارة المخزون مع التخصيص","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"استكشف React Hooks مثل useState، وuseEffect، وuseContext، وuseMemo لإدارة الحالة، ومعالجة الآثار الجانبية، وتحسين الأداء.","title_arabic":"الخطافات: إدارة الحالات والتأثيرات في مكونات React","summary_arabic":"استكشف React Hooks مثل useState، وuseEffect، وuseContext، وuseMemo لإدارة الحالة، ومعالجة الآثار الجانبية، وتحسين الأداء."},{"id":"92gj81d18","title":"React Router والتنقلات","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":5737584711303168,"id":5737584711303168,"title":"مقدمة إلى React Router","is_preview":true,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"introduction-to-react-router","title_arabic":"مقدمة إلى React Router","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6093507644489728,"id":6093507644489728,"title":"تحديد المسارات في React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"defining-routes-in-react","title_arabic":"تحديد المسارات في React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5631942407356416,"id":5631942407356416,"title":"التنقل بين الصفحات في React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"navigating-between-pages-in-react","title_arabic":"التنقل بين الصفحات في React","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4645410951266304,"id":4645410951266304,"title":"التوجيه الديناميكي","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"dynamic-routing","title_arabic":"التوجيه الديناميكي","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6512584699543552,"id":6512584699543552,"title":"المسارات المتداخلة","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"nested-routes","title_arabic":"المسارات المتداخلة","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6566348831719424,"id":6566348831719424,"title":"صفحة 404 وطرق البدل","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"404-page-and-wildcard-routes","title_arabic":"صفحة 404 وطرق البدل","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6018577343053824,"id":6018577343053824,"title":"الملاحة البرمجية","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"programmatic-navigation","title_arabic":"الملاحة البرمجية","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4963327848873984,"id":4963327848873984,"title":"اختبار: React Router and Navigation","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"quiz-react-router-and-navigation","title_arabic":"اختبار: React Router and Navigation","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4718935502356480,"id":4718935502356480,"title":"التحدي: تطبيق مبسط للتجارة الإلكترونية","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"challenge-simplified-e-commerce-application","title_arabic":"التحدي: تطبيق مبسط للتجارة الإلكترونية","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5308426793385984,"id":5308426793385984,"title":"الحل: تطبيق التجارة الإلكترونية المبسط","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"solution-simplified-e-commerce-application","title_arabic":"الحل: تطبيق التجارة الإلكترونية المبسط","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"تعرف على أساسيات React Router، بما في ذلك تحديد المسارات، والتنقل الديناميكي، والمسارات المتداخلة، ومعالجة صفحات 404 لإنشاء تطبيقات الصفحة الواحدة (SPA) سلسة.","title_arabic":"React Router والتنقلات","summary_arabic":"تعرف على أساسيات React Router، بما في ذلك تحديد المسارات، والتنقل الديناميكي، والمسارات المتداخلة، ومعالجة صفحات 404 لإنشاء تطبيقات الصفحة الواحدة (SPA) سلسة."},{"id":"flufhar0h","title":"تحسينات جديدة في React 19","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":5854688235618304,"id":5854688235618304,"title":"المرجع كدعامة","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"ref-as-a-prop","title_arabic":"المرجع كدعامة","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5747634531598336,"id":5747634531598336,"title":"وظائف التنظيف للمراجع","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"cleanup-functions-for-refs","title_arabic":"وظائف التنظيف للمراجع","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5545132091637760,"id":5545132091637760,"title":"السياق كمزود","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"context-as-a-provider","title_arabic":"السياق كمزود","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":4630939712749568,"id":4630939712749568,"title":"دعم بيانات التعريف الخاصة بالمستندات","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"support-for-document-metadata","title_arabic":"دعم بيانات التعريف الخاصة بالمستندات","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":6669534497734656,"id":6669534497734656,"title":"دعم البرامج النصية غير المتزامنة","is_preview":false,"parentIndex":null,"editMode":false,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"support-for-async-scripts","title_arabic":"دعم البرامج النصية غير المتزامنة","summary":"$undefined"},{"author_id":10370001,"collection_id":4823099470381056,"page_id":5975789901053952,"id":5975789901053952,"title":"اختبار: تحسينات React 19","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"quiz-react-19-improvements","title_arabic":"اختبار: تحسينات React 19","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"استكشف تحسينات React 19 للمراجع والسياق والبيانات الوصفية والبرامج النصية غير المتزامنة.","title_arabic":"تحسينات جديدة في React 19","summary_arabic":"استكشف تحسينات React 19 للمراجع والسياق والبيانات الوصفية والبرامج النصية غير المتزامنة."},{"id":"nvarlwcx9","title":"خاتمة","pages":[{"author_id":10370001,"collection_id":4823099470381056,"page_id":5502136395104256,"id":5502136395104256,"title":"اختتم رحلتك مع React","is_preview":false,"parentIndex":null,"editMode":true,"is_recovered":false,"type":"collection_lesson","can_edit":false,"is_standalone_module":false,"is_cloned":false,"brief_summary":"","slug":"conclude-your-react-journey","title_arabic":"اختتم رحلتك مع React","summary":"$undefined"}],"editMode":false,"type":"COLLECTION_CATEGORY","summary":"اختتم الدورة التدريبية من خلال تلخيص مفاهيم React، وتقديم الخطوات العملية التالية، وإلهام المتعلمين لبناء تطبيقات ويب ديناميكية.","title_arabic":"خاتمة","summary_arabic":"اختتم الدورة التدريبية من خلال تلخيص مفاهيم React، وتقديم الخطوات العملية التالية، وإلهام المتعلمين لبناء تطبيقات ويب ديناميكية."},{"page_id":6336975150645248,"id":5167979390959616,"title":"Build a Doctor Appointment Booking System Using the MERN Stack","pages":[],"editMode":false,"type":"PATH_EXTERNAL_PROJECT","author_id":10370001,"collection_id":6135215312207872,"is_required":false,"detail_id":"project_10370001_6135215312207872_6336975150645248","title_arabic":"إنشاء نظام حجز مواعيد الطبيب باستخدام حزمة MERN","summary":"$undefined","cover_image_serving_url":null,"collection_read_time":0,"page_count":0,"brief_summary":null,"course_url_slug":null,"assessments_keys":[],"projects_keys":[],"optional_lessons":[],"time_limit":null}]},"page_titles":{"5273970234753024":"المتغيرات وأنواع البيانات","6017846327246848":"الوظائف، ووظائف الأسهم، وعمليات الاسترجاع","6305923234922496":"النطاق والإغلاقات","4581745725145088":"الكائنات والمصفوفات","6041037351288832":"برمجة JavaScript غير المتزامنة","5739113364193280":"ميزات JavaScript الحديثة وES6+","5945078084665344":"أساسيات DOM لمطوري React","5868141832175616":"لماذا React؟","6500630653173760":"اختبار: أساسيات JavaScript لـ React","5928243658358784":"التحدي: تطبيق قائمة المهام الديناميكية","5858146965127168":"الحل: تطبيق قائمة المهام الديناميكية","5488554577100800":"ما هو React؟","6178594072428544":"فهم بناء جملة JSX","6247557926092800":"اختبار: مقدمة إلى React","6456393261776896":"الحل: عرض صفحة ملف تعريف ديناميكية","6181952703299584":"تمرير الدعائم إلى المكونات","6051602324914176":"مقدمة لمكونات React","4910286102724608":"اختبار: مكونات React","5921827925131264":"التحدي: صفحة قائمة المنتجات","6667336218443776":"DOM الافتراضي: قوة React","4905934294220800":"عرض عناصر JSX في React","6673045924478976":"التحدي: عرض صفحة ملف تعريف ديناميكية","5701484929220608":"تنسيق المكونات في React","5507968299040768":"التعامل مع الأحداث في مكونات React","6499411167674368":"إنشاء مكونات عديمة الجنسية","5156340101414912":"الحل: صفحة قائمة المنتجات","5729095163183104":"فهم الخطافات في React","6104869133221888":"خطاف useState","5287128247697408":"خطاف useEffect","4868643176710144":"خطاف useContext","4972898575319040":"خطاف useRef","5656133819039744":"خطاف useMemo","6178221420052480":"التحدي: نظام إدارة المخزون مع المواضيع","5371146733486080":"دمج useState وuseEffect للتفاعلات الديناميكية","5897860710531072":"اختبار: خطافات React","5737584711303168":"مقدمة إلى React Router","6093507644489728":"تحديد المسارات في React","5631942407356416":"التنقل بين الصفحات في React","4645410951266304":"التوجيه الديناميكي","6512584699543552":"المسارات المتداخلة","6018577343053824":"الملاحة البرمجية","6566348831719424":"صفحة 404 وطرق البدل","4957694349148160":"الحل: نظام إدارة المخزون مع التخصيص","4963327848873984":"اختبار: React Router and Navigation","4718935502356480":"التحدي: تطبيق مبسط للتجارة الإلكترونية","5308426793385984":"الحل: تطبيق التجارة الإلكترونية المبسط","5502136395104256":"اختتم رحلتك مع React","4707653546016768":"مقدمة عن الدورة","5854688235618304":"المرجع كدعامة","5747634531598336":"وظائف التنظيف للمراجع","5545132091637760":"السياق كمزود","4630939712749568":"دعم بيانات التعريف الخاصة بالمستندات","6669534497734656":"دعم البرامج النصية غير المتزامنة","5975789901053952":"اختبار: تحسينات React 19"},"page_tags":{"5273970234753024":"","6017846327246848":"","6305923234922496":"","4581745725145088":"","6041037351288832":"","5739113364193280":"","5945078084665344":"","5868141832175616":"","6500630653173760":"","5928243658358784":"","5858146965127168":"","5488554577100800":"","6178594072428544":"","6247557926092800":"","6456393261776896":"","6181952703299584":"","6051602324914176":"","4910286102724608":"","5921827925131264":"","6667336218443776":"","4905934294220800":"","6673045924478976":"","5701484929220608":"","5507968299040768":"","6499411167674368":"","5156340101414912":"","5729095163183104":"","6104869133221888":"","5287128247697408":"","4868643176710144":"","4972898575319040":"","5656133819039744":"","6178221420052480":"","5371146733486080":"","5897860710531072":"","5737584711303168":"","6093507644489728":"","5631942407356416":"","4645410951266304":"","6512584699543552":"","6018577343053824":"","6566348831719424":"","4957694349148160":"","4963327848873984":"","4718935502356480":"","5308426793385984":"","5502136395104256":"","4707653546016768":"","5854688235618304":"","5747634531598336":"","5545132091637760":"","4630939712749568":"","6669534497734656":"","5975789901053952":""},"collection_toc_is_enabled":true,"page_count":null,"docker":{"container":{"file":{},"imageName":"","buildStatusUrl":"","buildLogUrl":"","track":false},"envs":[],"jobs":[],"testRunners":[],"version":3,"loaded":true},"discounted_price":29,"cover_image_id":5035708774744064,"cover_image_metadata":"{\"width\":1024,\"height\":512,\"sizeInBytes\":31335,\"name\":\"Learn React.png\"}","cover_image_serving_url":"/v2api/collection/10370001/4823099470381056/image/5035708774744064","tags":["JavaScript","Front-end Development","UI/UX","React Hooks","React Router"],"intro_video_url":"","intro_video_thumbnail_url":"","aggregated_widget_stats":{"projects":0,"assessments":0,"cloudlabs":0,"SlateHTML":313,"codeExerciseCount":0,"codeRunnableCount":212,"codeSnippetCount":35,"illustrations":28,"EditorCode":18,"TableHTML":8,"Code":59,"Table":0,"RunJS":0,"DrawIOWidget":28,"Sandpack":158,"Quiz":6,"Image":0,"MarkdownEditor":0,"AIMentor":12},"default_themes":{"code_themes":{"Code":"default","Markdown":"default","RunJS":"default","SPA":"default","isForced":{"Code":false,"Markdown":false,"RunJS":false,"SPA":false}}},"api_keys":{"api_keys":[]},"skills":[],"testimonials":[],"licensing":null,"target_audience":"beginner","author_id":"10370001","collection_id":"4823099470381056","approval_status":3005,"price":29,"is_private":false,"path_type":"regular","organization_id":null,"is_mini":false,"is_priced":true,"brief_summary":"تعلم React خطوة بخطوة في هذه الدورة التدريبية المناسبة للمبتدئين، وإتقان المكونات والخطافات والتوجيه بناء تطبيقات ويب ديناميكية وقابلة للتطوير.","approval_update_time":"2025-02-19T10:49:54.489Z","rating_visibility":true,"update_last_published_on_homepage":true,"show_developed_by":true,"udata_files":[],"CodeThemes":{"Code":"default","Markdown":"default","RunJS":"default","SPA":"default","isForced":{"Code":false,"Markdown":false,"RunJS":false,"SPA":false}},"is_marked_for_deletion":false,"transition_page_title":"","is_redirectable":false,"collection_type":"collection","adaptive_learning_mode":false,"HLOs_to_toc":{},"is_guide":false,"read_time":11220,"allow_logged_out_executions":false,"unique_live_widget_urls":false,"metadata_status":101},"pageSummarySSR":{"title":"تعلم React","description":"أتقن كيفية بناء واجهات المستخدم الحديثة مع React. من لوحات المعلومات إلى تطبيقات الأجهزة المحمولة، يُعد React أساس العديد من أكثر واجهات المستخدم قابلية للتطوير اليوم. تُعلّم هذه الدورة React من خلال أمثلة عملية وتحديات عملية، مما يساعدك بناء أساس متين في تقنيات التطوير العملية. ستتجاوز بناء الجمل النحوية لفهم كيفية تحديث React لـ DOM، وإدارة الحالة، والتعامل مع تفاعل المستخدم. ابنِ مكونات يمكنك إعادة استخدامها. تعلّم JSX، والخطافات، والتوجيه، والميزات الجديدة في React 19 التي تُحسّن الأداء وتُبسّط الكود. سواء كنت تُنشئ تطبيق React الأول الخاص بك أو تُحسّن واجهة فريقك الأمامية، تُزوّدك هذه الدورة بالهيكل والأمثلة والمهارات اللازمة للقيام بذلك على النحو الصحيح.","discourse_page_url":null},"adaptiveLearningConfigConstantSSR":0,"enableLessonPageLockedBannerV2":true,"allowAllLessonPreview":false,"lockedBannerStatsSSR":{"b2cTrialStats":{"is_b2c_trial_active":true,"b2c_trial_active_duration":7,"b2c_trial_categories":"$124"},"b2cStatus":100,"learnerTags":"$125","workStats":1440,"interviewWorksStats":78,"inL2cStarterPack":false,"l2cWorkStats":43,"enableL2cStarterPackPaymentWidget":"true"},"pageTocSSR":"","authorId":"10370001","collectionId":"4823099470381056","pageId":"5975789901053952","isCollectionPageLockedCachingEnabled":true,"aceFeatureFlags":{"enableAceEditor":true,"enableAceEditorForAnswers":true},"meta":{"type":["Article","TechArticle"],"title":"تعلم React","name":"تعلم React","description":"أتقن كيفية بناء واجهات المستخدم الحديثة مع React. من لوحات المعلومات إلى تطبيقات الأجهزة المحمولة، يُعد React أساس العديد من أكثر واجهات المستخدم قابلية للتطوير اليوم. تُعلّم هذه الدورة React من خلال أمثلة عملية وتحديات عملية، مما يساعدك بناء أساس متين في تقنيات التطوير العملية. ستتجاوز بناء الجمل النحوية لفهم كيفية تحديث React لـ DOM، وإدارة الحالة، والتعامل مع تفاعل المستخدم. ابنِ مكونات يمكنك إعادة استخدامها. تعلّم JSX، والخطافات، والتوجيه، والميزات الجديدة في React 19 التي تُحسّن الأداء وتُبسّط الكود. سواء كنت تُنشئ تطبيق React الأول الخاص بك أو تُحسّن واجهة فريقك الأمامية، تُزوّدك هذه الدورة بالهيكل والأمثلة والمهارات اللازمة للقيام بذلك على النحو الصحيح.","image":"https://educative.io/api/collection/10370001/4823099470381056/image/5035708774744064.png","isAccessibleForFree":false,"keywords":"$125","provider":"Educative","publisher":"Educative","id":"courses/learn-react/quiz-react-19-improvements","author":"Educative","educationalLevel":"beginner","noIndex":true,"isForcedNoIndex":true,"noFollow":false,"redirectInfo":{"isDeletedCollectionPageRedirectable":false},"page_titles":"$126","is_marked_for_deletion":false,"transition_page_title":"","is_redirectable":false,"deleted_course_lesson_redirect":{"author_id":null,"collection_id":null,"page_id":null,"redirect_url_slug":null},"metadata_status":101,"additional_course_alternatives":[]},"requestUrl":"/ar/courses/learn-react/quiz-react-19-improvements","requestUrlInfo":{"authorId":"10370001","collectionId":"4823099470381056","pageId":"5975789901053952","courseUrlSlug":"learn-react","pageUrlSlug":"quiz-react-19-improvements"},"isExternalContent":false}}],[["$","script",null,{"id":"generate-data","type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$127"}}],false,"$undefined"]] </article></body></html>