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

To handle side effects in functional components

What is the primary purpose of the `useState` hook in React?

<p>What is the primary purpose of the <code>useState</code> hook in React?</p>


Which dependency array will cause a `useEffect` hook to run only once when the component mounts?

<p>Which dependency array will cause a <code>useEffect</code> hook to run only once when the component mounts?</p>


It updates the value without triggering a re-render.

What happens if we use `useRef` to store a mutable value and update it?

<p>What happens if we use <code>useRef</code> to store a mutable value and update it?</p>


For passing data deep into the component tree.

For sharing data between sibling components.

To avoid passing props manually at every level.

**(Select all that apply.)** When should we use `useContext` instead of prop drilling?

<p><strong>(Select all that apply.)</strong> When should we use <code>useContext</code> instead of prop drilling?</p>


What does the `useMemo` hook primarily optimize in React?

<p>What does the <code>useMemo</code> hook primarily optimize in React?</p>


**(True or False)** `useState` can be used to store mutable values without triggering re-renders.

<p><strong>(True or False)</strong> <code>useState</code> can be used to store mutable values without triggering re-renders.</p>


**(True or False)** The `useEffect` hook is always executed after the DOM updates.

<p><strong>(True or False)</strong> The <code>useEffect</code> hook is always executed after the DOM updates.</p>


**(True or False)** The `useContext` hook is required for sharing data between components without using a provider.

<p><strong>(True or False)</strong> The <code>useContext</code> hook is required for sharing data between components without using a provider.</p>


**(True or False)** `useRef` is a suitable alternative for state if we do not want re-renders.

<p><strong>(True or False)</strong> <code>useRef</code> is a suitable alternative for state if we do not want re-renders.</p>


If the button is clicked twice, what will `count` display?
```js
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>{count}</p>
    </div>
  );
}
```

<p>If the button is clicked twice, what will <code>count</code> display?</p>
<pre><code class="language-js">import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    &lt;div&gt;
      &lt;button onClick={() =&gt; setCount(count + 1)}&gt;Increment&lt;/button&gt;
      &lt;p&gt;{count}&lt;/p&gt;
    &lt;/div&gt;
  );
}
</code></pre>


What happens when the dependency array is omitted in `useEffect`?
```js
useEffect(() => {
  console.log('Effect ran');
});
```

<p>What happens when the dependency array is omitted in <code>useEffect</code>?</p>
<pre><code class="language-js">useEffect(() =&gt; {
  console.log('Effect ran');
});
</code></pre>


If `num` changes from 5 to 6, how many times will “Calculation performed” be logged?
```js
import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => num * 2, [num]);
  console.log('Calculation performed');
  return <p>{result}</p>;
}
```

<p>If <code>num</code> changes from 5 to 6, how many times will “Calculation performed” be logged?</p>
<pre><code class="language-js">import React, { useMemo } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() =&gt; num * 2, [num]);
  console.log('Calculation performed');
  return &lt;p&gt;{result}&lt;/p&gt;;
}
</code></pre>


What will the following code render for `textRef.current` after the button click?
```js
import React, { useRef } from 'react';

function InputRefExample() {
  const textRef = useRef();
  return (
    <div>
      <input ref={textRef} type="text" />
      <button onClick={() => (textRef.current.value = 'Hello')}>
        Set Value
      </button>
    </div>
  );
}
```

<p>What will the following code render for <code>textRef.current</code> after the button click?</p>
<pre><code class="language-js">import React, { useRef } from 'react';

function InputRefExample() {
  const textRef = useRef();
  return (
    &lt;div&gt;
      &lt;input ref={textRef} type=&quot;text&quot; /&gt;
      &lt;button onClick={() =&gt; (textRef.current.value = 'Hello')}&gt;
        Set Value
      &lt;/button&gt;
    &lt;/div&gt;
  );
}
</code></pre>


What happens when the following code is executed?
```js
const [count, setCount] = useState(0);
useEffect(() => {
  setCount(count + 1);
}, [count]);
```

<p>What happens when the following code is executed?</p>
<pre><code class="language-js">const [count, setCount] = useState(0);
useEffect(() =&gt; {
  setCount(count + 1);
}, [count]);
</code></pre>


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: React Hooks