The component encapsulate html elements nested

• -The component encapsulate HTML elements .

Nested elements
• <Component> text </Component>
• What you put between the tags will be passed to component as props.children .
• 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..
Using JavaScript expressions in JSX:
• JavaScript expression syntax looks like in JSX markup.
• JSX has a special syntax that allows you to embed JavaScript expressions.
• 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:

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.
• 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 object collection uses the same technique call Object.keys() and then map this array.
• No need to rely on imperative logic to control the UI .
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 ).
• React 16 introduces
the concept of
JSX fragments
.
• For example, a common approach is to have a react component return content wrapped
in a <div> element.
• Two versions of a component:
• One uses a wrapper element
• Uses the new fragment feature
• Let's compare the two approaches now ( WithoutFragments v.s WithFragments )
WithoutFragments WithFragments
wrap sibling elements in <div>. Using unnecessary tags
Essence of this component is the <h1> and <p> tags <Fragment> element is used.
DOM using browser dev tools. Children need to be rendered.
<div> add to another level of structure: Less HTML rendered
No need to use tags such as <div>
Week 10 End

Week 11
What is component state ?
• React components declare the structure of UI elements using JSX.
• State is the dynamic part of a React component. It declares the initial state of a component, which
changes over time .
• Whenever a React component needs to change its state , the component will automatically re-render
itself by calling render().
Creating and setting a component state:
• The JSX of this component depends on two state values: heading and content .
• The component is first rendered with its default state .