TryIt Editor - Example: React Programmatic Navigation (useNavigate)

Source Code (html): Press Tab to indent • Click Run Code

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <style>
    body { font-family: system-ui, sans-serif; padding: 20px; background: #0f172a; color: white; display: flex; justify-content: center; }
    .card { background: #1e293b; padding: 24px; border-radius: 12px; border: 1px solid #334155; text-align: center; max-width: 320px; }
    .btn { background: #0ea5e9; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; margin-top: 10px; }
  </style>
</head>
<body>
  <div id="root"></div>
  <script>
    function App() {
      const [likes, setLikes] = React.useState(12);
      return React.createElement('div', { className: 'card' },
        React.createElement('h3', null, '⚛️ React Live Component'),
        React.createElement('p', null, `Community Likes: ${likes}`),
        React.createElement('button', { className: 'btn', onClick: () => setLikes(likes + 1) }, '👍 Like Course')
      );
    }
    ReactDOM.render(React.createElement(App), document.getElementById('root'));
  </script>
</body>
</html>

Result Preview: Live Render