REACT Free Section Starter Challenge 20 min

1. Functional Components & JSX Syntax

Overview: Write components returning JSX markup and compose parent-child layouts.

Concept & Syntax Guide

JSX lets you write HTML-like tags inside JavaScript. Functional components are JavaScript functions that return JSX describing what should appear on the screen.

Hands-On Practice Exercise

Create a Template Card Component

Build a functional component `TemplateCard` that returns a card with an `<h3>` and a `<button>`.

Target Output: FitPulse Gym Template

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: FitPulse Gym Template

REACT Code Editor

1
2
3
4
5
6
7
8
9
10

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script>
function TemplateCard() {
  return React.createElement('div', { className: 'card', style: { padding: '20px', background: '#0f172a', color: '#fff', borderRadius: '12px' } },
    React.createElement('h3', null, 'FitPulse Gym Template'),
    React.createElement('button', { style: { background: '#82b440', border: 'none', padding: '8px 16px', fontWeight: 'bold' } }, 'Live Preview')
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(TemplateCard));
</script>