# JSX In-Depth

> Fundamentally, JSX just provides syntactic sugar for the

<MyButton color="blue" shadowSize={2}>

React.createElement(
MyButton,
{color: 'blue', shadowSize: 2},
'Click Me'
)

<div className="sidebar" />

React.createElement(
'div',
{className: 'sidebar'}

# Specifying The React Element Type

> The first part of a JSX tag determines the type of the React element.

> Capitalized types indicate that the JSX tag is referring to a React
component.

> These tags get compiled into a direct reference to the named variable, so
if you use the JSX <Foo /> expression, Foo must be in scope.

# React Must Be in Scope

> Since JSX compiles into calls to React.createElement, the React library
must also always be in scope from your JSX code.

> or example, both of the imports are necessary in this code, even though
React and CustomButton are not directly referenced from JavaScript:

import React from 'react';

import CustomButton from './CustomButton';

function WarningButton() {
// return React.createElement(CustomButton, {color: 'red'}, null);
return <CustomButton color="red" />;
}

> If you don’t use a JavaScript bundler and loaded React from a <script>
tag, it is already in scope as the React global.

# Using Dot Notation for JSX Type

> You can also refer to a React component using dot-notation from within
JSX.

> This is convenient if you have a single module that exports many React
components.

import React from 'react';

const MyComponents = {
DatePicker: function DatePicker(props) {
return <div>Imagine a {props.color} datepicker here.</div>;
}
}

function BlueDatePicker() {
return <MyComponents.DatePicker color="blue" />;
}

# User-Defined Components Must Be Capitalized

> When an element type starts with a lowercase letter, it refers to a

> Types that start with a capital letter like <Foo /> compile to
React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.

# Choosing the Type at Runtime

> You cannot use a general expression as the React element type.

> If you do want to use a general expression to indicate the type of the
element, just assign it to a capitalized variable first.

> This often comes up when you want to render a different component based
on a prop:

import React from 'react';

const components = {
photo: PhotoStory,
video: VideoStory
};

function Story(props) {
// Wrong! JSX type can't be an expression.
return <components[props.storyType] story={props.story} />;
}

// To fix this, we will assign the type to a capitalized variable first:

import React from 'react';

const components = {
photo: PhotoStory,
video: VideoStory
 };

function Story(props) {
// Correct! JSX type can be a capitalized variable.
const SpecificStory = components[props.storyType];
return <SpecificStory story={props.story} />;
}

# Props in JSX

> There are several different ways to specify props in JSX.

> JavaScript Expressions as Props

<MyComponent foo={1 + 2 + 3 + 4} />

> String Literals

<MyComponent message="hello world" />

> Props Default to “True”

> If you pass no value for a prop, it defaults to true. These two JSX
expressions are equivalent:

<MyTextBox autocomplete />

<MyTextBox autocomplete={true} />

> Spread Attributes

> If you already have props as an object, and you want to pass it in
JSX, you can use ... as a “spread” syntax to pass the whole props object.

function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}

# Children in JSX

> In JSX expressions that contain both an opening tag and a closing tag,
the content between those tags is passed as a special prop:
props.children.

> There are several different ways to pass children:

> String Literals

<MyComponent>Hello world!</MyComponent>
 > JSX Children

<MyContainer>
<MyFirstComponent />
<MySecondComponent />
</MyContainer>

> JavaScript Expressions as Children

<MyComponent>{'foo'}</MyComponent>

> Functions as Children

> Normally, JavaScript expressions inserted in JSX will evaluate to a

function Repeat(props) {
let items = [];
for (let i = 0; i < props.numTimes; i++) {
items.push(props.children(i));
}
return <div>{items}</div>;
}

function ListOfTenThings() {
return (
<Repeat numTimes={10}>
{(index) => <div key={index}>This is item {index} in the
list</div>}
</Repeat>
);
}

# Booleans, Null, and Undefined Are Ignored

> false, null, undefined, and true are valid children. They simply don’t
render. These JSX expressions will all render to the same thing:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>