Start your React journey with this beginner-friendly roadmap, mastering components, hooks, and routing to build dynamic and scalable web applications.

Master the way modern UIs are built—with React.

From dashboards to mobile-first apps, React is behind many of today’s most scalable interfaces. This customizable path teaches React through practical examples and hands-on challenges, helping you build a strong foundation in real-world development techniques.

You’ll go beyond syntax to understand how React updates the DOM, manages state, and handles user interaction. Build components you can reuse. Learn JSX, hooks, routing, and the new features in React 19 that improve performance and simplify code.

Whether you’re building your first React app or optimizing your team’s frontend, this roadmap gives you the structure, examples, and skills to do it right.

Learn React

It removes the need for `useRef` altogether.

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

It forces all refs to be named `refProp`.

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

What best describes the advantage of using <code>ref</code> as a prop in React 19?

When the component unmounts or the ref changes

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

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

The component is ignored and a warning is thrown.

The component is rendered outside the tree.

The return value of the component becomes the context value.

The context becomes unusable in children.

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

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

It is rendered in the body as part of the visible DOM.

It is ignored and must still be set with `document.title`.

React moves it into the `<head>` automatically.

In React 19, how is the `<title>` tag handled when declared in a component?

In React 19, how is the <code>&lt;title&gt;</code> tag handled when declared in a component?

Scripts are always placed at the bottom of the body.

Scripts with `async` or `defer` are injected into `<head>` and cleaned up on unmount.

Scripts are run twice for hydration safety.

Scripts cannot be removed after being inserted.

Which script-related behavior is correctly handled by React 19’s declarative `<script>` support?

Which script-related behavior is correctly handled by React 19’s declarative <code>&lt;script&gt;</code> support?

**(True or False)** Passing a ref as a prop in React 19 still requires the use of `forwardRef`.

(True or False) Passing a ref as a prop in React 19 still requires the use of <code>forwardRef</code>.

**(True or False)** In React 19, cleanup functions returned from a ref callback can fully replace the need for `useEffect` in some cases.

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

**(True or False)** In React 19, you can use a functional component directly as a context provider’s `value`.

(True or False) In React 19, you can use a functional component directly as a context provider’s <code>value</code>.

**(True or False)** React 19 supports setting document metadata like `<title>` and `<meta>` by directly writing them inside JSX.

(True or False) React 19 supports setting document metadata like <code>&lt;title&gt;</code> and <code>&lt;meta&gt;</code> by directly writing them inside JSX.

**(True or False)** React 19’s support for `<script>` in JSX only works for inline scripts,. not external sources.

(True or False) React 19’s support for <code>&lt;script&gt;</code> in JSX only works for inline scripts,. not external sources.

An error will be thrown because `ref` must be called `ref`.

The `ref` will be correctly attached to the input element.

What happens when this component is rendered?
```jsx
function App() {
 const inputRef = useRef();
 return <FancyInput inputRef={inputRef} />;
}

function FancyInput({ inputRef }) {
 return <input ref={inputRef} />;
}

export default App
```

What happens when this component is rendered?
<pre><code class="language-jsx">function App() {
 const inputRef = useRef();
 return &lt;FancyInput inputRef={inputRef} /&gt;;
}

function FancyInput({ inputRef }) {
 return &lt;input ref={inputRef} /&gt;;
}

export default App
</code></pre>

The interval will be cleared automatically.

The cleanup will only happen if `useEffect` is used.

What happens when the component unmounts?
```jsx
function App() {
 return (
 <div
 ref={(node) => {
 if (!node) return;
 const id = setInterval(() => console.log('Running'), 1000);
 return () => clearInterval(id);
 }}
 >
 Running task...
 </div>
 );
}
```

What happens when the component unmounts?
<pre><code class="language-jsx">function App() {
 return (
 &lt;div
 ref={(node) =&gt; {
 if (!node) return;
 const id = setInterval(() =&gt; console.log('Running'), 1000);
 return () =&gt; clearInterval(id);
 }}
 &gt;
 Running task...
 &lt;/div&gt;
 );
}
</code></pre>

What is rendered for the following?
```jsx
function RoleValue() {
 return 'admin';
}

function App() {
 return (
 <RoleContext.Provider value={<RoleValue />}>
 <Dashboard />
 </RoleContext.Provider>
 );
}

function Dashboard() {
 const role = useContext(RoleContext);
 return {role};
}
```

What is rendered for the following?
<pre><code class="language-jsx">function RoleValue() {
 return 'admin';
}

function App() {
 return (
 &lt;RoleContext.Provider value={&lt;RoleValue /&gt;}&gt;
 &lt;Dashboard /&gt;
 &lt;/RoleContext.Provider&gt;
 );
}

function Dashboard() {
 const role = useContext(RoleContext);
 return &lt;p&gt;{role}&lt;/p&gt;;
}
</code></pre>

They will be injected into the document `<head>`.

What happens when this component is rendered?
```jsx
function Page() {
 return (
 <>
 <title>My Page</title>
 <meta name="description" content="Welcome to My Page" />
 </>
 );
}
```

What happens when this component is rendered?
<pre><code class="language-jsx">function Page() {
 return (
 &lt;&gt;
 &lt;title&gt;My Page&lt;/title&gt;
 &lt;meta name=&quot;description&quot; content=&quot;Welcome to My Page&quot; /&gt;
 &lt;/&gt;
 );
}
</code></pre>

Script will load asynchronously and clean up on unmount.

What happens during execution?
```jsx
function ScriptLoader() {
 return (
 <>
 <script src="https://example.com/widget.js" async />
 Widget Loaded
 </>
 );
}
```

What happens during execution?
<pre><code class="language-jsx">function ScriptLoader() {
 return (
 &lt;&gt;
 &lt;script src=&quot;https://example.com/widget.js&quot; async /&gt;
 &lt;p&gt;Widget Loaded&lt;/p&gt;
 &lt;/&gt;
 );
}
</code></pre>

Test your understanding of React 19 improvements.

اختبر مدى فهمك لتحسينات React 19.

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

New Improvements in React 19

Conclusion

Build a Doctor Appointment Booking System Using the MERN Stack

Quiz: React 19 Improvements