Internal navigation

You can visit this post, or this page, go back to the homepage or just back to the archive.

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.

1. Declarative

   1. React makes it painless to create interactive UIs.

   2. Design simple views for each state in your application.

   3. React will efficiently update and render.

2. Component-Based

3. 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.