Learn React from the ground up, covering JSX, components, hooks, routing, and React 19 updates, through hands-on projects, quizzes, and challenges to build real-world applications.

Become a MERN Stack Developer

This module guides learners through a complete React journey, starting with a refresher on modern JavaScript concepts like ES6+, async programming, and DOM essentials. It then introduces React’s core ideas, JSX, the virtual DOM, and rendering dynamic UI, before moving into reusable components with props, styling, and event handling. Learners explore React Hooks such as useState, useEffect, useContext, and useMemo for managing state, side effects, and performance. The module also covers React Router for seamless single-page apps with navigation, dynamic routing, nested routes, and error handling. To stay current, it introduces new features in React 19, including updates to refs, context, metadata, and async scripts. With quizzes, challenges, and hands-on projects like a to-do app, product listing, and inventory system, learners gain both confidence and practical skills to build real-world React applications.

Learn React

`const` variables cannot be reassigned, but their content (like objects) can be mutated.

Variables declared with `let` are hoisted but not initialized.

**(Select all that apply.)** Which statements are true about `let` and `const`?

(Select all that apply.) Which statements are true about <code>let</code> and <code>const</code>?

(اختر كل ما ينطبق) ما هي العبارات صحيح حول<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">let</code> و<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">const</code> ؟

What is the output of the following code?
```js
const x = null ?? "Default";
const y = 0 ?? "Default";
console.log(x, y);
```

What is the output of the following code?
<pre><code class="language-js">const x = null ?? &quot;Default&quot;;
const y = 0 ?? &quot;Default&quot;;
console.log(x, y);
</code></pre>

ما هو إخراج الكود التالي؟<pre style=";text-align:right;direction:rtl"><code class="language-js" style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">const x = null ?? "Default";
const y = 0 ?? "Default";
console.log(x, y);
</code></pre>

Removes the class `active` from an element.

Adds the class `active` if it is not present, or removes it if it is present.

What does `classList.toggle("active")` do?

What does <code>classList.toggle(&quot;active&quot;)</code> do?

ماذا يفعل<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">classList.toggle("active")</code> يفعل؟

Which method is used to select all elements with a specific tag name?

Which method is used to select all elements with a specific tag name?

ما هي الطريقة المستخدمة لتحديد جميع العناصر التي تحمل اسم علامة معينة؟

**(True or False)** `await` can only be used inside an `async` function.

(True or False) <code>await</code> can only be used inside an <code>async</code> function.

(صحيح أو خطأ)<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">await</code> لا يمكن استخدامها إلا داخل<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">async</code> وظيفة.

**(True or False)** Arrow functions have their own `this` context.

(True or False) Arrow functions have their own <code>this</code> context.

(صواب أو خطأ) وظائف السهم لها خاصتها<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">this</code> سياق.

**(True or False)** Using `innerHTML` to update content is the safest way to handle DOM manipulation.

(True or False) Using <code>innerHTML</code> to update content is the safest way to handle DOM manipulation.

(صواب أو خطأ) باستخدام<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">innerHTML</code> يعد تحديث المحتوى هو الطريقة الأكثر أمانًا للتعامل مع التلاعب بـ DOM.

**(True or False)** Optional chaining (`?.`) throws an error if the property being accessed does not exist.

(True or False) Optional chaining (<code>?.</code>) throws an error if the property being accessed does not exist.

(صواب أو خطأ) التسلسل الاختياري (<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">?.</code> ) يلقي خطأ إذا كانت الخاصية التي يتم الوصول إليها غير موجودة.

**(True or False)** The `const` keyword prevents both reassignment and modification of the data inside objects or arrays.

(True or False) The <code>const</code> keyword prevents both reassignment and modification of the data inside objects or arrays.

(صحيح أو خطأ)<code style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">const</code> تمنع الكلمة الأساسية إعادة تعيين وتعديل البيانات داخل الكائنات أو المصفوفات.

What is the output of the following code?
```js
const arr = [1, 2, 3];
const result = arr.map(num => num * 2).filter(num => num > 3);
console.log(result);
```

What is the output of the following code?
<pre><code class="language-js">const arr = [1, 2, 3];
const result = arr.map(num =&gt; num * 2).filter(num =&gt; num &gt; 3);
console.log(result);
</code></pre>

ما هو إخراج الكود التالي؟<pre style=";text-align:right;direction:rtl"><code class="language-js" style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">const arr = [1, 2, 3];
const result = arr.map(num =&gt; num * 2).filter(num =&gt; num &gt; 3);
console.log(result);
</code></pre>

What will this code log?
```js
console.log(typeof null);
console.log(typeof []);
```

What will this code log?
<pre><code class="language-js">console.log(typeof null);
console.log(typeof []);
</code></pre>

ماذا سيسجل هذا الكود؟<pre style=";text-align:right;direction:rtl"><code class="language-js" style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">console.log(typeof null);
console.log(typeof []);
</code></pre>

What is the output of the following code?
```js
const arr = [10, 20, 30];
const newArr = [...arr, 40];
console.log(newArr);
```

What is the output of the following code?
<pre><code class="language-js">const arr = [10, 20, 30];
const newArr = [...arr, 40];
console.log(newArr);
</code></pre>

ما هو إخراج الكود التالي؟<pre style=";text-align:right;direction:rtl"><code class="language-js" style="text-align:right;direction:ltr;unicode-bidi:bidi-override;">const arr = [10, 20, 30];
const newArr = [...arr, 40];
console.log(newArr);
</code></pre>

Test your knowledge of JavaScript fundamentals for React.

اختبر معلوماتك حول أساسيات JavaScript لـ React.

JavaScript for React—A Quick Refresher

Introduction to React

React Components

Hooks: Managing States and Effects in React Components

React Router and Navigations

New Improvements in React 19

Conclusion

Quiz: JavaScript Fundamentals for React