React · Quick Reference

Lesson 3 — JSX Rules Cheat Sheet

React

In one line: JSX compiles to JS function calls, which is why it has its own small set of rules different from plain HTML.

The 7 Rules

1One parent element (or Fragment <>)

2className instead of class

3Self-close empty tags: <img />

4JS in { } curly braces

5camelCase events: onClick

6style={{ color:"red" }}

7Arrays need a key prop

Example

{isAdmin && <span>Admin</span>} {age >= 18 ? <Adult/> : <Minor/>} <h2 style={{color:"gold"}}>{name}</h2> {list.map((x,i) => <span key={i}>{x}</span>)}