An introduction to ReactJS

An introduction to ReactJS

Understanding JSX, displaying data and conditional rendering

What is JSX?

• JSX stands for JavaScript XML.

• It's a syntax extension for JavaScript often used with React.

Why JSX?

Advantages of JSX

• Combines HTML and JavaScript.

• Easy to read and write.

• Provides a way to define React elements.

JSX Elements

Basic structure of JSX elements.

function App() {

  return (

    <div>

      <h1>Hello, React!</h1>

    </div>

  );

}

const world = "React!";
function App() {

  return (
<div>

    <h2>Hello, {world}!</h2>
</div>

  );

}

Embedding Expressions

The combination of HTML (<div> and <h2>) with JSX ({world}) demonstrates how you can easily integrate both HTML elements and JavaScript variables, resulting in a greeting message that's customized based on the value of the world variable

const message = "Hello React!";
function App() {

  return (
<div>

    <h2>{message}</h2>
<p>{user.name}</p>
</div>

  );

}

Expressions - Variables

​JSX allows you to seamlessly integrate HTML markup with JavaScript.
By using curly braces, it allows you to incorporate JavaScript variables from your code and present them to the user.

Adding Style

In React, you specify a CSS class with className. It works the same way as the HTML class attribute:
const world = "React!";
function App() {

  return (
<div>

    <h2 className="title">Hello, {world}!</h2>
</div>

  );

}

Conditional rendering

In React, you can use an 'if' statement to conditionally include JSX elements:

const isLoggedIn = false;

let message;

if (isLoggedIn) { message = 'Welcome back!'; }
else { message = 'Hi! Great to know you!'; }

function App() {

return (

<div>

<h2>{message}</h2>

</div>

);}

Conditional rendering

Using Conditional (ternary) operator (Recommended)

const isLoggedIn = false;

function App() {

return (

<div>

<h2>{isLoggedIn ? ( 'Welcome back!' ) : ( 'Hi! Great to know you!' )}</h2>

</div>

);}

Rendering Lists

You can loop through a list and display them easily (using Array.prototype.map)

const numbers = [1, 2, 3, 4, 5];

function App() {

return (

<div>

<ul>

{numbers.map(number => <li key={number}>{number}</li>)}

</ul>

</div>

);}

Multiple Choice

What does JSX stand for in React?

• JavaScript Extensible Language

• JavaScript XML

• JavaScript Syntax Extension

• JavaScript Execution

Multiple Choice

In JSX, how would you embed the result of a JavaScript expression within a paragraph element?

• <p>5 + 5</p>

• <p>${5 + 5}</p>

• <p>{5 + 5}</p>

• <p>@{5 + 5}</p>

Multiple Choice

Which of the following represents a valid JSX element?

• <h1>Hello, World!</h2>

• <div className="container">Content</div>

• let element = <p>Sample Text</p>;

• function renderElement() { return <span>Text</span>; }

Multiple Choice

In JSX, how would you embed a variable within a paragraph element?

• <p><variableName /></p>

• <p>variable.name</p>

• <p>variableName</p>

• <p>{variableName}</p>

Multiple Choice

Which code snippet demonstrates conditional rendering in React using JSX?

• return isLogged ? <p>Welcome!</p> : null

• {isLogged ? <p>Welcome!</p> : <p>Please log in.</p>}

• if (isLogged) {

  return <p>Welcome!</p>;

  } else {

  return <p>Please log in.</p>;

  }

• {isLogged ? return <p>Welcome!</p> : return <p>Please log in.</p>}

Multiple Choice

In React, what method is commonly used to render a list of items, such as an array of names, as a series of <li> elements in JSX?

• Using a for loop in JSX

• Embedding a switch statement within JSX

• Using map to transform the array into JSX elements

• Manually writing each <li> element in JSX

Multiple Choice

You have an array of numbers, and you want to display only the even numbers using React. Which code snippet correctly accomplishes this?

• <ul>

  {numbers.map((number) => {

  if (number % 2 === 0) {

  return <li key={number}>{number}</li>; } })}

  </ul>

• <ul>

  {numbers.map((number) => (

  <li key={number}>{number % 2 == 0 ? number : null}</li>

  )}

  </ul>

• <ul>

  {numbers.loop((number) => {

  if (number % 2 !== 0) {

  return null;

  }

  return <li key={number}>{number}</li>;

  })}

  </ul>

• <ul>

  {numbers.map((number) => (

  <li key={number}>{number % 2 == 0 ? null : number}</li>

  )}

  </ul>

Summary

In this lesson, you have learnt:

• What is JSX?

• Why do we use JSX in React?

• JSX Components and Elements

• Incorporating Expressions and Variables in JSX

• Applying Styling to JSX Elements

• Conditional Display in React Components with Ternary Operators

• Displaying Arrays as Lists of Elements in React Components