News
Introducing JSX
It is called JSX, and it is a syntax extension to JavaScript.
Internal navigation
You can visit this post, or this page, go back to the homepage or just back to the archive.
k holk olkkkd
Why JSX
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 “components” that contain both. We will come back to components in a further section, but if you’re not yet comfortable putting markup in JS, this talk might convince you otherwise.
React doesn’t 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.
Warning:
Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase
property naming convention instead of HTML attribute names.
For example, class
becomes className
in JSX, and tabindex
becomes tabIndex
.
With that out of the way, let’s get started!
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Giuseppe',
lastName: 'Verdi'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses.
Declarative
React makes it painless to create interactive UIs.
Design simple views for each state in your application.
React will efficiently update and render.
Component-Based
Learn Once, Write Anywhere
A Simple Component
React components implement a render method.
This example uses an XML-like syntax called JSX.
Input data that is passed into the component can be accessed.
A Stateful Component
An Application
In the example below, we embed the result of calling a JavaScript function, formatName(user)
, into an <h1>
element.
Embedding Expressions in JSX
In the example below, we declare a variable called name
and then use it inside JSX by wrapping it in curly braces:
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.
In the example below, we embed the result of calling a JavaScript function, formatName(user)
, into an <h1>
element.