Examples/index

PHP	HTML examples/index.pad	Result
	<h1>React Examples</h1> <p>Explore various React patterns and examples showing integration with PAD.</p> <div class="grid" style="grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 30px 0;"> <div class="card" style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h3>🖱️ Click Handler</h3> <p style="color: #666; font-size: 14px;">Basic React component with state and event handling.</p> <a href="?examples/click" class="btn" style="display: inline-block; margin-top: 10px;">View Example →</a> </div> <div class="card" style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h3>📝 Form Controls</h3> <p style="color: #666; font-size: 14px;">Controlled form inputs with validation.</p> <a href="?examples/form" class="btn" style="display: inline-block; margin-top: 10px;">View Example →</a> </div> <div class="card" style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h3>📦 Server Data</h3> <p style="color: #666; font-size: 14px;">Product list using <code>{json}</code> tag pattern.</p> <a href="?examples/products" class="btn" style="display: inline-block; margin-top: 10px;">View Example →</a> </div> <div class="card" style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h3>🔘 Toggle Button</h3> <p style="color: #666; font-size: 14px;">Simple toggle component with state management.</p> <a href="?examples/toggle" class="btn" style="display: inline-block; margin-top: 10px;">View Example →</a> </div> <div class="card" style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h3>🔢 Counter Demo</h3> <p style="color: #666; font-size: 14px;">Interactive counter with increment/decrement.</p> <a href="?examples/counter" class="btn" style="display: inline-block; margin-top: 10px;">View Example →</a> </div> <div class="card" style="padding: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);"> <h3>💬 Topic Page</h3> <p style="color: #666; font-size: 14px;">Forum topic using <code>{reactData}</code> tag.</p> <a href="?examples/topic" class="btn" style="display: inline-block; margin-top: 10px;">View Example →</a> </div> </div> <h2 style="margin-top: 40px;">Learning Resources</h2> <ul style="margin-left: 20px; line-height: 1.8;"> <li><a href="https://react.dev/learn" target="_blank">Official React Documentation</a></li> <li><a href="https://react.dev/reference/react" target="_blank">React API Reference</a></li> <li><a href="https://react.dev/learn/tutorial-tic-tac-toe" target="_blank">React Tutorial (Tic-Tac-Toe)</a></li> </ul>	React Examples Explore various React patterns and examples showing integration with PAD. 🖱️ Click Handler Basic React component with state and event handling. View Example → 📝 Form Controls Controlled form inputs with validation. View Example → 📦 Server Data Product list using {json} tag pattern. View Example → 🔘 Toggle Button Simple toggle component with state management. View Example → 🔢 Counter Demo Interactive counter with increment/decrement. View Example → 💬 Topic Page Forum topic using {reactData} tag. View Example → Learning Resources Official React Documentation React API Reference React Tutorial (Tic-Tac-Toe)