updated presentation

    }

    .display.math{display: block; text-align: center; margin: 0.5rem auto;}

    /* CSS for syntax highlighting */

    html { -webkit-text-size-adjust: 100%; }

    pre > code.sourceCode { white-space: pre; position: relative; }

    pre > code.sourceCode > span { line-height: 1.25; }

    pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }

    pre > code.sourceCode > span:empty { height: 1.2em; }

    .sourceCode { overflow: visible; }

    code.sourceCode > span { color: inherit; text-decoration: inherit; }

    div.csl-bib-body { }

    div.csl-entry {

      clear: both;

      margin-bottom: 0em;

    }

    .hanging-indent div.csl-entry {

      margin-left:2em;

class="slide level2 small-header">

<h2 class="small-header">Development and Deployment</h2>

<div style="font-size: 20pt">

<ul>

<li><strong>Steps to develop and build a React app</strong>:</li>

</ul>

<!-- **Steps to develop and build a React app**: -->

<ol type="1">

<li><strong>Development</strong>:

<ul>

</ol>

</div>

</section>

<section id="development-with-create-react-app"

class="slide level2 small-header">

<h2 class="small-header">Development with <br>

<code>create-react-app</code></h2>

<div style="font-size: 20pt; text-align: left">

<p>Create React App (CRA):</p>

<ul>

<li>Tool provided by the React team to quickly scaffold a new React

project.</li>

<li>Includes pre-configured Webpack, Babel, ESLint, and testing

setup.</li>

<li>Use: npx create-react-app my-app

<ul>

<li>🙂 Good for beginners, stable, batteries-included.</li>

<li>😐 Slow dev server and build times.</li>

<li>😐 Lacks support for modern tooling (e.g., Vite, ES modules, SSR).

<!-- - Customizing requires "ejecting" (not ideal). --></li>

</ul></li>

</ul>

<p>More Modern Alternatives:</p>

<ul>

<li><a href="https://vite.dev/">Vite (recommended)</a>

<!-- - Super-fast dev server using native ES modules.

  - Optimized build with Rollup. -->

<ul>

<li>Great DX (developer experience).</li>

<li>React template: npm create vite@latest my-app – –template react</li>

</ul></li>

<li><a href="https://nextjs.org/">Next.js</a>

<ul>

<li>Full-stack React framework.

<!-- - Supports SSR, SSG, and API routes. --></li>

<li>Best for production apps with routing, SEO, etc.

<!-- - [Remix](https://remix.run/)

- Framework focused on UX and routing.

- Emphasizes web standards and server-side data loading. --></li>

</ul></li>

</ul>

</div>

</section>

<section id="containerization-1" class="slide level2 small-header">

<h2 class="small-header">Containerization</h2>

<div style="font-size: 20pt">

<section id="references" class="title-slide slide level1">

<h1>References</h1>

<div id="refs" class="references csl-bib-body hanging-indent"

data-line-spacing="2" role="list">

data-entry-spacing="0" data-line-spacing="2" role="list">

<div id="ref-Dory2012Introduction" class="csl-entry" role="listitem">

Dory, M., Parrish, A., &amp; Berg, B. (2012). <em>Introduction to

tornado: Modern web applications with python</em>. O’Reilly Media.

<div style="font-size: 20pt">

- **Steps to develop and build a React app**:

<!-- **Steps to develop and build a React app**: -->

1. **Development**:

   - Set up the project using tools like `create-react-app` or Vite.

---

## Development with <br> `create-react-app` {.small-header}

<div style="font-size: 20pt; text-align: left">

Create React App (CRA):

- Tool provided by the React team to quickly scaffold a new React project.

- Includes pre-configured Webpack, Babel, ESLint, and testing setup.

- Use: npx create-react-app my-app

  - 🙂 Good for beginners, stable, batteries-included.

  - 😐 Slow dev server and build times.

  - 😐 Lacks support for modern tooling (e.g., Vite, ES modules, SSR).

  <!-- - Customizing requires "ejecting" (not ideal). -->

More Modern Alternatives:

- [Vite (recommended)](https://vite.dev/)

  <!-- - Super-fast dev server using native ES modules.

  - Optimized build with Rollup. -->

  - Great DX (developer experience).

  - React template: npm create vite@latest my-app -- --template react

- [Next.js](https://nextjs.org/)

  - Full-stack React framework.

  <!-- - Supports SSR, SSG, and API routes. -->

  - Best for production apps with routing, SEO, etc.

<!-- - [Remix](https://remix.run/)

  - Framework focused on UX and routing.

  - Emphasizes web standards and server-side data loading. -->

</div>

---

## Containerization {.small-header}

<div style="font-size: 20pt">