A Faster Way Back Into React

GitHub Copilot Chat, now in beta for all individuals users, extends the pair programmer beyond autocomplete. Instead of only translating comments into code, developers can hold a conversation with the assistant inside the IDE: ask for explanations, request alternative implementations, or paste an error and get a fix. For anyone returning to a framework after a long absence, that context-aware back-and-forth can collapse what used to be days of searching into a focused working session.

To prepare a conference demo on ReactJS, one GitHub developer built a photo gallery of Amsterdam's tulip fields. Although they had not worked with React in some time, each iteration of the prototype took only about 20–30 minutes. The model—currently based on OpenAI's GPT-3.5-turbo—generated suggestions informed by the prompt, the code already in the editor, and other open tabs.

Screenshot of GitHub Copilot Chat open in a code editor, on top of a screenshot of a React app in progress. User sennap has asked GitHub Copilot Chat, "Are there any libraries I could use to make this prettier?" Chat has responded with an example of how to use styled-components to style the gallery.

The conversational loop proved more productive than a traditional search-and-copy workflow. When a suggestion didn't fit, the developer could give feedback on why, and the assistant would adjust its next proposal. That immediate, contextual iteration replaced the older ritual of pulling snippets from Stack Overflow and hoping they worked—though the underlying learning experience remains the same: having a starting point, even an imperfect one, is what moves a project forward.

Selecting Libraries and Wiring a Modal

Copilot Chat was used to poll for popular React libraries. After evaluating a few options across separate gallery iterations, styled components was the easiest to configure. The assistant also fielded a question about whether that library supported modals, correctly explaining how to pass props and handle onClick from the first suggestion.

An early attempt included generic boilerplate for defining and referencing a modal component. Asking Copilot to iterate with more specificity—based on how the gallery was defined—produced a targeted result. The quality of the output tracks directly with the detail of the prompt.

UI Fixes Through Natural Language

The initial modal render put the close button out of view. Rather than break flow to search for CSS syntax, the developer simply asked Copilot Chat to center the "X" button. The assistant returned updated CSS with display properties that placed the button where intended.

Improving Accessibility

Copilot Chat also functioned as an accessibility aid. The gallery's images were not exposed as interactive to keyboard or screen reader users. When asked for recommendations, the assistant suggested tabindex, ARIA attributes, and keydown event handling. The gallery was later refactored so each image is a semantic button element with a background image, and additional work ensured focus is managed correctly when the modal opens and closes so only visible or focused content reaches the screen reader.

Debugging and Testing

Pasting error messages directly into the chat window produced explanations and alternative approaches. In one iteration, Copilot helped render a countdown to March 21, 2024, the start of the tulip festival. Slash commands made it possible to highlight a function and request test cases. The assistant recommended the React Testing Library for rendering and Jest methods to simulate time progression, introducing the Jest framework's Timer Mocks and best practices for fake timers.

Closing the Loop on Pull Requests

GitHub Copilot for pull requests summarized the changes for the final submission, walking through each diff and even generating a poem about the application.

Screenshot of an open pull request, which was created by GitHub Copilot Chat, ready to be merged into the tulip gallery repository.

Practical Caveats

Copilot's productivity gains come with a reminder: the developer remains the pilot. Suggestions should be treated like code from a pair programmer—reviewed, tested, and run through the team's normal security and quality checks before deployment. The assistant has filters to reduce vulnerable suggestions, but it is not a substitute for proper review processes. Used that way, it can turn a daunting framework re-entry into an enjoyable, productive session from first idea to pull request.