Update getting started doc to use vite (#11352)

Author: gento-ogane

docs/source/data/queries.mdx

@@ -24,7 +24,7 @@ The `useQuery` [React hook](https://react.dev/reference/react) is the primary AP
 
 Let's look at an example. First, we'll create a GraphQL query named `GET_DOGS`. Remember to wrap query strings in the `gql` function to parse them into query documents:
 
-```jsx title="index.js"
+```js title="index.js"
 import { gql, useQuery } from '@apollo/client';
 
 const GET_DOGS = gql`

docs/source/get-started.mdx

@@ -10,7 +10,7 @@ Hello! 👋 This short tutorial gets you up and running with Apollo Client.
 
 To start this tutorial, do one of the following:
 
-- Create a new React project locally with [Create React App](https://create-react-app.dev/), or
+- Create a new React project locally with [Vite](https://vitejs.dev/), or
 - Create a new React sandbox on [CodeSandbox](https://codesandbox.io/).
 
 ## Step 2: Install dependencies
@@ -34,15 +34,15 @@ Our example application will use the [FlyBy GraphQL API](https://flyby-router-de
 
 With our dependencies set up, we can now initialize an `ApolloClient` instance.
 
-In `index.js`, let's first import the symbols we need from `@apollo/client`:
+In `main.jsx`, let's first import the symbols we need from `@apollo/client`:
 
-```js title="index.js"
+```jsx title="main.jsx"
 import { ApolloClient, InMemoryCache, ApolloProvider, gql } from '@apollo/client';
 ```
 
 Next we'll initialize `ApolloClient`, passing its constructor a configuration object with the `uri` and `cache` fields:
 
-```js title="index.js"
+```jsx title="main.jsx"
 const client = new ApolloClient({
   uri: 'https://flyby-router-demo.herokuapp.com/',
   cache: new InMemoryCache(),
@@ -54,9 +54,9 @@ const client = new ApolloClient({
 
 That's it! Our `client` is ready to start fetching data. Now before we start using Apollo Client with React, let's first try sending a query with plain JavaScript.
 
-In the same `index.js` file, call `client.query()` with the query string (wrapped in the `gql` template literal) shown below:
+In the same `main.jsx` file, call `client.query()` with the query string (wrapped in the `gql` template literal) shown below:
 
-```js title="index.js"
+```jsx title="main.jsx"
 // const client = ...
 
 client
@@ -85,9 +85,9 @@ Let's look at how that works!
 
 You connect Apollo Client to React with the `ApolloProvider` component. Similar to React's [`Context.Provider`](https://react.dev/reference/react/useContext), `ApolloProvider` wraps your React app and places Apollo Client on the context, enabling you to access it from anywhere in your component tree.
 
-In `index.js`, let's wrap our React app with an `ApolloProvider`. We suggest putting the `ApolloProvider` somewhere high in your app, above any component that might need to access GraphQL data.
+In `main.jsx`, let's wrap our React app with an `ApolloProvider`. We suggest putting the `ApolloProvider` somewhere high in your app, above any component that might need to access GraphQL data.
 
-```jsx title="index.js" {15-17}
+```jsx title="main.jsx" {15-17}
 import React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
@@ -112,9 +112,9 @@ root.render(
 
 After your `ApolloProvider` is hooked up, you can start requesting data with `useQuery`. The `useQuery` hook is a [React hook](https://react.dev/reference/react) that shares GraphQL data with your UI.
 
-Switching over to our `App.js` file, we'll start by replacing our existing file contents with the code snippet below:
+Switching over to our `App.jsx` file, we'll start by replacing our existing file contents with the code snippet below:
 
-```js title="App.js"
+```jsx title="App.jsx"
 // Import everything needed to use the `useQuery` hook
 import { useQuery, gql } from '@apollo/client';
 
@@ -129,7 +129,7 @@ export default function App() {
 
 We can define the query we want to execute by wrapping it in the `gql` template literal:
 
-```js title="App.js"
+```jsx title="App.jsx"
 const GET_LOCATIONS = gql`
   query GetLocations {
     locations {
@@ -144,7 +144,7 @@ const GET_LOCATIONS = gql`
 
 Next, let's define a component named `DisplayLocations` that executes our `GET_LOCATIONS` query with the `useQuery` hook:
 
-```js title="App.js" {2}
+```jsx title="App.jsx" {2}
 function DisplayLocations() {
   const { loading, error, data } = useQuery(GET_LOCATIONS);
 
@@ -171,7 +171,7 @@ Whenever this component renders, the `useQuery` hook automatically executes our
 
 Finally, we'll add `DisplayLocations` to our existing component tree:
 
-```jsx title="App.js" {6}
+```jsx title="App.jsx" {6}
 export default function App() {
   return (
     <div>