JSX is an XML-like syntax extension to JavaScript, popularized by React. When seen for the first time it can often elicit bad memories of intermixing HTML and code, but JSX is *very* different! Let's learn exactly what it is, how it works, and even how you can use it outside of React. -- Reactive programming nut and compiler enthusiast. Jay is a Senior Software Engineer at Netflix. Lover of all things open source, his contributions span numerous ecosystems. Former RxJS core team member and author of core-decorators, git-blame-someone-else, and co-author of redux-observable.

1. Why
loveI JSX

2. JSX is an XML-like syntax extension to JavaScript

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

4. <foo></foo>

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

6. It’s not just for React UI

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

8. Jay Phelps
Senior Software Engineer |

9. Jay Phelps
Chief Software Architect |

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

11. JSX is an XML-like syntax extension to JavaScript
*without any defined semantics

12. JSX is an XML-like syntax extension to JavaScript
in practice JSX is treated as a function call expression
*without any defined semantics

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

14. // calling a function
var element = createElement('div');
// also just calling a function
var element = <div></div>;

15. // calling a function
var element = createElement('div');
// also just calling a function
var element = <div></div>;

17. // calling a function
var element = createElement('div');
// also just calling a function
var element = <div></div>;

18. /* @jsx someFuncName */

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

20. /* @jsx createElement */
var element = createElement('div');

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

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

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

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

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

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

27. /* @jsx h */

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

29. 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];

30. 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];

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

32. 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];

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

34. <input id="foo" />
<input value={obj.value} />
<input disabled />
<input {...props} />

35. JSX elements can have children

36. <div>hello, Jay</div>

37. <div>hello, {name}</div>

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

39. JSX Prevents Injection Attacks
Cross-site Scripting Attacks aka XSS

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

41. /* @jsx createElement */

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

43. <div id={obj.foo} disabled>
text {obj.bar}
</div>

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

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

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

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

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

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

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

51. There are some conventions it uses too

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

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

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

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

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

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

58. It’s not just for React UI

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

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

61. class App extends Component {
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>
);
}
}

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

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

64. <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
}
}
}
}

65. Why not ES6 Template Literals?

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

67. Template Literals have a lot of noise

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

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

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

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

72. var items = [1, 2, 3];

73. var items = [1, 2, 3];

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

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

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

77. It’s Just JavaScript ™

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

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

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

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

82. I love JSX Because It’s Just JavaScript!

83. @_jayphelps
The End