JSX deep dive

@h6165

Abhishek Yadav

Co-organizer: Chennai.js

The agenda

JSX

  • The syntax
  • The idea/rationale
  • Interpolation
  • Custom elements, components
  • JSX conditionals
  • JSX loops  
  • JSX without React ?

 

JSX


// This should be counted as valid javascript

var el = <div>Hello World</div>;

The idea

So that -

=> We can write HTML syntax within Javascript

=> => That gets converted to equivalent real HTML when needed

JSX


// This should place the div within document

var el = <div>Hello World</div>;

ReactDOM.render(el, document)

The idea

JSX


<!-- A more sane example -->

<div id='root'></div>
<script type='text/babel'>
  const rootElement = document.getElementById('root')  


  const el = <div>Hello World</div>;
  ReactDOM.render(el, rootElement)

</script>

The idea

Create that Hello World element, 

insert it inside the root element

JSX


<!-- Just like this ? Jquery FTW !! -->

<div id='root'></div>
<script type='text/babel'>


  const el = $('<div>Hello World</div>')
  $('#root').html(el)

</script>

The idea

JSX


<!-- Or even plain Javascript -->

<div id='root'></div>
<script type='text/babel'>
  const rootElement = document.getElementById('root')


  rootElement.innerHTML = '<div>Hello World</div>'

</script>

The idea

JSX

The idea

Then why JSX ?

It seems to achieve the same goals as the older techniques

JSX

The rationale

The goal -

  • be a template (for React)
  • simplify composition (components) (for React)
  • no direct DOM manipulation (for React)

 

(The React vision, maybe)

JSX

As a template


<!-- A more sane example -->

<div id='root'></div>
<script type='text/babel'>
  const rootElement = document.getElementById('root')  
  const name = 'Abhi'

  const el = <div>Hello {name}</div>;
  ReactDOM.render(el, rootElement)

</script>

JSX

As a template

  • Templates (handlebars etc) are not always easy to compose.
  • We often want to build larger UI using smaller template fragments (Components)

JSX

As a template - composition


// We need something like this 
// (Incorrect syntax below)

  const Hello = <div> Hello {name} </div>;
  const Score = <div> Your score is {score} </div>


  const el = <div>
               <Hello />
               <Score />
             </div>


  ReactDOM.render(el, rootElement)

JSX

As a template - composition


// The following will work


  const Hello = () => <div> Hello {name} </div>
  const Score = () => <div> Your score is {score} </div>


  const el = <div>
               <Hello />
               <Score />
             </div>


  ReactDOM.render(el, rootElement)

A function with capitalized name becomes a React component

JSX

As a template - composition


// Even better


  const Hello = (props) => <div> Hello {props.name} </div>
  const Score = (props) => <div> Your score is {props.value} </div>


  const el = <div>
               <Hello name='Abhi' />
               <Score value='100' />
             </div>


  ReactDOM.render(el, rootElement)

All attributes passed to this component are its props

JSX

As a template - composition


// Even better


  const Hello = (props) => <div> Hello {props.children} </div>
  const Score = (props) => <div> Your score is {props.children} </div>


  const el = <div>
               <Hello> Abhi </Hello>
               <Score> 100 </Score>
             </div>


  ReactDOM.render(el, rootElement)

All child elements within this component are its props.children

JSX

As a template - composition


// Even better


  const Hello = (props) => <div> Hello {props.children} </div>
  const Score = (props) => <div> Your score is {props.children} </div>

  let data = { name: 'Abhi', score: 75 }

  const el = <div>
               <Hello> { data.name } </Hello>
               <Score> { data.score } </Score>
             </div>


  ReactDOM.render(el, rootElement)

Externally obtained data being used here

JSX

As a template - composition


// Even better


  const Hello = (props) => <div> Hello {props.children} </div>
  const Score = (props) => <div> Your score is {props.children} </div>

  const ScoreCard = (props) => { 
    <div>
       <Hello> { props.name } </Hello>
       <Score> { props.score } </Score>
    </div>
  }


  let data = { name: 'Abhi', score: 75 }
  let el = <ScoreCard {...data} />

  ReactDOM.render(el, rootElement)

The entire widget as a component, with data passed in using spread operator

JSX

As a template - composition - summary

  • A function with capitalized name becomes a React component
  • It can return Html tags or other custom components
  • All attributes passed to this component are its props
  • All child elements within this component are its props.children
  • The look and feel is almost like HTML. Just that we cant use the class property

JSX

React.createElement

  • All the JSX elements are converted into React.createElement calls
  • Babel does this conversion
  • This is also visible in the final source, in the browser

JSX

React.createElement

// JSX

var el = <div>Hello World</div>;
// Javascript

var el = React.createElement(
  "div",
  null,
  "Hello World"
);

Try in http://babeljs.io/repl

JSX

React.createElement

// JSX

<div id='foo'>
  <Hello> { props.name } </Hello>
</div>

// Javascript

React.createElement(
  "div",              // name in quotes
  { id: 'foo' },      // attributes
  React.createElement(
    Hello,            // Capitalized, no quotes
    null,
    " ",
    props.name,
    " "
  )
);
  • Custom components, like Hello here capitalized, and are not within quotes
  • Normal tags,  like div are within quotes
  • The attributes are passed as the second argument

JSX

JSX conditionals

// Conditionals in JSX
// The following does not work

let list = [];
<div>
  { 
    if (list.length == 0){
      <div> No items </div>
    }
    else {
      <div> {list.length} items </div>
    }
  }
</div>
  • What goes within JSX should be expressions - should evaluate to the expected value
  • 'JSX is just syntactic sugar for function calls and object construction' - React docs

JSX

JSX conditionals

// Conditionals in JSX
// The following works

let list = [];

<div>
  { 
    (list.length == 0) ? 
      <div> No items </div>
      :
      <div> {list.length} items </div>
  }
</div>
  • Ternary operators make expressions. Hence they work
  • This kind of code is common
  • Can be improved

JSX

JSX conditionals

// Conditionals in JSX
// The following works

const render = (list ) => {
  let none = <div> No Items</div>
  let itemList = <div> Items list </div>
  
  if (list.length == 0) return none;
  return itemList;
}
  • Its better to keep conditionals out of JSX interpolations

JSX

JSX conditionals

// Conditionals in JSX
// The following works

let None = () => <div> No Items</div>
let ItemList = () => <div> Items list </div>

const render = (list ) => {  
  if (list.length == 0) return <None/>;
  return <ItemList />;
}
  • And even better - use smaller custom components

JSX

JSX loops

// Loops in JSX
// The following does not work -


<div>
{
    for (var i=0; i < numrows; i++) {
        <span> Item - {i}</span>
    } 
}
</div>
  • Loops also don't work this way
  • Reason is the same - JSX is just syntactic sugar for function calls and object construction

JSX

JSX loops

// Loops in JSX
// The following works -


<div>
  { list.map( item => <span>Item - {item} </span> ) }
</div>
  • Use map function calls instead
  • key is also needed

JSX

JSX loops

// Loops in JSX
// The following works -

const render = () => {
    var rows = [];
    for (var i = 0; i < numrows; i++) {
        rows.push(<span key={i}>Item - {i} </span>);
    } 
    return (<div>{rows}</div>);
}
  • Or pre-generate the contents

JSX

JSX outside React

  • Since JSX is well specified () it can be implemented by libraries other than React
    • https://facebook.github.io/jsx/
  • The jsx-transform project tries to decouple JSX from React, for use with the mercury framework
    • https://github.com/alexmingoia/jsx-transform
    • https://github.com/Raynos/mercury

JSX

React Virtual DOM

  • React maintains an in-memory copy of the DOM - the Virtual DOM
  • Changes are applied to this copy, and are passed on to the real DOM when needed
  • Changes are applied as diffs. When there are no diffs, the DOM doesn't change.
  • This is a great optimization, and makes React perform much better than traditional templates

</ppt>

Made with Slides.com