Back
Practice
/
JSX
/
React
Easy
Your First Component
10 pts
React · JSX
Practice
/
React
Easy
10 pts
·
JSX
182/695
Your First Component
Description
Desc
Submissions
Subs
Solutions
Sols
Hints
3
Expected output
Ask AI
Problem
React
App.jsx
React preview · export your component with
export default
Ready
Run
⌘↵
Submit
⇧⌘↵
Preview
output
notes
Run your code to see output
Problem
Code
Run
Submit
%20scale(0.983)%20translate(-50%20-91)%22%20filter%3D%22url(%23navii-hue-yby4u)%22%3E%3Cg%20class%3D%22body%22%3E%3Cellipse%20cx%3D%2250%22%20cy%3D%2295%22%20rx%3D%2222%22%20ry%3D%222.6%22%20fill%3D%22%23365314%22%20opacity%3D%220.16%22%20%2F%3E%3Cpath%20d%3D%22M50%2014%20C58%2014%2064%2022%2064%2030%20C64%2036%2060%2040%2060%2046%20C60%2054%2076%2060%2078%2076%20C80%2088%2066%2091%2050%2091%20C34%2091%2020%2088%2022%2076%20C24%2060%2040%2054%2040%2046%20C40%2040%2036%2036%2036%2030%20C36%2022%2042%2014%2050%2014%20Z%22%20fill%3D%22url(%23navii-grad-yby4u)%22%20stroke%3D%22rgba(54%2C83%2C20%2C0.18)%22%20stroke-width%3D%220.7%22%20%2F%3E%3Cellipse%20cx%3D%2238%22%20cy%3D%2236%22%20rx%3D%2211%22%20ry%3D%227%22%20fill%3D%22%23FFFFFF%22%20opacity%3D%220.22%22%20transform%3D%22rotate(-18%2038%2036)%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20class%3D%22eyes%22%3E%3Cellipse%20cx%3D%2241.8%22%20cy%3D%2250%22%20rx%3D%224.08%22%20ry%3D%224.59%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3Cellipse%20cx%3D%2258.2%22%20cy%3D%2250%22%20rx%3D%224.08%22%20ry%3D%224.59%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3Ccircle%20cx%3D%2241.8%22%20cy%3D%2250%22%20r%3D%222.244%22%20fill%3D%22%23365314%22%20%2F%3E%3Ccircle%20cx%3D%2258.2%22%20cy%3D%2250%22%20r%3D%222.244%22%20fill%3D%22%23365314%22%20%2F%3E%3Ccircle%20cx%3D%2242.8%22%20cy%3D%2249%22%20r%3D%220.8%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3Ccircle%20cx%3D%2259.2%22%20cy%3D%2249%22%20r%3D%220.8%22%20fill%3D%22%23FFFFFF%22%20%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M44.539%2060%20L55.461%2060%22%20stroke%3D%22%23365314%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20%2F%3E%3Cg%20transform%3D%22rotate(-5%2050%2016)%22%3E%3Cg%20class%3D%22antenna%22%3E%3Cpath%20d%3D%22M46%2014%20Q45%2010%2044.5%206%22%20stroke%3D%22%23365314%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.55%22%20%2F%3E%3Cpath%20d%3D%22M54%2014%20Q55%2010%2055.5%206%22%20stroke%3D%22%23365314%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%20fill%3D%22none%22%20opacity%3D%220.55%22%20%2F%3E%3Ccircle%20class%3D%22spark%22%20cx%3D%2244.5%22%20cy%3D%225%22%20r%3D%222.1%22%20fill%3D%22%23F7FEE7%22%20stroke%3D%22%23365314%22%20stroke-width%3D%220.5%22%20opacity%3D%220.95%22%20%2F%3E%3Ccircle%20class%3D%22spark%22%20cx%3D%2255.5%22%20cy%3D%225%22%20r%3D%222.1%22%20fill%3D%22%23F7FEE7%22%20stroke%3D%22%23365314%22%20stroke-width%3D%220.5%22%20opacity%3D%220.95%22%20%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2241.6%22%20cy%3D%2257%22%20r%3D%220.9%22%20fill%3D%22%23365314%22%20%2F%3E%3C%2Fsvg%3E){kind=small}