Why I Love JSX!

JSX is an XML-like syntax extension to JavaScript

https://facebook.github.io/jsx/

class App extends Component {
render() {
return <div>hello world</div>;
}
}

…but that’s probably what you’ll use it for

Jay Phelps
Senior Software Engineer |

Jay Phelps
Chief Software Architect |

https://www.thisdot.co/
Support, Training, Mentorship, and More

*without any defined semantics

in practice JSX is treated as a function call expression
*without any defined semantics

// calling a function
var element = createElement('div');

// calling a function
// also just calling a function
var element = <div></div>;

/* @jsx createElement */
var element = <div />;

/* @jsx createElement */

JSX can be used anywhere a JS expression can be
Because they are expressions

var object = {
first: <div />,
second: <div />,
third: <div />
};

var object = {
first: <div />,
second: <div />,
third: <div />
};
var array = [<div />, <div />, <div />];

var object = {
first: <div />,
second: <div />,
third: <div />
};
var array = [<div />, <div />, <div />];
var result = doSomething(<div />, <div />);

They really are JavaScript expressions
they can be used in very some weird places

var result = <foo /> + <bar />;
// var result = h('foo') + h('bar');

var result = <foo /> + <bar />;
// var result = h('foo') + h('bar');
var result = <obj />[<key />];
// var obj = h('obj');
// var key = h('key');
// var result = obj[key];

*These aren’t valid in React
Because you’re dealing with React Elements

You can pass any JS values as “props”
Visually Similar to HTML Attributes

JSX elements can have children

<div>hello, <b>{name}</b></div>

JSX Prevents Injection Attacks
Cross-site Scripting Attacks aka XSS

const value = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{value}</h1>;

function createElement(tag, props, ...children)

createElement(
"div",
{ id: obj.foo, disabled: true },
"text ",
obj.bar
);

"div",
createElement(
"text ",
obj.bar
);

createElement(
"div",
"text ",
obj.bar
);

"text ",
obj.bar
createElement(
"div",
);

function createElement(tag, props, ...children)...children

function createElement(tag, props, ...children) {
console.log(children);
// ["text ", obj.bar]
}

There are some conventions it uses too

Starts with lower case:
passed as a string
Used for HTML tags

<div />
// same as
createElement('div')

Starts with Upper case:
Passed as a JavaScript Identifier Expression
Used for React Components

<Foobar />
// same as
createElement(Foobar)

Contains a dot:
Passed as a JavaScript property lookup
Usually Used for React Components

<Accordion.Section />
// same as
createElement(Accordion.Section)

https://github.com/jamesplease/react-request
npm install -—save react-request

import { Fetch } from 'react-request';
render() {
return (
<Fetch url="/api/example">
{({ data }) => {
// Response data is ready
if (data) {
return <div>{data}</div>;
} else {
return null;
}
}}
</Fetch>
);
}
}

render() {
return (
<Fetch url="https://jsonplaceholder.typicode.com/posts/1">
{({ fetching, failed, data }) => {
if (fetching) {
return <div>Loading data...</div>;
}
if (failed) {
return <div>The request did not succeed.</div>;
}
if (data) {
return (
<div>
<div>Post Title: {data.title}</div>
</div>
);
}
return null;
}}
</Fetch>
);
}
}

https://github.com/developit/jsxobj
npm install -—save-dev jsxobj

<webpack target="web" watch>
<entry path="src/index.js" />
<plugins>
<UglifyJS opts={{
compression: true,
mangle: false
}} />
</plugins>
</webpack>
{
"name": "webpack",
"target": "web",
"watch": true,
"entry": {
"path": "src/index.js"
},
"plugins": {
"uglify-js": {
"opts": {
"compression": true,
"mangle": false
}
}
}
}

Why not ES6 Template Literals?

return jsx`
<${Box}>
${shouldShowAnswer(user)
? jsx`<${Answer} value=${false}>no</${Answer}>`
: jsx`<${Box.Comment}>Text Content</${Box.Comment}>`}
</${Box}>
`;

Template Literals have a lot of noise

return (
<Box>
{shouldShowAnswer(user)
? <Answer value={false}>no</Answer>
: <Box.Comment>Text Content</Box.Comment>}
</Box>
);

How is this different from a
templating language?
Like {{ mustache }} templates, Angular, Ember, etc

Utilize and Grow your JavaScript skills
e.g. Learning Functional Programming

var items = [1, 2, 3];
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<ol>

<ol>
{{#items}}
<li>{{.}}</li>
{{/items}}
</ol>
Mustache

<ol>
{items.map(item =>
<li>{item}</li>
)}
</ol>
React

const els = items.map(item => <li>{item}</li>);
<ul>
{doSomething(els)}
</ul>

This is why JSX is so Wonderful to use
You no longer run into the rough edges of a templating language

you will fall in love with it
Give it a chance, plz. K thnx

Experiment with other uses for JSX
Remember, JSX does not have to be react-specific

I love JSX Because It’s Just JavaScript!

Why I Love JSX!

More Related Content

What's hot (20)

Similar to Why I Love JSX! (20)

More from Jay Phelps (12)

Recently uploaded (20)

Why I Love JSX!