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 apps. Whether new to React or sharpening your skills, the course offers a structured path to building React-based projects.

You’ll start with a quick JavaScript refresher, then dive into component architecture, JSX syntax, state management with hooks, and navigation using React Router. In the final chapter, you’ll explore new React 19 features that simplify styling, metadata handling, and script loading. With hands-on examples, practice exercises, and challenges, you’ll build real-world skills through experience.

By the end, you’ll be confident using React to build practical applications and ready to pursue more advanced topics.

Learn React

It removes the need for `useRef` altogether

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

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

Which of the following 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 is this function executed by React?

When using a cleanup function in a ref callback, when is this function executed by React?

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

Which of the following statements is true about using a component as a context value in React 19?

Which of the following statements 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)** Cleanup functions returned from a ref callback in React 19 can fully replace the need for `useEffect` in some cases.

(True or False) Cleanup functions returned from a ref callback in React 19 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 and not external sources.

(True or False) React 19’s support for <code>&lt;script&gt;</code> in JSX only works for inline scripts and 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 will be rendered?
```jsx
function RoleValue() {
 return 'admin';
}

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

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

What will be rendered?
<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.

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

Quiz: React 19 Improvements