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

Parent routes automatically render all their child routes.

Child routes must have a unique `path` relative to the root route.

The `Outlet` component is required for rendering nested routes in the parent component.

Child routes must be defined using the `NavLink` component.

Which statement about nested routes in React Router is correct?

<p>Which statement about nested routes in React Router is correct?</p>


It replaces the current entry in the browser history stack.

It prevents navigation to the specified route.

It appends the specified route to the current URL.

It disables the browser’s back button functionality.

How does the `useNavigate` hook behave when used with the `replace: true` option?

<p>How does the <code>useNavigate</code> hook behave when used with the <code>replace: true</code> option?</p>


It automatically applies styles to active links.

Which statement is true about `NavLink` in React Router?

<p>Which statement is true about <code>NavLink</code> in React Router?</p>


To catch undefined paths and render a fallback component.

To navigate between components programmatically.

What is the purpose of a wildcard route (`*`) in React Router?

<p>What is the purpose of a wildcard route (<code>*</code>) in React Router?</p>


React Router renders the first route and ignores the second.

React Router alternates between the two routes.

React Router renders both routes in sequence.

What happens if we define two `<Route>` components with the same `path` but different elements?

<p>What happens if we define two <code>&lt;Route&gt;</code> components with the same <code>path</code> but different elements?</p>


**(True or False)** The `useParams` hook allows access to dynamic parameters in the URL.

<p><strong>(True or False)</strong> The <code>useParams</code> hook allows access to dynamic parameters in the URL.</p>


**(True or False)** The `useNavigate` hook is used only for navigating back in history.

<p><strong>(True or False)</strong> The <code>useNavigate</code> hook is used only for navigating back in history.</p>


**(True or False)** React Router allows defining a 404 page using the `path="*"` wildcard route.

<p><strong>(True or False)</strong> React Router allows defining a 404 page using the <code>path=&quot;*&quot;</code> wildcard route.</p>


**(True or False)** A `Link` component automatically handles dynamic URL parameters without requiring the `useParams` hook.

<p><strong>(True or False)</strong> A <code>Link</code> component automatically handles dynamic URL parameters without requiring the <code>useParams</code> hook.</p>


**(True or False)** The `Routes` component is necessary to group multiple `Route` components in React Router.

<p><strong>(True or False)</strong> The <code>Routes</code> component is necessary to group multiple <code>Route</code> components in React Router.</p>


What will be displayed when visiting `/about` in the following code?
```js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const App = () => (
  <Router>
    <Routes>
      <Route path="/" element={<h1>Home page</h1>} />
      <Route path="*" element={<h1>404 Page not found</h1>} />
    </Routes>
  </Router>
);
```

<p>What will be displayed when visiting <code>/about</code> in the following code?</p>
<pre><code class="language-js">import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const App = () =&gt; (
  &lt;Router&gt;
    &lt;Routes&gt;
      &lt;Route path=&quot;/&quot; element={&lt;h1&gt;Home page&lt;/h1&gt;} /&gt;
      &lt;Route path=&quot;*&quot; element={&lt;h1&gt;404 Page not found&lt;/h1&gt;} /&gt;
    &lt;/Routes&gt;
  &lt;/Router&gt;
);
</code></pre>


Displays an alert saying `You have logged out`.

Throws an error: `navigate is not defined`.

What happens when you click “Logout” in the following component?
```js
const Dashboard = () => {
  const navigate = useNavigate();
  return (
    <div>
      <h1>Dashboard</h1>
      <button onClick={() => navigate('/')}>Logout</button>
    </div>
  );
};
```

<p>What happens when you click “Logout” in the following component?</p>
<pre><code class="language-js">const Dashboard = () =&gt; {
  const navigate = useNavigate();
  return (
    &lt;div&gt;
      &lt;h1&gt;Dashboard&lt;/h1&gt;
      &lt;button onClick={() =&gt; navigate('/')}&gt;Logout&lt;/button&gt;
    &lt;/div&gt;
  );
};
</code></pre>


What is the output when navigating to `/products/` in this code?
```js
// Product Component
const Product = () => {
  const { id } = useParams(); // Extract the "id" parameter from the URL
  return <h1>Product ID: {id || 'No ID provided'}</h1>;
};

// App Component
const App = () => (
  <Router>
    <Routes>
      <Route path="/products/:id" element={<Product />} /> {/* Route for dynamic product ID */}
      <Route path="/products/" element={<Product />} /> {/* Route without a product ID */}
    </Routes>
  </Router>
);
```

<p>What is the output when navigating to <code>/products/</code> in this code?</p>
<pre><code class="language-js">// Product Component
const Product = () =&gt; {
  const { id } = useParams(); // Extract the &quot;id&quot; parameter from the URL
  return &lt;h1&gt;Product ID: {id || 'No ID provided'}&lt;/h1&gt;;
};

// App Component
const App = () =&gt; (
  &lt;Router&gt;
    &lt;Routes&gt;
      &lt;Route path=&quot;/products/:id&quot; element={&lt;Product /&gt;} /&gt; {/* Route for dynamic product ID */}
      &lt;Route path=&quot;/products/&quot; element={&lt;Product /&gt;} /&gt; {/* Route without a product ID */}
    &lt;/Routes&gt;
  &lt;/Router&gt;
);
</code></pre>


Throws an error: `navigate is not defined`

What happens when we click `Signup` without entering an email?
```js
const Signup = () => {
  const [email, setEmail] = useState('');
  const navigate = useNavigate();

  const handleSignup = () => {
    if (email) {
      navigate('/profile');
    } else {
      alert('Please enter an email!');
    }
  };

  return <button onClick={handleSignup}>Signup</button>;
};
```

<p>What happens when we click <code>Signup</code> without entering an email?</p>
<pre><code class="language-js">const Signup = () =&gt; {
  const [email, setEmail] = useState('');
  const navigate = useNavigate();

  const handleSignup = () =&gt; {
    if (email) {
      navigate('/profile');
    } else {
      alert('Please enter an email!');
    }
  };

  return &lt;button onClick={handleSignup}&gt;Signup&lt;/button&gt;;
};
</code></pre>


What do we get when we click `About` in the code below?
```js
import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => (
  <Router>
    <nav>
      <NavLink to="/" className={({ isActive }) => (isActive ? "active" : "")}>
        Home
      </NavLink>
      <NavLink to="/about">
        About
      </NavLink>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  </Router>
);

export default App;
```

<p>What do we get when we click <code>About</code> in the code below?</p>
<pre><code class="language-js">import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';

const Home = () =&gt; &lt;h1&gt;Home Page&lt;/h1&gt;;
const About = () =&gt; &lt;h1&gt;About Page&lt;/h1&gt;;

const App = () =&gt; (
  &lt;Router&gt;
    &lt;nav&gt;
      &lt;NavLink to=&quot;/&quot; className={({ isActive }) =&gt; (isActive ? &quot;active&quot; : &quot;&quot;)}&gt;
        Home
      &lt;/NavLink&gt;
      &lt;NavLink to=&quot;/about&quot;&gt;
        About
      &lt;/NavLink&gt;
    &lt;/nav&gt;
    &lt;Routes&gt;
      &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
    &lt;/Routes&gt;
  &lt;/Router&gt;
);

export default App;
</code></pre>


Test your understanding of React Router and navigation.

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 Router and Navigation