React for Designers and PMs
What is a React code?
Learn how to read React code.
LLM Written
Human Written
What do you write?
export default function Hello() {
return <p>Hello, world</p>;
}What do you get?
Hello, world
A prettier version
👋
Hello, world
Welcome aboard
The code
export default function PrettyHello() {
return (
<div className='flex items-center justify-center p-4'>
<div className='bg-white border border-gray-100 rounded-2xl shadow-xl shadow-gray-900/10 px-12 py-14 max-w-sm w-full text-center'>
<span className='text-6xl' role='img' aria-label='Waving hand'>
👋
</span>
<h1 className='text-3xl font-bold tracking-tight text-slate-900 mb-2'>Hello, world</h1>
<p className='text-sm text-slate-400 font-medium tracking-wide uppercase'>Welcome aboard</p>
</div>
</div>
);
}Distraction free code
<div>
<span>👋</span>
<h1>Hello, world</h1>
<p>Welcome aboard</p>
</div>Layer visualization
Layers
Approximation of how this code would look in Figma's layer panel.
PrettyHello
Card
EmojiIcon"👋"
Heading"Hello, world"
Subheading"Welcome aboard"
Select a layer to inspect