281 lesson10 (#317)

* Added Lesson 10

Added Lesson 10 to sidebar, globalTypes.ts.
Also added the Lesson 10 pages.

* Fixed a linter Warning

Moved 'react' import above the other imports in
Terminal.tsx

* Fixed spacing in text in Lesson 10

* Fixed Code snippet in Lesson 10

Added some words and spacing in Lesson 10

src/App.tsx

@@ -4,6 +4,7 @@ import Error404 from './pages/Error404';
 import Exercise1 from './pages/Exercise1';
 import Home from './pages/Home';
 import Lesson1 from './pages/Lesson1';
+import Lesson10 from './pages/Lesson10';
 import Lesson2_1 from './pages/Lesson2_1';
 import Lesson2_2 from './pages/Lesson2_2';
 import Lesson3 from './pages/Lesson3';
@@ -26,6 +27,7 @@ function App(): JSX.Element {
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/lesson-4" element={<Lesson4 />} />
           <Route path="/lesson-5" element={<Lesson5 />} />
+          <Route path="/lesson-10" element={<Lesson10 />} />
           <Route path="*" element={<Error404 />} />
         </Routes>
       </BrowserRouter>

src/components/Sidebar.tsx

@@ -91,6 +91,10 @@ export default function Sidebar(props: sidebarProps): JSX.Element {
       name: '8. References vs pointers',
       link: PageURLs.LESSON_8,
     },
+    {
+      name: '10. Dynamic Memory Allocation',
+      link: PageURLs.LESSON_10,
+    },
   ];
   const exerciseList = [
     {

src/components/Terminal.tsx

@@ -1,10 +1,10 @@
+import { useState } from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { FaRegCopy } from 'react-icons/fa';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import cpp from 'react-syntax-highlighter/dist/esm/languages/hljs/cpp';
 import atomOneLightCustom from '../styles/Terminal/atom-one-light-custom';
 import '../styles/Terminal/Terminal.scss';
-import { useState } from 'react';
 
 export interface TerminalProps {
   code: string;

src/pages/Lesson10.tsx

@@ -0,0 +1,95 @@
+import { FC } from 'react';
+import AppWrapper from '../components/AppWrapper';
+import NavButtons from '../components/NavButtons';
+import Terminal from '../components/Terminal';
+import { HeaderSections } from '../types/globalTypes';
+
+const Lesson10: FC = () => {
+  const code1 = `
+    class Node
+    {
+        int value;
+        Node* next;
+        Node(int val){value = val;}
+    };
+    `;
+
+  const code2 = `
+    Node* newNode = new Node(1); // make new node with value 1
+    cout << newNode->value << endl; // prints 1
+    `;
+
+  const code3 = `
+    vector<Node*> nodes; // vector of node pointers
+    nodes.push_back(newNode); // add node pointer to vector
+    cout << nodes[0]->value; // prints 1
+    `;
+
+  const pointerArrow = '->';
+
+  return (
+    <>
+      <AppWrapper section={HeaderSections.LESSON_10}>
+        <div className="page-wrapper">
+          <h1>Dynamic Memory Allocation</h1>
+          <p>
+            Let’s take a look at another common application of pointers: dynamic
+            memory allocation
+          </p>
+          <p>
+            Dynamic memory allocation is the process of creating new objects on
+            the heap dynamically based on the needs of the application instead
+            of on the stack like normal objects. The difference between stack
+            and heap is out of scope and unimportant for this learning lab, but
+            basically they are just different parts of memory.
+          </p>
+          <p>
+            Why would we want to dynamically create objects instead of creating
+            them normally? This is because we cannot put objects into a data
+            structure like an array or linked list, but we can put pointers to
+            those objects in these data structures. Dynamic memory allocation
+            enables this, especially with a dynamically sized data structure
+            like a vector or linked list.
+          </p>
+          <p>
+            So how do we dynamically allocate objects? In C++ we use the{' '}
+            <span className="code">new</span> keyword. Consider our Node class
+            from the linked list.
+          </p>
+
+          <div className="diagram">
+            <Terminal code={code1} />
+          </div>
+
+          <p>We can dynamically allocate a new Node like this:</p>
+
+          <div className="diagram">
+            <Terminal code={code2} />
+          </div>
+
+          <p>
+            Notice the <span className="code">{pointerArrow}</span> notation -
+            this is syntactic sugar for *(newNode).value. We use the{' '}
+            <span className="code">{pointerArrow}</span> notation when we want
+            to access an object’s members through a pointer.
+          </p>
+
+          <p>Then we can add it to a vector like this:</p>
+
+          <div className="diagram">
+            <Terminal code={code3} />
+          </div>
+
+          <p>
+            Dynamic memory has many applications! We encourage you to try using
+            this in your own applications! Now, you know everything you need to
+            complete the exercises!
+          </p>
+          <NavButtons page={13}></NavButtons>
+        </div>
+      </AppWrapper>
+    </>
+  );
+};
+
+export default Lesson10;

src/types/globalTypes.ts

@@ -15,6 +15,7 @@ export enum HeaderSections {
   EXERCISE_1 = 'Exercise 1',
   LESSON_4 = 'Lesson 4',
   LESSON_5 = 'Lesson 5',
+  LESSON_10 = 'Lesson 10',
 }
 
 // lessons and exercises may have multiple pages, this is their starting URL
@@ -30,6 +31,8 @@ export enum PageURLs {
   LESSON_6 = '/lesson-6',
   LESSON_7 = '/lesson-7',
   LESSON_8 = '/lesson-8',
+  LESSON_9 = '/lesson-9',
+  LESSON_10 = '/lesson-10',
   EXERCISE_1 = '/exercise-1',
   EXERCISE_2 = '/exercise-2',
   EXERCISE_3 = '/exercise-3',
@@ -49,5 +52,6 @@ export enum PageOrder {
   /*'/lesson-6',
   '/lesson-7',
   '/lesson-8', */
+  '/lesson-10',
   '/exercise-1',
 }