The {} part is a JSX expression that allows you to embed JavaScript code in JSX markup.

The && is a logical AND operator, but in JavaScript, instead of resulting in either true or false, && does this:

1. Evaluates its left-hand operand
2. If the value from Step 1 is falsy, the && operation takes that result as its result and stops here
3. If the value from Step 1 is truthy (the opposite of falsy), the && operation evaluates the right-hand operand and takes that value as its result

So props.type === "big" && <h2>{props.title}</h2> means:

• If props.type is "big", put <h2>{props.title}</h2> here.
• If not, put nothing here (because React doesn't render false, null, or undefined)

how or when should it be used

It's typically used when you need to render something conditionally. The condition is the first part (props.type === "big"). The thing being rendered, or not being rendered, is the second part (<h2>{props.title}</h2>).