Harnessing AI to rev up React

Last week I attended React Rally, a community conference about React and topics interesting to React developers in beautiful Park City, Utah. It was two days of single-track programs featuring talks from community leaders such as Kent C. Dodds, Shruti Kapoor, and Cory House. 

This year, in addition to the regular talks covering React Server Components, React 19 updates, and popular frameworks and libraries, there were a few focusing on AI and how to use it as part of a React application. Tejas Kumar and Alexandra Spalato each presented nice overviews of retrieval-augmented generation (RAG), how it can be utilized with existing large language models (LLMs), and introduced us to the concept of generative UI.

Much to my surprise, I didn’t see any talks related to how generative AI could be used to accelerate the development of React applications. There are many ways Tabnine can assist when building React applications regardless of which framework you choose. Once I returned from React Rally, we presented a Tabnine Live focusing on just that. You can watch the recording below.

During the livestream, we demonstrated some of the ways Tabnine can be used for React development. I’ll highlight each of them below.

Exploring code

We started by using our Code Explorer agent on an existing Remix + Vite application to get a summary of the project. While this isn’t specific to React development, it does provide developers new to the project with valuable information to help expedite their onboarding. After the agent is run, it’s easy to dive deeper into the codebase using the additional generated questions or by asking your own. 

Perhaps you have a ticket to update the UI on the add todo page. Instead of digging through multiple folders and lines of code, you can simply ask, “Where is the page responsible for allowing the user to add a new todo?” in the existing chat conversation and receive a short explanation and a link to the relevant code.

Understanding code

Once you’ve located the relevant code for a task, Tabnine can also help understand what the code is doing. For our example, we looked at the DefaultErrorBoundary component. If you’re new to using the Remix framework, you’ll likely not know what this component does. By clicking the Explain Code Lense option (available on VS Code and JetBrains IDEs) or selecting the component function and asking in the chat for an explanation, Tabnine can explain it to you in the chat. You can continue asking questions until you’re satisfied with the level of explanation.

You can also choose to have documentation included with the component by either clicking the Document Code Lense option or by highlighting the component function and asking for documentation in the chat. Once the documentation is to your liking, you can insert it into the component file. I also request in-line comments be added before adding the documentation.

Generating components

Tabnine does a really good job of generating and updating React components simply by providing natural language. Suppose you receive a ticket to create a new component that includes a visual wireframe. As long as you can accurately describe the component in Tabnine Chat, it can generate a component, including the interactions. The trick is to go step-by-step as if you were describing the component to a coworker. With Tabnine, the chat conversation is part of the context. 

For our example, we needed to create a todo component that would display a todo item from our database. Knowing that these components would be displayed in an unordered list, we started by asking for a todo list item that accepts a Prisma todo object and displays it and received a response. From there we continued by adding functionality, displaying a checkbox that represents if the todo has been completed and updating the database when it gets checked. Then we told it to style the component using TailwindCSS and so on until the component looked and behaved to our liking. Finally we inserted the component in our component code file.

Testing components

Thanks to Tabnine’s updated Testing agent, generating unit tests for components is very straightforward. Once you highlight your component and start up the Testing agent, it will prompt for or create a test file and gather relevant information about the project, such as language, framework, and testing library and present you with a test file template if you’re starting with a new test file. It then provides you with a list of possible tests to generate and add to the test file.

Using test-driven development (TDD)

Not everyone waits until the end to create their unit tests. For the TDD community, similarly to generating components using natural language, you can start by creating unit tests using natural language. Once you have all the tests written for a component, you can ask the chat to generate a component that passes the test. You’ll want to either have the test file as the active tab or highlight all the tests so the chat has the proper context.

For our demonstration, we used a counter example from the React Testing Library documentation. We started with tests that described our counter component along with its behavior. When provided with these tests, the chat produced the component with all the buttons and inputs with the necessary hooks to handle the functionality.

Building with context

To close out the demo, we showed how to use documentation for an external API as context for creating a new component. In this case, we asked Tabnine Chat to build a form that would generate the URL for a placeholder image using the Fake Images Please? service. 

To do this, we started by copying the “How to use” section from the project README. In Tabnine Chat we told it, “This is how you use the fakeimg service.” Then we pasted in the copied README and hit return. We then asked it to create a form that would generate a URL for a fake image using the fakeimg service. We also asked for a preview that was updated as the form was completed and a copy button that would copy the URL to the clipboard. We noticed that because it had access to workspace context, it automatically used TailwindCSS and any form components we had installed. We then continued tweaking the design until we were happy with it. The result was pretty amazing — a working form in a fraction of the time.

These are only a handful of ways that Tabnine can help accelerate your React development. If you’re not already a Tabnine Pro user, be sure to check out our free 90-day trial. If you have another way Tabnine has helped you develop React, we’d love to hear it. Let us know on LinkedIn or X.

Happy coding!