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

A CSS class that applies styles to HTML elements

A small, reusable piece of UI that can be combined to build complex interfaces

A configuration object used to set up Webpack for React

A placeholder for rendering server-side scripts

Which option best describes a React component?

<p>Which option best describes a React component?</p>


To store private, changeable data within a component

To pass data and configuration from a parent component to a child component

To handle user events like clicks and form submissions

To define global styling for the entire application

What is the primary purpose of props in React?

<p>What is the primary purpose of props in React?</p>


A method of writing inline styles using JavaScript objects directly in the component’s JSX

A global stylesheet approach that applies the same class names and rules across all components without isolation

A technique that scopes CSS locally to a component by generating unique class names, preventing style collisions

A built-in React feature that automatically converts all inline styles into CSS classes

<p>Which option best describes CSS modules?</p>


Using lowercase events like `onclick` and `onchange`

Using uppercase events like `ONCLICK` and `ONCHANGE`

Using camelCase events like `onClick` and `onChange`

By prefixing events with `data-` attributes

Managing its own internal state with `useState` or `this.setState()`

Using lifecycle methods like `componentDidMount` to handle side effects

Only receiving data and behavior through props, without holding internal state

Being defined only as a class component with a constructor

What is a stateless reusable component characterized by?

<p>What is a stateless reusable component characterized by?</p>


**(True or False)** React components must always have internal state to render properly.

<p><strong>(True or False)</strong> React components must always have internal state to render properly.</p>


**(True or False)** Props flow in a one-way direction, from parent components down to child components.

<p><strong>(True or False)</strong> Props flow in a one-way direction, from parent components down to child components.</p>


**(True or False)** Inline styles in React are defined as JavaScript objects, using camelCase property names.

<p><strong>(True or False)</strong> Inline styles in React are defined as JavaScript objects, using camelCase property names.</p>


**(True or False)** In React, calling `event.preventDefault()` inside an event handler stops the default browser action, such as form submission.

<p><strong>(True or False)</strong> In React, calling <code>event.preventDefault()</code> inside an event handler stops the default browser action, such as form submission.</p>


**(True or False)** A stateless reusable component cannot accept event handlers as props.

<p><strong>(True or False)</strong> A stateless reusable component cannot accept event handlers as props.</p>


`Hello, World!` in `<h1>` and below it `Welcome to React!` in `<p>`

An error because `Greeting` is not defined properly

What will be rendered by the following code?
```js
function Greeting() {
  return <p>Welcome to React!</p>;
}

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Greeting />
    </div>
  );
}
```

<p>What will be rendered by the following code?</p>
<pre><code class="language-js">function Greeting() {
  return &lt;p&gt;Welcome to React!&lt;/p&gt;;
}

function App() {
  return (
    &lt;div&gt;
      &lt;h1&gt;Hello, World!&lt;/h1&gt;
      &lt;Greeting /&gt;
    &lt;/div&gt;
  );
}
</code></pre>


An `<h2>` with `Alice` and a `<p>` with `alice@example.com`

An `<h2>` with `alice@example.com` and a `<p>` with `Alice`

What appears in the browser?
```js
function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.email}</p>
    </div>
  );
}

function App() {
  return <UserCard name="Alice" email="alice@example.com" />;
}
```

<p>What appears in the browser?</p>
<pre><code class="language-js">function UserCard(props) {
  return (
    &lt;div&gt;
      &lt;h2&gt;{props.name}&lt;/h2&gt;
      &lt;p&gt;{props.email}&lt;/p&gt;
    &lt;/div&gt;
  );
}

function App() {
  return &lt;UserCard name=&quot;Alice&quot; email=&quot;alice@example.com&quot; /&gt;;
}
</code></pre>


What is the appearance of the rendered `<h1>`?
```js
const style = { color: 'blue', backgroundColor: 'lightgray' };

function App() {
  return <h1 style={style}>Styled Heading</h1>;
}
```

<p>What is the appearance of the rendered <code>&lt;h1&gt;</code>?</p>
<pre><code class="language-js">const style = { color: 'blue', backgroundColor: 'lightgray' };

function App() {
  return &lt;h1 style={style}&gt;Styled Heading&lt;/h1&gt;;
}
</code></pre>


A console message is logged without a visible alert

An alert pops up with `Button was clicked!`

What happens when the user clicks the button?
```js
function App() {
  function handleClick() {
    alert('Button was clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}
```

<p>What happens when the user clicks the button?</p>
<pre><code class="language-js">function App() {
  function handleClick() {
    alert('Button was clicked!');
  }

  return &lt;button onClick={handleClick}&gt;Click Me&lt;/button&gt;;
}
</code></pre>


`Message shown!` logs to the browser console.

What happens when the `Show` button is clicked?
```js
function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

function App() {
  function showMessage() {
    console.log('Message shown!');
  }

  return <Button label="Show" onClick={showMessage} />;
}
```

<p>What happens when the <code>Show</code> button is clicked?</p>
<pre><code class="language-js">function Button(props) {
  return &lt;button onClick={props.onClick}&gt;{props.label}&lt;/button&gt;;
}

function App() {
  function showMessage() {
    console.log('Message shown!');
  }

  return &lt;Button label=&quot;Show&quot; onClick={showMessage} /&gt;;
}
</code></pre>


Test your understanding of React's components.

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 Components