jikime-migration-jquery-to-react

name	jikime-migration-jquery-to-react
description	jQuery to React 19 migration specialist. Converts legacy jQuery applications to modern React with hooks, TypeScript, and component-based architecture. Use when migrating jQuery projects, converting $() patterns to React, or asking about jQuery to React conversion.
argument-hint	["source-path"]
version	2.1.0
tags	["migration","jquery","react","javascript","typescript","legacy"]
triggers	{"keywords":["jquery","$","$.ajax","jquery-to-react","migrate jquery","convert jquery","제이쿼리"],"phases":["plan","run"],"agents":["migrator","frontend"],"languages":["javascript","typescript"]}
progressive_disclosure	{"enabled":true,"level1_tokens":"~100","level2_tokens":"~5000"}
user-invocable	false
context	fork
agent	Explore
allowed-tools	["Read","Write","Edit","Bash","Grep","Glob","TodoWrite"]

jQuery → React Migration

Quick Reference

jQuery	React
$('#id')	useRef()
$('.class')	Component props/state
.html()	JSX rendering
.text()	{variable}
.click()	onClick
.on('event')	onEvent prop
$.ajax()	fetch() + useEffect
$(document).ready()	useEffect(() => {}, [])
.show()/.hide()	Conditional rendering
.addClass()	Conditional className

Dynamic Context (auto-loaded)

Current Dependencies

!cat package.json 2>/dev/null | grep -A 20 '"dependencies"' || echo "No package.json found"

jQuery Usage Detection

!grep -r "\\\$(" --include="*.js" --include="*.html" . 2>/dev/null | head -10 || echo "No jQuery patterns found"

Source Structure

!ls -la src/ 2>/dev/null | head -15 || ls -la . | head -15

Target Stack

Technology	Version	Purpose
Framework	React 19	Component-based UI
Language	TypeScript 5.x	Type safety
Build Tool	Vite	Fast development
Styling	Tailwind CSS 4.x	Utility-first CSS
State	Zustand / useState	State management
Forms	react-hook-form	Form handling
Animation	Framer Motion	Animations

Migration Process

1. Analyze

Identify jQuery patterns in $ARGUMENTS:

• DOM selectors ($(), document.getElementById)
• Event handlers (.on(), .click(), .submit())
• AJAX calls ($.ajax, $.get, $.post)
• Plugins and their alternatives

2. Plan

Map jQuery patterns to React equivalents:

• Selectors → useRef or state
• Events → React event handlers
• AJAX → useEffect + fetch
• Plugins → React component libraries

3. Execute

Transform code incrementally:

• Set up React alongside jQuery (coexistence)
• Migrate leaf components first
• Work up to container components
• Replace plugins last

4. Verify

Test behavior preservation:

• Same user interactions work
• Same data flows correctly
• No visual regressions

Plugin Replacement Guide

jQuery Plugin	React Alternative
jQuery UI	Radix UI, shadcn/ui
jQuery Validation	react-hook-form + zod
Select2	react-select
DataTables	TanStack Table
Slick Carousel	Swiper, Embla
Lightbox	yet-another-react-lightbox
DatePicker	react-datepicker

Module Reference

For detailed patterns, see:

• jQuery Patterns - DOM manipulation, events, AJAX, lifecycle, animations

Examples

Before (jQuery)

$(document).ready(function() {
  $('#button').click(function() {
    $.get('/api/data', function(data) {
      $('#content').html(data);
    });
  });
});

After (React)

import { useState, useEffect } from 'react';

function Component() {
  const [content, setContent] = useState('');

  const handleClick = async () => {
    const response = await fetch('/api/data');
    const data = await response.text();
    setContent(data);
  };

  return (
    <>
      <button onClick={handleClick}>Load</button>
      <div dangerouslySetInnerHTML={{ __html: content }} />
    </>
  );
}

Troubleshooting

Skill not triggering

• Try phrases like "migrate jQuery to React" or "convert $() patterns"
• Use /migrate-jquery-to-react directly

Common Migration Issues

Issue	Solution
$ undefined	Remove jQuery import, use refs/state instead
Event not firing	Check React synthetic event naming (onClick, not onclick)
DOM not updated	Use state to trigger re-renders, not direct DOM manipulation
Plugin not working	Find React alternative in Plugin Replacement Guide above

Build Errors

• Run npm uninstall jquery @types/jquery after migration
• Check for remaining $ patterns: grep -r "\\$(" --include="*.tsx" src/

Quality Checklist

• All jQuery selectors replaced with refs/state
• Event handlers converted to React patterns
• AJAX calls use fetch with proper cleanup
• No direct DOM manipulation in React components
• jQuery plugins replaced with React alternatives
• TypeScript types added
• No jQuery in final bundle
• Tests passing

---

Version: 2.1.0 Last Updated: 2026-01-25 Source: React Official Docs, jQuery Migration Guide