JSX is an XML-like syntax extension for JavaScript, primarily used with React for building user interfaces but applicable in other contexts as well. It treats elements as function calls, enabling them to be used in various JavaScript expressions, supporting safe input handling against XSS attacks. JSX promotes more straightforward syntax compared to traditional templating languages, making it a powerful tool for developers.

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