Jon Garrett

Using ChatGPT to use Vite for the first time

QUICK NOTE: I've used block quotes to reflect which parts of the below text are copied from copilot's output.

The scope of this request to Copilot was larger than recommended, but I wanted to see how Copilot handled it for myself.

At first I requested ChatGPT tell me how to set up a new React project using Vite. Realizing that I forgot to mention TypeScript, I followed up with “Will this include TypeScript?”

No, the command I provided earlier (npm create vite@latest my-react-app --template react) does not include TypeScript by default. It sets up a plain JavaScript React project.

However, you can easily set up a Vite project with React and TypeScript. Here's how you can do that:

Steps to Create a Vite + React + TypeScript Project

1. Create a New Project with TypeScript Template

Instead of using the react template, use the react-ts template to include TypeScript:

npm create vite@latest my-react-ts-app --template react-ts

This will create a Vite project with React and TypeScript pre-configured.

2. Navigate to the Project Directory

cd my-react-ts-app

3. Install Dependencies

Now, install the necessary dependencies:

npm install

4. Start the Development Server

Once the installation is complete, you can start the development server:

npm run dev

Your app will be running at http://localhost:5173.

Files & Structure for TypeScript

• Your main entry file will now be src/main.tsx (note the .tsx extension for TypeScript JSX files).
• Your root component will be src/App.tsx.
• TypeScript configuration will be set up in tsconfig.json.

---

By using the react-ts template, you'll automatically get TypeScript support, type definitions for React, and a proper tsconfig.json setup. You can now write React components using TypeScript throughout the project.

Switching an Existing Project to TypeScript

If you initially created a project with JavaScript and later decide to add TypeScript, you can follow these steps:

1. Install TypeScript and Types for React

npm install --save-dev typescript @types/react @types/react-dom

2. Rename JavaScript Files to TypeScript

Rename your files from .js to .tsx (for files that contain JSX) or .ts (for regular TypeScript files).

3. Create a tsconfig.json File

You can create a TypeScript configuration file by running:

npx tsc --init

Then you can configure it based on your project needs. Vite will automatically pick up your TypeScript configuration.

4. Adjust JSX Syntax

Make sure that your JSX files are using TypeScript syntax (e.g., type annotations, interfaces, etc.).

---

Let me know if you need more help with setting up TypeScript!

Bada boom.

Then I pasted the response into my markdown file and asked copilot to format that lovely block quote above. It's a bit more concise/direct that the vite docs themselves, but steps 2-4 are the output of create...

Copilot, Set up routes for this project

I probably should have been more specific, but I did get directions to install react-router-dom and some code to paste into my main.tsx file to nest routes under the default Vite App.

And look at thi

Copilot, create a file to contain a form using react hook form library

commit 1ace4525cdacba378b08a3f4967c842c9b308dfa

To create a form using the react-hook-form library, you can follow these steps:

1. Install react-hook-form:

   npm install react-hook-form

2. Create a new file for the form component. Let's name it LocationForm.tsx.

3. Implement the form using react-hook-form:

Here is an example implementation:

Well, it didn't tell me to include -s when I'm installing react-hook-form and the generated code didn't associate input labels with their inputs correctly.

<div>
  <label>Location:</label>
  <input {...register('location', { required: true })} />
  {errors.location && <span>This field is required</span>}
</div>

This error also let me know that my eslint config didn't have jsxA11y set up.

After setting up jsxA11y and prompting copilot to fix it inline we get:

<div>
  <label htmlFor="clue">Clue:</label>
  <input id="clue" {...register('clue', { required: true })} />
  {errors.clue && <span>This field is required</span>}
</div>

This works, but it's a little too verbose. My preferred solution would be:

<label>
  Location:
  <input {...register('location', { required: true })} />
</label>

I'm coding less and code reviewing more. Every programmer's dream.