chore(use-state): add slides until useState hook

Author: AhsanAyaz

assets/images/virtual-dom/virtual-dom-1.png

@@ -0,0 +1,149 @@
+## Styling options in React
+
+--
+
+In React, there are multiple ways to apply styles, each with its advantages. Whether you're applying styles directly within your JSX or using sophisticated libraries, React makes it flexible to suit your project's needs.
+
+
+---
+
+#### Introduction to Styling in React
+
+- Inline Styling <!-- .element class="fragment" -->
+- CSS Modules <!-- .element class="fragment" -->
+- Styling Libraries <!-- .element class="fragment" -->
+  - Styled Components <!-- .element class="fragment" -->
+  - Material UI <!-- .element class="fragment" -->
+  - Tailwind CSS <!-- .element class="fragment" -->
+
+---
+
+#### Inline Styling
+
+- Definition: Applying styles directly within JSX using the style attribute.
+- Example:
+
+```jsx []
+const Counter = () => {
+  return <div style={{
+    margin: 10,
+    padding: 20,
+    border: '1px solid red'
+  }}>
+    Hello, counter
+  </div>
+}
+```
+--
+
+#### Inline Styling
+
+Pros and Cons:
+- Quick and easy for simple styles
+- Limited scalability and reusability
+
+---
+
+#### CSS Modules
+
+- Definition: A CSS file in which all class names and animation names are scoped locally by default.
+- Code example:
+
+```css []
+/* Button.module.css */
+.myButton {
+  padding: 10px 15px;
+  border: none;
+  background-color: blue;
+  color: white;
+  border-radius: 5px;
+}
+```
+<!-- .element: style="font-size: 1rem;" -->
+
+```jsx []
+// Button.jsx
+import { FC } from 'react';
+import styles from './Button.module.css';
+const ButtonProps = {
+  text: string;
+}
+const Button: FC<ButtonProps> = ({text}) => {
+  return <button className={styles.myButton}>{text}</button>;
+}
+```
+<!-- .element: style="font-size: 1rem;" -->
+
+--
+## CSS Modules
+
+Pros and Cons:
+- Scoped styles prevent conflicts
+- More maintainable than inline styles
+
+---
+
+## Styling Libraries
+
+--
+
+#### Styled Components
+
+- Utilize tagged template literals to style your components
+- Code example:
+
+```jsx []
+import styled from 'styled-components';
+import { FC } from 'react';
+
+const ButtonProps = {
+  text: string;
+}
+const StyledButton = styled.button`
+  background-color: purple;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 5px;
+  border: none;
+`;
+
+export const Button: FC<ButtonProps> = ({text}) => {
+  return <StyledButton>{text}</StyledButton>;
+}
+```
+
+--
+
+#### Material UI
+
+- A popular React UI framework that follows Google's Material Design.
+- Code example:
+
+```jsx []
+import Button from '@mui/material/Button';
+
+const App = () => {
+  return <Button variant="contained" color="primary">Hello World</Button>;
+}
+
+```
+
+--
+
+#### Tailwind CSS
+
+- One of my favorite libaries. A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
+- Code example:
+
+```jsx []
+import { FC } from 'react';
+
+const ButtonProps = {
+  text: string;
+}
+export const Button: FC<ButtonProps> = ({text}) => {
+  return <button class="h-10 px-6 font-semibold rounded-md bg-black text-white" type="submit">
+    {text}
+  </button>
+}
+```

assets/images/virtual-dom/virtual-dom-2.png

@@ -0,0 +1,38 @@
+## State management with `useState` hook
+
+--
+
+#### What does the `useState` hook help with?
+
+- Allows functional components to hold state <!-- .element class="fragment" -->
+- Returns a state variable and a function to update it <!-- .element class="fragment" -->
+
+--
+
+### Syntax
+
+```jsx []
+const [stateValue, setStateValue] = useState(initialStateValue);
+```
+
+--
+
+#### Detailed Example:
+
+```jsx []
+import { useState } from 'react';
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-xl">You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+
+```

assets/images/virtual-dom/virtual-dom-3.png

@@ -0,0 +1,64 @@
+# Virtual DOM in React
+
+---
+
+## What is DOM?
+
+--
+
+` DOM` stands for "Document Object Model". Which in simple words represents the UI of the application. Whenever the UI changes, the DOM gets updated.
+
+--
+
+As web developers, we usually end up using JavaScript to update/_manipulate_ <!-- .element: class="fragment" --> the DOM.
+
+---
+
+## What is Virtual DOM?
+
+The Virtual DOM is an in-memory representation of the real DOM elements. It's like a lightweight copy of the actual DOM, and it allows React to do its magic behind the scenes, optimizing updates and rendering speed.
+
+--
+<!-- .slide: data-auto-animate -->
+
+![Virtual Dom1](assets/images/virtual-dom/virtual-dom-1.png)
+<!-- .element data-id="vdom-img" -->
+
+--
+<!-- .slide: data-auto-animate -->
+
+![Virtual Dom2](assets/images/virtual-dom/virtual-dom-2.png)
+<!-- .element data-id="vdom-img" -->
+
+
+--
+<!-- .slide: data-auto-animate -->
+
+![Virtual Dom3](assets/images/virtual-dom/virtual-dom-3.png)
+<!-- .element data-id="vdom-img" -->
+
+
+--
+<!-- .slide: data-auto-animate -->
+
+![Virtual Dom4](assets/images/virtual-dom/virtual-dom-4.png)
+<!-- .element data-id="vdom-img" -->
+
+
+--
+<!-- .slide: data-auto-animate -->
+
+![Virtual Dom5](assets/images/virtual-dom/virtual-dom-5.png)
+<!-- .element data-id="vdom-img" -->
+
+---
+
+To recap, the Virtual DOM allows React to perform efficient updates by only redrawing nodes that have changed. This results in a significant performance gain, especially in complex applications.
+
+---
+
+## Recap and best practices
+
+- Recap: Virtual DOM updates only what is necessary
+- Best Practice: Minimize state updates to optimize React's performance better
+- Remember: Virtual DOM is not just a performance feature, it is a programming model that simplifies UI logic for React

assets/images/virtual-dom/virtual-dom-4.png

@@ -1 +1 @@
-[{"link":"component-lifecycle-react.md","title":"Component Life-cycle in React"},{"link":"conditional-rendering.md","title":"Dynamic & Conditional Rendering in React"},{"link":"event-handlers-in-react.md","title":"Handling events in React"},{"link":"react-fundamentals.md","title":"React Fundamentals"}]
+[{"link":"component-lifecycle-react.md","title":"Component Life-cycle in React"},{"link":"conditional-rendering.md","title":"Dynamic & Conditional Rendering in React"},{"link":"event-handlers-in-react.md","title":"Handling events in React"},{"link":"react-fundamentals.md","title":"React Fundamentals"},{"link":"styling-options.md","title":"Styling options in React"},{"link":"use-state.md","title":"State management with `useState` hook"},{"link":"virtual-dom.md","title":"Virtual DOM in React"}]

assets/images/virtual-dom/virtual-dom-5.png

@@ -0,0 +1,4 @@
+{
+  "watch": ["scripts/extractSlideData.js", "content/**"],
+  "ext": "md"
+}