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,18 +27,48 @@ 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');
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
+  ```javascript
+  const { graphql, buildSchema } = require('graphql');
 
 // Construct a schema, using GraphQL schema language
-let schema = buildSchema(`
-  type Query {
-    hello: String
-  }
-`);
+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
-let rootValue = {
+const rootValue = {
   hello() {
     return 'Hello world!';
   },
@@ -50,7 +82,10 @@ graphql({
 }).then((response) => {
   console.log(response);
 });
-```
+````
+
+  </Tabs.Tab>
+</Tabs>
 
 If you run this with: