Provide people with tabs so they can use classes as well

Author: JoviDeCroock

website/pages/getting-started.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
@@ -19,7 +21,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
 ```
@@ -28,18 +30,16 @@ 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`:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
 ```javascript
-let { graphql, buildSchema } = require('graphql');
+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
-let rootValue = {
+const rootValue = {
   hello() {
     return 'Hello world!';
   },
@@ -53,7 +53,40 @@ graphql({
 }).then((response) => {
   console.log(response);
 });
-```
+````
+</Tabs.Tab>
+<Tabs.Tab>
+```javascript
+const { graphql, GraphQLSchema, GraphQLObjectType } = 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:
 

website/pages/running-an-express-graphql-server.mdx

@@ -3,14 +3,90 @@ title: Running an Express GraphQL Server
 sidebarTitle: Running Express + GraphQL
 ---
 
+import { Tabs } from 'nextra/components';
+
 The simplest way to run a GraphQL API server is to use [Express](https://expressjs.com), a popular web application framework for Node.js. You will need to install two additional dependencies:
 
-```bash
+```sh npm2yarn
 npm install express graphql-http graphql --save
 ```
 
 Let's modify our “hello world” example so that it's an API server rather than a script that runs a single query. We can use the 'express' module to run a webserver, and instead of executing a query directly with the `graphql` function, we can use the `graphql-http` library to mount a GraphQL API server on the “/graphql” HTTP endpoint:
 
+<Tabs items={['Template', 'Classes']}>
+  <Tabs.Tab>
+```javascript
+const { buildSchema } = require('graphql');
+const { createHandler } = require('graphql-http/lib/use/express');
+const express = require('express');
+
+// 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!';
+  },
+};
+
+const app = express();
+
+// Create and use the GraphQL handler.
+app.all(
+  '/graphql',
+  createHandler({
+    schema: schema,
+    rootValue: root,
+  }),
+);
+
+// Start the server at port
+app.listen(4000);
+console.log('Running a GraphQL API server at http://localhost:4000/graphql');
+````
+</Tabs.Tab>
+<Tabs.Tab>
+```javascript
+const { GraphQLObjectType, GraphQLSchema } = require('graphql');
+const { createHandler } = require('graphql-http/lib/use/express');
+const express = require('express');
+
+// 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!';
+  },
+};
+
+const app = express();
+
+// Create and use the GraphQL handler.
+app.all(
+  '/graphql',
+  createHandler({
+    schema: schema,
+    rootValue: root,
+  }),
+);
+
+// Start the server at port
+app.listen(4000);
+console.log('Running a GraphQL API server at http://localhost:4000/graphql');
+````
+  </Tabs.Tab>
+</Tabs>
+
 ```js
 const express = require('express');
 const { createHandler } = require('graphql-http/lib/use/express');