This extension provides comprehensive, runnable Demo Components for React Exams and fast templating. Instead of just basic syntax, these snippets generate full, working components that you can immediately test and apply during your exams.
🚀 NEW: Full Demo Snippets
Type the prefix into a .jsx or .tsx file to generate a complete React component:
rc-demo-usestate: Full demo component with a Counter and a Text Input.
rc-demo-useeffect: Full demo component demonstrating API fetching/interval with cleanup and document title updates.
rc-demo-usememo: Full demo component optimizing a heavy calculation loop with a toggle switch to test re-rendering.
rc-demo-usecallback: Full demo of useCallback passing a function to a child component wrapped in React.memo.
rc-demo-fetch-crud: Full runnable CRUD component demonstrating GET, POST, PUT, and DELETE using fetch.
rc-demo-router: Full runnable React Router v6 Application with RouterProvider, Outlet, Link, and useNavigate.
rc-demo-form: Full runnable Form component handling inputs, selects, submits, and rendering submitted data to a table.
📚 Exam Specific Templates (Basic Layouts)
rxm-init: Initialize component, state, and useEffect for data fetching.
rxm-list: Render a list using .map().
rxm-search-bar: Scaffold a SearchBar component.
rxm-filter-logic: Scaffold useMemo and useCallback logic.
rxm-create-logic: Create item logic with form validation.
rxm-delete-logic: Delete item logic with confirm prompt.
rxm-full-exam: Scaffold the entire generic basic structure.
