Learn React step by step in this beginner-friendly course, mastering components, hooks, and routing to build dynamic and scalable web applications.

React is a popular library for building modern web applications, known for its efficiency and simplicity. This course will help you understand React’s core features, like components, hooks, and routing, to create dynamic, scalable, and user-friendly applications. Whether new to React or enhancing your skills, this course offers a structured approach to building React-based projects.

After a quick refresher on JavaScript fundamentals, you’ll explore React concepts such as component-based architecture, JSX syntax, state management using hooks, and navigation with React Router. With interactive coding examples, practice exercises, and chapter-end challenges, you’ll reinforce your learning through hands-on experience.

By the end of this course, you’ll have the confidence and necessary skills to create practical web applications with React and pursue advanced topics in React development.

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>?

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>

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?

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.

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

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

**(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.

**(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.

**(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.

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>

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>

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>

Test your knowledge of JavaScript fundamentals for React.

Before We Begin

JavaScript for React—A Quick Refresher

Introduction to React

React Components

Hooks: Managing States and Effects in React Components

React Router and Navigations

Conclusion

Quiz: JavaScript Fundamentals for React