React Developer -

Lesson 2 of 39

Lesson Progress: 0%

Lesson Incomplete

Lesson 2 of 39

Code Example

function StatusMessage() {
  const isLoading = false;

  return (
    <div>
      {isLoading ? <p>Loading...</p> : <p>Data loaded.</p>}
    </div>
  );
}

render(<StatusMessage/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This component shows one message or another based on a true-or-false value.
StatusMessage is a function component, which means it is a function that returns JSX to display on the screen.
isLoading ? Loading... : Data loaded. means "if isLoading is true, show Loading..., otherwise show Data loaded."
The are needed because they let us place JavaScript logic inside the JSX.

Code Example

function CheckIfLoggedIn() {
  const isLoggedIn = true;

  return (
    <div>
      <h2>Example 1</h2>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

render(<CheckIfLoggedIn/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This uses conditional rendering, which means the screen can show different things depending on a value.
CheckIfLoggedIn is a function declaration component, which means it is a named function that returns JSX.
isLoggedIn ? Welcome back! : Please log in. means if isLoggedIn is true, show Welcome back!, otherwise show Please log in.
The are needed because they let JavaScript code work inside the JSX.

Code Example

function CheckForNewMessages() {
  const hasMessages = false;

  return (
    <div>
      <h2>Example 2</h2>
      {hasMessages ? <p>You have new messages.</p> : <p>No new messages.</p>}
    </div>
  );
}

render(<CheckForNewMessages/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This uses conditional rendering, which means it can show different text depending on a true-or-false value.
CheckForNewMessages is a function declaration component, which means it is a named function that returns JSX to show on the page.
In the ternary expression, the ? means "if true, show this part" and the : means "otherwise, show this other part."
The are needed because they let us place JavaScript logic inside the JSX.

Code Example

const CheckIfLoggedIn = function () {
  const isLoggedIn = true;

  return (
    <div>
      <h2>Example 1</h2>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
};

render(<CheckIfLoggedIn/>);

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This uses conditional rendering, which means it can show different things depending on a true-or-false value.
CheckIfLoggedIn is a function expression component, which means a function is being stored inside a variable and used as a component.
In the ternary expression, the ? means "show this if the value is true" and the : means "otherwise show this other part."
The are needed because they let JavaScript logic work inside the JSX.

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This uses conditional rendering, which means the page can show different text based on a true-or-false value.
This is a function expression, so the function is being stored inside the CheckForNewMessages variable.
In the ternary expression, the ? means "show this part if the value is true" and the : means "otherwise show the other part."
The are needed because they let JavaScript logic go inside the JSX.

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This uses conditional rendering, which means the page can show different things depending on a true-or-false value.
This is an arrow function component, which is a shorter way to write a function component in JavaScript.
An arrow function uses the component name and the => arrow, instead of writing the word function.
isLoggedIn ? checks if isLoggedIn is true, and if it is, the first message will be shown.
The are needed because they let JavaScript logic go inside the JSX.

Instructions

▼ ← Click the triangle to hide or reveal instructions.

This uses conditional rendering, which means the page can show different things based on a true-or-false value.
This is an arrow function component, which is a short way to write a component in JavaScript.
An arrow function uses the component name and the => arrow, instead of using the word function.
hasMessages ? asks, "Is hasMessages true?" If it is, the first message will be shown.
The : means "otherwise," so it shows the second message when the value is false.
The word ternary means this expression has three parts: the check, the true result, and the false result.

Test Incomplete

Training Mode

Testing Mode

Random Order

What is the primary function of the StatusMessage component?

It manages user login sessions.It displays one specific message based on a true-or-false value.It handles database connections for the application.It formats JSON data for API requests.

Question #

1/15

Score

0/0 - 0.0 %

Code Example

const CheckForNewMessages = function () {
  const hasMessages = false;

  return (
    <div>
      <h2>Example 2</h2>
      {hasMessages ? <p>You have new messages.</p> : <p>No new messages.</p>}
    </div>
  );
};

render(<CheckForNewMessages/>);

Code Example

const CheckIfLoggedIn = () => {
  const isLoggedIn = true;

  return (
    <div>
      <h2>Example 1</h2>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
};

render(<CheckIfLoggedIn/>);

Code Example

const CheckForNewMessages = () => {
  const hasMessages = false;

  return (
    <div>
      <h2>Example 2</h2>
      {hasMessages ? <p>You have new messages.</p> : <p>No new messages.</p>}
    </div>
  );
};

render(<CheckForNewMessages/>);