React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.<\/p>\n
Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called \u201ccomponents\u201d that contain both. We will come back to components in a further section, but if you\u2019re not yet comfortable putting markup in JS, this talk might convince you otherwise.<\/p>\n
React doesn\u2019t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.<\/p>\n
With that out of the way, let\u2019s get started!<\/p>\n
Embedding Expressions in JSX<\/p>\n
In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:<\/p>\n
const name = ‘Josh Perez’;<\/p>\n
const element = <h1>Hello, {name}<\/h1>;<\/p>\n
ReactDOM.render(<\/p>\n
element,<\/p>\n
document.getElementById(‘root’)<\/p>\n
);<\/p>\n
You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.<\/p>\n
In the example below, we embed the result of calling a JavaScript function, formatName(user), into an <h1> element.<\/p>\n
function formatName(user) {<\/p>\n
return user.firstName + ‘ ‘ + user.lastName;<\/p>\n
}<\/p>\n
const user = {<\/p>\n
firstName: ‘Harper’,<\/p>\n
lastName: ‘Perez’<\/p>\n
};<\/p>\n
const element = (<\/p>\n
<h1><\/p>\n
Hello, {formatName(user)}!<\/p>\n
<\/h1><\/p>\n
);<\/p>\n
ReactDOM.render(<\/p>\n
element,<\/p>\n
document.getElementById(‘root’)<\/p>\n
);<\/p>\n","protected":false},"excerpt":{"rendered":"
React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called \u201ccomponents\u201d that…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8545],"class_list":["post-73404","page","type-page","status-publish","hentry","category-reactjs","tag-why-jsx"],"acf":[],"yoast_head":"\n