Provide people with tabs so they can use classes as well

Author: JoviDeCroock

website/pages/index.mdx

@@ -3,6 +3,8 @@ title: Getting Started With GraphQL.js
 sidebarTitle: Getting Started
 ---
 
+import { Tabs } from 'nextra/components'
+
 {/* title can be removed in Nextra 4, since sidebar title will take from first h1 */}
 
 # Getting Started With GraphQL.js
@@ -16,7 +18,7 @@ and arrow functions, so if you aren't familiar with them you might want to read
 
 To create a new project and install GraphQL.js in your current directory:
 
-```bash
+```sh npm2yarn
 npm init
 npm install graphql --save
 ```
@@ -25,32 +27,67 @@ npm install graphql --save
 
 To handle GraphQL queries, we need a schema that defines the `Query` type, and we need an API root with a function called a “resolver” for each API endpoint. For an API that just returns “Hello world!”, we can put this code in a file named `server.js`:
 
-```javascript
-let { graphql, buildSchema } = require('graphql');
-
-// Construct a schema, using GraphQL schema language
-let schema = buildSchema(`
-  type Query {
-    hello: String
-  }
-`);
-
-// The rootValue provides a resolver function for each API endpoint
-let rootValue = {
-  hello() {
-    return 'Hello world!';
-  },
-};
-
-// Run the GraphQL query '{ hello }' and print out the response
-graphql({
-  schema,
-  source: '{ hello }',
-  rootValue,
-}).then((response) => {
-  console.log(response);
-});
-```
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
+  ```javascript
+  const { graphql, buildSchema } = require('graphql');
+
+  // Construct a schema, using GraphQL schema language
+  const schema = buildSchema(`
+    type Query {
+      hello: String
+    }
+  `);
+
+  // The rootValue provides a resolver function for each API endpoint
+  const rootValue = {
+    hello() {
+      return 'Hello world!';
+    },
+  };
+
+  // Run the GraphQL query '{ hello }' and print out the response
+  graphql({
+    schema,
+    source: '{ hello }',
+    rootValue,
+  }).then((response) => {
+    console.log(response);
+  });
+  ```
+  </Tabs.Tab>
+  <Tabs.Tab>
+  ```javascript
+  const { graphql, buildSchema } = require('graphql');
+
+  // Construct a schema
+  const schema = new GraphQLSchema({
+    query: new GraphQLObjectType({
+      name: 'Query',
+      fields: {
+        hello: { type: GraphQLString },
+      },
+    }),
+  });
+
+  // The rootValue provides a resolver function for each API endpoint
+  const rootValue = {
+    hello() {
+      return 'Hello world!';
+    },
+  };
+
+  // Run the GraphQL query '{ hello }' and print out the response
+  graphql({
+    schema,
+    source: '{ hello }',
+    rootValue,
+  }).then((response) => {
+    console.log(response);
+  });
+  ```
+  </Tabs.Tab>
+</Tabs>
 
 If you run this with: