JavaScript All-in-One For Dummies

Chapter 2

Writing JSX

IN THIS CHAPTER

Writing JSX elements

Using JavaScript in JSX

Rendering conditionally

Making lists

Styling React components

“I write to discover what I know.”

—FLANNERY O'CONNOR

JSX is a template language for describing user interfaces. In this chapter, I show you how to write JSX to compose views in the browser DOM.

Learning the Fundamentals of JSX

Many people's first reaction to seeing React components is that they seem to violate a fundamental best practice of writing web code: Logic should be separate from presentation. In terms of web pages, there exists a long tradition of placing HTML and JavaScript in different files.

However, React is fundamentally a library for creating user interfaces with reusable components. What's important in a React user interface is the component, not the various languages the component contains.

Rather than enforce a separation of languages, React emphasizes separation of concerns by using components that are self-contained ...