Shorthands in React.js' JSX
As shorthands, developers consider a quicker and concise way to write syntax, that solves the same problem. A lot of the shorthands we know from pure JavaScript can be used within React's JSX to make our code more readable. Here is a list of examples.
Nearly all of these examples are now considered a standard when building apps, therefore, they are very important.
Conditional / ternary shorthand
Just before the "?" there is the expression which will be evaluated. In case this expression is true, the first expression after the "?" is returned. In case it is falses, the code behind the ":" is returned.
export default function App() {
const loaded = false
return <>{loaded ? <p>Loaded!</p> : null}</>
}
Spread operator
The spread operator ...data
returns the data without its surrounding structure, therefore only returns the elements.
This works for almost all types of objects. We can use it for writing one expression instead of multiple ones, for example, when passing data:
function Person(props) {
return (
<p>
{props.name} is {props.age} years old
</p>
)
}
function App() {
const max = { name: 'Max', age: 21 }
return <Person {...max} />
}
Destructuring
With this feature, we can split up data from one object into as much separat objects as we want to. Usually, we split the attributes of the object into new variables, each holding the value linked to one attribute.
Back to our example from above, we can extract both name and the age into single variables for making the code sharper.
function Person(props) {
const { name, age } = props
return (
<p>
{name} is {age} years old
</p>
)
}
Implicit return
This is the concept most React developers are the most used to.
Instead of using the return keyword, one can use the normal brackets ( )
to return data.
We can write:
const app = () => (
<>
<h1>My app</h1>
<p>Hello world</p>
</>
)
instead of
const app = () => {
return (
<>
<h1>My app</h1>
<p>Hello world</p>
</>
)
}
React.Fragment
Instead of using React.Fragment as the wrapper element for a component like this
return (
<React.Fragment>
<p>Hello</p>
<p>World</p>
</React.Fragment>
)
There is a shorter way today:
return (
<>
<p>Hello</p>
<p>World</p>
</>
)