jikime/jikime-adk/jikime-migration-jquery-to-react

jQuery → React Migration

Quick Reference

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

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

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

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