‫الجامعة السعودية االلكترونية‬

‫الجامعة السعودية االلكترونية‬

‫‪26/12/2021‬‬
College of Computing and
Informatics
Bachelor of Science in Computer
Science
IT487
Mobile Application Development
IT487
Mobile Application Development

Module 8
Rendering with JSX
Contents
1.Your first JSX content
2.Rendering HTML
3.Describing UI structures
4.Creating your own JSX elements
5.Using JavaScript expressions
6.Fragments of JSX
Weekly Learning
Outcomes
1. Explain the basics of JSX, including its declarative structure,
which leads to more maintainable code
2. Explain the Fragments of JSX
Required Reading
1. Chapter 2 (React and React Native: A complete
hands-on guide to modern web and mobile
development with React.js,3rd Edition, 2020, Adam
Boduch, Roy Derks)

Recommended Reading
Introducing JSX: https:/ / reactjs. org/ docs/ introducing-
jsx. Html

Fragments: https:/ / reactjs. org/ docs/ fragments. html

First JSX content
First JSX content
• Here's your first JSX application:
React tool: codesandbox

Hello, JSX

1: import React component from ‘react’ package.

2: import render method/function from react-dom package.
3: Render function is used to return the JSX code which you want to display as a component in webpage.
• The purpose of the function is to display the specified JSX code inside the specified DOM element of
HTML which has the id=root.
• The render() function takes JSX (HTML markup)” as the first argument and renders it to the DOM node
passed as the second argument.
• -The actual JSX content in this example renders a paragraph with some bold text inside; Hello, JSX.
• -Remember: The JSX itself is usually HTML markup, mixed with custom tags for React components.
• -document.getElementById('root’): Render the whole React app into the DOM element with id=root.
• -The render() function tells React to take your JSX markup and transform it into JavaScript statements
that update the UI in the most efficient way possible.
• -React has unique conventions that should be followed when using HTML tags.
Rendering HTML
Rendering HTML
• At the end of the day, the job of a React component
is to render JSX (HTML/XML) into the DOM browser.
• JSX has support for HTML tags.
• Any HTML tag can be rendered in JSX to get the
expected output.
• *When rendering JSX, element tags reference React
components.
• *React comes with HTML components.
• *<div> tag is surrounded by a group of all the other
tags as its children React needs a root component
to render.
• *HTML elements rendered using JSX closely follow
regular HTML element syntax with a few subtle
differences regarding case sensitivity and attributes.
HTML tag conventions
• Tag names are case sensitive and non-HTML elements are capitalized.
• Here's an example that illustrates these ideas:
• This example will fail to compile because React doesn't know about the <Button> element; it only knows about <button>.
• Any valid HTML tags can be used as JSX tags.
• HTML tags can be used to describe the structure of your page content.
• *Easy to scan the markup and spot the built-in HTML elements.
• *Can also pass HTML elements any of their standard properties, a warning about the unknown
property is logged.
Describing UI structures
Describing UI structures
• JSX is capable of
describing screen
elements in a way that
ties them together to
form a complete UI
structure.
• Let's look at some JSX
markup that declares a
more elaborate structure
than a single paragraph:
→Describing UI structures
• This JSX markup describes some fairly sophisticated UI structure. Yet, it's easier
to read than imperative code because it's XML, and XML is good for concisely
expressing a hierarchical structure. This is how we want to think of our UI when it
needs to change, not as an individual element or property.
• There are a lot of semantic elements in this markup describing the structure of the
UI.
• For example, the <header> element describes the top part of the page where
the title is, and the <main> element describes where the main page content
goes.
• This type of complex structure makes it clearer for developers to reason about.
But before we start implementing dynamic JSX markup, let's create some of our
own JSX components.
Creating your own JSX components
Creating your own React/JSX components
• React class components have
a render() method. This method
should return some React elements
created with JSX.
• -Components are the fundamental
building blocks of React.
• -Components are the vocabulary of
JSX markup.
• -Create new JSX elements to
encapsulate larger structures.
• -Custom tag can be used.
• -The React component returns the
JSX that goes where the tag is used.
• -The component encapsulate HTML
elements.
• -Let's look at the following example:
→ Creating your own React/JSX components
• This is the first React component.
• Create new React/JSX components  by creating a class called MyComponent,
which extends the Component class from React.
• Rendering a <MyComponent> component.
• The HTML that this component encapsulates is returned by the render() method.
• In this case, when the JSX <MyComponent> is rendered by react-dom, it's
replaced by a <section> element, and everything within it.
• In the preceding example, the MyComponent class was declared in the same
scope as the call to render(), so everything worked as expected.
• Import components, adding them to the appropriate scope.
• HTML elements such as <div> often take nested child elements.
Nested elements

• Importing two of own React components: MySection and

MyButton.
• In this example, the button text: “My Button Text” is a child
of MyButton component, which is, in turn, a child of
MySection component.
• <Component>text</Component>
• What you put between the tags will be passed to
component as props.children.
→ Nested elements
• JSX markup is useful for describing UI structures that have parent-child
relationships.
• Child elements are created by nesting them within another component: the
parent.
• For example, a <li> tag is only useful as the child of a <ul> tag or a <ol> tag
• Can make similar nested structures with your own React components.
• Use the children property.
• Here's the JSX markup:
→ Nested elements
• Importing two of own React components: MySection and MyButton.
• <MyButton> is a child of <MySection>.
• The MyButton component accepts text as its child, instead of more JSX elements.
→ Nested elements
• This component renders a standard <section> HTML element, a heading, and
then {this.props.children}. It's this last piece that allows components to access
nested elements or text, and to render them.
• The two braces used in the preceding example are used for JavaScript
expressions.
• More details of the JavaScript expression syntax found in JSX markup in the
following section.
• Look at the MyButton component:
→ Nested elements
• This component uses the exact same pattern as MySection; take the
{this.props.children} value and surround it with markup. React handles the details.
• In this example, the button text is a child of MyButton, which is, in turn, a child of
MySection.
• However, the button text is transparently passed through MySection.
• Not required to write any code in MySection to make sure that MyButton got its
text .
• Here's what the rendered output looks like:

• Components can be organized by placing them within a namespace.

Using JavaScript expressions
Using JavaScript expressions in JSX
• JavaScript expression syntax looks like in JSX markup:
• Anything that is a valid JavaScript expression, including nested JSX, can go in between
the braces: { }.
• For properties and text, this is often a variable name or object property.
• In this example, the !enabled expression computes a Boolean value.
• Rendered output looks like:
→ Using JavaScript expressions in JSX
• JSX has a special syntax that allows you to embed JavaScript expressions.
• Any time React renders JSX content, expressions in the markup are evaluated.
• This is the dynamic aspect of JSX,
• How to use expressions to set property values and element text content.
• How to map collections of data to JSX elements.

→ Dynamic property values and text

• Some HTML property or text values are static don't change as JSX markup is re-
rendered.
• Other values, the values of properties or text, are based on data that is found
elsewhere in the application. Remember, React is just the view layer.
Mapping collections to elements
• The best way to dynamically control JSX elements is to map them from a collection
(Arrays, Objects). Let's look at an example of how this is done:

• The map() function lets

you manipulate the items
in an array/object by
iterating and accessing
individual items.
• To use the map() function,
attach it to an array/object
you want to iterate over.
→ Mapping collections to elements
• The first collection is an array called array, populated with string values.
• Moving down to the JSX markup, you can see the call to array.map(), which returns
a new array.
• The mapping function is actually returning a JSX element (<li>), meaning that each item in the
array is now represented in the markup.
• The result of evaluating this expression is an array
• The object collection uses the same techniquecall Object.keys() and then map
this array.
• Can control the structure of React components based on the collected data.
• No need to rely on imperative logic to control the UI.
→ Mapping collections to elements
• Here's what the rendered output looks like:
• JavaScript expressions bring JSX content to life.
• React evaluates expressions and updates the HTML content
based on what has already been rendered and what has
changed.
• Understanding how to utilize these expressions is important
because they're one of the most common day-to-day
activities of any React developer
Fragments of JSX
Fragments of JSX
• Fragments are a way to group together chunks of markup (children) without having to
add unnecessary structure to your page (extra node to DOM tree).

<div> does nothing but add use fragments to avoid

another level of structure unnecessary tags; <div>.
→ Fragments of JSX
• React 16 introduces the concept of JSX fragments.
• Fragments are a way to group together chunks of markup (children)
without having to add unnecessary structure to your page (extra node to
DOM tree).
• For example, a common approach is to have a react component return
content wrapped in a <div> element.
• This element serves no real purpose and adds clutter to the DOM.
• Two versions of a component:
• One uses a wrapper element
• Uses the new fragment feature
→ Fragments of JSX

• The two elements rendered are <WithoutFragments> and

<WithFragments>. Here's what they look like when rendered:

• Let's compare the two approaches now.

→ WithoutFragments: Using wrapper elements
• The first approach is to wrap sibling elements in <div>. Here's what the
source looks like:
→ WithoutFragments: Using wrapper elements
• The essence of this component is the <h1> and <p> tags.
• to return them from render()  wrap them with <div>.
• inspecting the DOM using browser dev tools reveals that <div> add
another level of structure:
→ WithFragments: Using fragments
• Now, let's take a look at the With Fragments component, where we have
avoided using unnecessary tags:
→ WithFragments: Using fragments
• Instead of wrapping the component content in <div>, the <Fragment> element is
used.
• This is a special type of element that indicates that only its children need to be
rendered.
• With the advent of fragments in JSX markupless HTML rendered on the page
• No need to use tags such as <div> for the sole purpose of grouping elements
together.
• when a component renders a fragment, React knows to render the event's child
element wherever the component is used.
Thank
You