How to Cursor in React

In this guide you'll develop your own web application from scratch using plain English in the Cursor IDE. Cursor is the leading AI-powered code editor, capable of instantly making code changes in complex projects across multiple files.

The development process is changing rapidly. Instead of learning programming languages and frameworks, you'll now need to carefully decompose projects into tasks, provide sufficient context to LLM helpers, and know how to recover from dead ends. Once you master this, you'll be able to start projects outside your area of expertise, even without any developers.

This React+TypeScript+Vite+MUI template allows you to run it locally in a Cursor IDE. Replace it with your logic and deploy to web.

This guide will take around 1 to 2 hours of your time.

• A simple html app
• A React app
  • Get the tools ready
  • Run locally
  • Make changes
  • Save changes (commit)
  • Deploy
  • Bring your idea
  • Tips
  • React vs Vanilla JS
• This is so tough, can I do it simpler?
• Do I need a backend?
  • Adding Firestore to the project
• How to create a Telegram bot?
• Troubleshooting
  • Git authenticity
  • Empty commit message
  • First time Git configuration

A simple html app

Before we dive into React, let's spend 10-20 minutes in a simpler setup - a simple html website in a single index.html file.

1. Install Cursor IDE, select any options during installation, then log in. If you had it installed before, Cmd/Ctrl+Shift+P "Attempt Update" to get the latest update
2. As you're in a .cursortutor project (or in any other empty folder opened as a project), press Cmd/Ctrl+I and ask Cursor to make a simple html website. Include the words simple html website in your prompt. Ask for any functionality and UI. Try asking in your language (Spanish, Polish etc.):

Create a simple html website with easy conversion between 7 main time zones.
Time in all of theme is displayed simultaneously, and I can change hh and mm
in any of them in one click or by typing.

If that fails for some reason, create a new file index.html in Cursor, open it, then repeat the generation.

4. Click [Accept All]. Trust Cursor, don't read the code that it generated – it's not relevant for this task:

5. Open this file index.html in your browser.
   • In Chrome/Firefox/Safari select File -> Open or press Cmd/Ctrl+O.
   • To see where this file is on your computer, hover over its name in the left pane.

7. In the same Composer chat, ask for changes:

Make a solid-looking modern UI, draw real clock faces for each,
align them horizontally, also draw HH:MM numbers.

Again, click [Accept All] when available and refresh your page in the browser:

7. Try different ideas. You may retry from scratch with a completely different idea in mind. How would you prompt to get that? Research prompt techniques online.

8. This was a simple single-file application. The true power of Cursor comes in instantly making changes throughout many files in a big project. This allows you to build complex features. For that, we need to use a React library and some tooling - which is what this template's files provide.

A React app

Now we'll make a new app from scratch using a modern, more scalable approach - by using a React framework and a handy tooling around it: TypeScript and Vite.

Instructions below exploit many concepts that may be less clear to non-programmers. You don't need to understand them to complete this tutorial. However, if you wish to understand them deeper, consult an LLM of your choice:

• simple html vs React
• git and deployment

Get the tools ready

1. Go here -> and install Node.js version 20
   • On Windows, do it directly to Windows, NOT to WSL-Ubuntu.
   • Don't try installing via your package manager, or you can get an outdated Node version like v12. You need at least v18 for Vite.
2. Log into Github

Optionally watch my stream in Russian

Run locally

Fork this very repo:

Then clone it locally using GitHub Desktop

Then open this project (web-2024-template) in Cursor (📁 Open a folder), open package.json, hover dev on line 7 and click Run Script:

Then open the link it gives in your browser.

On Windows, you may get errors for npm not being found. Try opening a "Command Prompt" type of terminal in Cursor and run npm run dev in it:

If npm is still not found there, it usually means that your installation of Node.js hasn't added a path to npm to your PATH variable. Ask Cursor's Chat (or a GPT4/Claude.ai/Bing Copilot/Gemini) on how to debug that.

Make changes

Open src/App.tsx, then press Cmd/Ctrl+I, then type your request or paste a screenshot of a desired UI. Eg.

Instead of a todo list app, make an app to store and edit recipes for dishes.
Allow to recalculate number of portions for each dish.
Populate with 5 boilerplate dishes.
Make funky styling.

You can write your mother tounge (Spanish, Polish etc.) - it'll understand

Hit Enter, then once it's done - hit Acccept All and reload your live demo in the browser.

Save changes (commit)

See troubleshooting if anything fails.

Once you've changed anything, open in Cursor, write a commit message in the Message field (a short summary of your changes).

If you wrote a message, press [Commit], then press [Sync].

The UI here is annoying and humiliating, I know.

You may also do it from GitHub Desktop.

If you're lost, open a Terminal, press Cmd/Ctrl+K and describe what you want from Git in plain English.

Deploy

Open package.json and run a deploy script:

If you get errors during deployment, copy them from terminal, paste them to Cursor's Composer, and it'll try to fix. Then retry deploying until it succeeds.

Then enable the website link on Github: uncheck and check back the ✅ Use your GitHub Pages website:

You should see your changes live.

Bring your idea

Now you can change this template into any front-end idea that you'd like to create. Depending on your feature set, you may or may not need a back-end - see below for suggestions.

Tips

• First two weeks of Cursor are free. If it says "no more free completions": we don't use them, Composer isn't "completions"
• Break down new functionality into smallest possible bits. Don't bundle several unrelated features: if you get an error for one of them, you'll lose more time retrying
• Once a Cursor made any small step in the right direction - commit
• Press "+" to start a new Composer and erase unnecessary previous context. Cursor knows what you did before because it looks into the current code
• If Cursor broke things: either Reject All, press "+" and start from the last commit; or try 2-3 attempts at sending error messages to it and ask to fix
• Use @Codebase and also mention all files that might have a relevant context
• Ask Cursor to add a debug output and paste it to composer
• Ask Cursor to add a debug UI at the right place in your application. Ask to print out all relevant app state there
• Try attaching reference screenshots and mockups as images to Composer
• Try building anything with OpenAI API, use @OpenAI
• Use @Docs and @Web
• Search Youtube for tips
• Read about features
• Read the docs
• https://cursorcasts.com/
• https://github.com/PatrickJS/awesome-cursorrules and https://cursor.directory/
• https://v0.dev/ and shadcn/ui

React vs Vanilla JS

Why do we need a framework like React if the generation works nice even in a plain HTML?

My instinctive answer would be "because it scales better": as you grow your app, add more features, libraries, complexity, pages, sections, state - React manages it better. But that's a dev's answer - because React helps you manage the complexity of reasoning about your code and debugging it.

LLMs take the long generation for granted. However, that doesn't mean it's always error-prone. A result depends so much from precise wording, a thoroughly explained mental model of your app and your features, a lot of debug output added at a right time etc.

So I'd still bet on that with React+TypeScript you'll be able to integrate whatever you need - modern UI kits, payment processing, maps, animations, nav, charts, drag&drop, optimistic updates, dynamic loading - easier and faster.

This is so tough, can I do it simpler?

You can try Replit Agent, although this will cost you $25 (no free trial). UX/vision-wise, it's mind-blowing. However, I can't get any meaningful results out of it so far. Also, it's heavily leaning towards Flask.

Worth trying, but it's 2024, so LLMs can still be silly.

Do I need a backend?

If you simply want to persist data, ask Cursor to save data in local storage.

If you need to persist it across users or devices, ask Cursor to use Firestore

If you need authorization, ask Cursor to use Firebase Authentication. I recommend you to start with just the Google authorization - it's the easiest to support in the long term.

If you need a logic to process user's data on the backend - start with Firebase Cloud Functions

Adding Firestore to the project

1. Ask Cursor:

Save data to Firestore

2. Log into https://console.firebase.google.com/
3. Create a project.
4. Select "Cloud Firestore", create a database in test mode:

6. In ⚙️ Project Settings create a web app </> (no Firebase Hosting needed):

8. Copy firebaseConfig to the file that Cursor created for it:

const firebaseConfig = {
  apiKey: "AIzaNdPrtYYZO3Mo9gmNTQFwqI8fSdn-jKTuWA",
  authDomain: "your-app-43gh9.firebaseapp.com",
  projectId: "your-app-43gh9",
  storageBucket: "your-app-43gh9.appspot.com",
  messagingSenderId: "783999999999",
  appId: "1:783553619737:web:dff6fce9589deaf34",
  measurementId: "G-JL7GNDPV6V"
};

9. Reload your app, make sure it has saved the data to the database.
10. Open your database and try to see it there:

10. If something breaks, ask Cursor to add a debug output for all Firebase requests.

How to create a Telegram bot?

1. Create an empty folder on your computer.
2. File -> Open Folder it in Cursor.
3. Cmd/Ctrl+I, type create a simple telegram bot.
   • Read carefully what it tells you to do
   • If something doesn't work, replace pip with pip3 and python with python3
   • You need to kill (Ctrl+C) and rerun your python3 bot.py after every code change - since python scripts don't automatically reload after their code has been changed.

Troubleshooting

If you encountered a tricky situation while running this guide, please send screenshots to cxielamiko@gmail.com or Vitaly Pavlenko on Telegram so I can add the fix for it to

Git authenticity

Type yes, Enter.

Empty commit message

Type fix in the file COMMIT_EDITMSG (on line 1), then Save the current file.

Next time write a commit message right in the message box:

First time Git configuration

If you see this:

Then open any terminal and enter these two lines, modifying their values with your personal data. This marks commits wherever you push your code - most likely, on Github:

git config --global user.email "YOUR_EMAIL@gmail.com"

git config --global user.name "JANE DOE"