@freddyfazbear1904/rnpkg 1.0.0

package/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

package/App.jsx

@@ -0,0 +1,121 @@
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from './assets/vite.svg'
+import heroImg from './assets/hero.png'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <section id="center">
+        <div className="hero">
+          <img src={heroImg} className="base" width="170" height="179" alt="" />
+          <img src={reactLogo} className="framework" alt="React logo" />
+          <img src={viteLogo} className="vite" alt="Vite logo" />
+        </div>
+        <div>
+          <h1>Get started</h1>
+          <p>
+            Edit <code>src/App.jsx</code> and save to test <code>HMR</code>
+          </p>
+        </div>
+        <button
+          className="counter"
+          onClick={() => setCount((count) => count + 1)}
+        >
+          Count is {count}
+        </button>
+      </section>
+
+      <div className="ticks"></div>
+
+      <section id="next-steps">
+        <div id="docs">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#documentation-icon"></use>
+          </svg>
+          <h2>Documentation</h2>
+          <p>Your questions, answered</p>
+          <ul>
+            <li>
+              <a href="https://vite.dev/" target="_blank">
+                <img className="logo" src={viteLogo} alt="" />
+                Explore Vite
+              </a>
+            </li>
+            <li>
+              <a href="https://react.dev/" target="_blank">
+                <img className="button-icon" src={reactLogo} alt="" />
+                Learn more
+              </a>
+            </li>
+          </ul>
+        </div>
+        <div id="social">
+          <svg className="icon" role="presentation" aria-hidden="true">
+            <use href="/icons.svg#social-icon"></use>
+          </svg>
+          <h2>Connect with us</h2>
+          <p>Join the Vite community</p>
+          <ul>
+            <li>
+              <a href="https://github.com/vitejs/vite" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#github-icon"></use>
+                </svg>
+                GitHub
+              </a>
+            </li>
+            <li>
+              <a href="https://chat.vite.dev/" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#discord-icon"></use>
+                </svg>
+                Discord
+              </a>
+            </li>
+            <li>
+              <a href="https://x.com/vite_js" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#x-icon"></use>
+                </svg>
+                X.com
+              </a>
+            </li>
+            <li>
+              <a href="https://bsky.app/profile/vite.dev" target="_blank">
+                <svg
+                  className="button-icon"
+                  role="presentation"
+                  aria-hidden="true"
+                >
+                  <use href="/icons.svg#bluesky-icon"></use>
+                </svg>
+                Bluesky
+              </a>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <div className="ticks"></div>
+      <section id="spacer"></section>
+    </>
+  )
+}
+
+export default App

package/ass1.jsx

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client";
+
+function App() {
+  // State for form fields
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [gender, setGender] = useState("");
+  const [hobbies, setHobbies] = useState([]);
+  const [department, setDepartment] = useState("");
+  const [file, setFile] = useState(null);
+
+  // Handle checkbox (multiple values)
+  const handleHobbies = (e) => {
+    const value = e.target.value;
+
+    if (hobbies.includes(value)) {
+      setHobbies(hobbies.filter((h) => h !== value));
+    } else {
+      setHobbies([...hobbies, value]);
+    }
+  };
+
+  // Form submit
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // Validation
+    if (!name || !email || !gender || hobbies.length === 0 || !department || !file) {
+      alert("Please fill all fields 😤");
+      return;
+    }
+
+    if (!email.includes("@")) {
+      alert("Invalid email");
+      return;
+    }
+
+    // Success
+    alert("Form submitted successfully ✅");
+    // Reset form
+    setName("");
+    setEmail("");
+    setGender("");
+    setHobbies([]);
+    setDepartment("");
+    setFile(null);
+  };
+
+  return (
+    <div>
+      <h1>Student Registration Form</h1>
+      <form onSubmit={handleSubmit}>
+        {/* Name */}
+        <input
+          type="text"
+          placeholder="Enter Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <br /><br />
+
+        {/* Email */}
+        <input
+          type="email"
+          placeholder="Enter Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <br /><br />
+
+        {/* Gender (Radio) */}
+        <label>Gender:</label><br />
+        <input
+          type="radio"
+          value="Male"
+          checked={gender === "Male"}
+          onChange={(e) => setGender(e.target.value)}
+        /> Male
+
+        <input
+          type="radio"
+          value="Female"
+          checked={gender === "Female"}
+          onChange={(e) => setGender(e.target.value)}
+        /> Female
+        <br /><br />
+
+        {/* Hobbies (Checkbox) */}
+        <label>Hobbies:</label><br />
+        <input type="checkbox" value="Sports" onChange={handleHobbies} /> Sports
+        <input type="checkbox" value="Music" onChange={handleHobbies} /> Music
+        <input type="checkbox" value="Reading" onChange={handleHobbies} /> Reading
+        <br /><br />
+
+        {/* Dropdown */}
+        <label>Department:</label><br />
+        <select
+          value={department}
+          onChange={(e) => setDepartment(e.target.value)}
+        >
+          <option value="">Select Department</option>
+          <option value="CSE">CSE</option>
+          <option value="ECE">ECE</option>
+          <option value="ME">ME</option>
+        </select>
+        <br /><br />
+
+        {/* File Upload */}
+        <label>ID Proof:</label><br />
+        <input
+          type="file"
+          onChange={(e) => setFile(e.target.files[0])}
+        />
+        <br /><br />
+        {/* Submit */}
+        <button type="submit">Register</button>
+      </form>
+    </div>
+  );
+}
+// Render
+const root = ReactDOM.createRoot(document.getElementById("root3"));
+root.render(<App />);

package/ass2.jsx

@@ -0,0 +1,89 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client";
+
+function App() {
+  // Form state
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [department, setDepartment] = useState("");
+  const [workshop, setWorkshop] = useState("");
+
+  // Submitted data
+  const [submittedData, setSubmittedData] = useState(null);
+  // Handle submit
+  const handleSubmit = (e) => {
+    e.preventDefault(); // prevent page refresh
+    // Store submitted values
+    setSubmittedData({
+      name,
+      email,
+      department,
+      workshop
+    });
+    // Clear form (optional)
+    setName("");
+    setEmail("");
+    setDepartment("");
+    setWorkshop("");
+  };
+
+  return (
+    <div>
+      <h1>Workshop Registration</h1>
+      <form onSubmit={handleSubmit}>
+        {/* Name */}
+        <input
+          type="text"
+          placeholder="Enter Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <br /><br />
+        {/* Email */}
+        <input
+          type="email"
+          placeholder="Enter Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+        <br /><br />
+        {/* Department */}
+        <input
+          type="text"
+          placeholder="Enter Department"
+          value={department}
+          onChange={(e) => setDepartment(e.target.value)}
+        />
+        <br /><br />
+        {/* Workshop Dropdown */}
+        <select
+          value={workshop}
+          onChange={(e) => setWorkshop(e.target.value)}
+        >
+          <option value="">Select Workshop</option>
+          <option value="AI">AI</option>
+          <option value="Web Dev">Web Development</option>
+          <option value="Cybersecurity">Cybersecurity</option>
+        </select>
+        <br /><br />
+        {/* Submit */}
+        <button type="submit">Submit</button>
+      </form>
+
+      {/* DISPLAY DATA */}
+      {submittedData && (
+        <div>
+          <h2>Submitted Details</h2>
+          <p><b>Name:</b> {submittedData.name}</p>
+          <p><b>Email:</b> {submittedData.email}</p>
+          <p><b>Department:</b> {submittedData.department}</p>
+          <p><b>Workshop:</b> {submittedData.workshop}</p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Render
+const root = ReactDOM.createRoot(document.getElementById("root4"));
+root.render(<App />);

package/ass3.jsx

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client";
+
+/* =========================
+   CourseItem
+========================= */
+function CourseItem({ course }) {
+  return (
+    <div style={{ border: "1px solid black", margin: "10px", padding: "10px" }}>
+      <h3>{course.courseName}</h3>
+      <p><b>Instructor:</b> {course.instructor}</p>
+      <p><b>Credits:</b> {course.credits}</p>
+    </div>
+  );
+}
+
+/* =========================
+   CourseList
+========================= */
+function CourseList({ courses }) {
+  return (
+    <div>
+      <h2>Course List</h2>
+
+      {courses.map((course) => (
+        <CourseItem key={course.id} course={course} />
+      ))}
+    </div>
+  );
+}
+
+/* =========================
+   App (MAIN LOGIC)
+========================= */
+function App() {
+  // Initial courses
+  const [courses, setCourses] = useState([
+    { id: 1, courseName: "Machine Learning", instructor: "Dr. Kumar", credits: 4 },
+    { id: 2, courseName: "Computer Vision", instructor: "Dr. Anita", credits: 3 },
+    { id: 3, courseName: "Natural Language Processing", instructor: "Dr. Ravi", credits: 3 }
+  ]);
+
+  // Form inputs
+  const [courseName, setCourseName] = useState("");
+  const [instructor, setInstructor] = useState("");
+  const [credits, setCredits] = useState("");
+
+  // Add course function
+  const addCourse = (e) => {
+    e.preventDefault();
+
+    if (!courseName || !instructor || !credits) {
+      alert("Fill all fields 😤");
+      return;
+    }
+
+    const newCourse = {
+      id: courses.length + 1,
+      courseName,
+      instructor,
+      credits
+    };
+
+    // Update state
+    setCourses([...courses, newCourse]);
+
+    // Clear inputs
+    setCourseName("");
+    setInstructor("");
+    setCredits("");
+  };
+
+  return (
+    <div>
+      <h1>University Course Dashboard</h1>
+
+      {/* FORM TO ADD COURSE */}
+      <form onSubmit={addCourse}>
+        <input
+          type="text"
+          placeholder="Course Name"
+          value={courseName}
+          onChange={(e) => setCourseName(e.target.value)}
+        />
+
+        <input
+          type="text"
+          placeholder="Instructor"
+          value={instructor}
+          onChange={(e) => setInstructor(e.target.value)}
+        />
+
+        <input
+          type="number"
+          placeholder="Credits"
+          value={credits}
+          onChange={(e) => setCredits(e.target.value)}
+        />
+
+        <button type="submit">Add Course</button>
+      </form>
+
+      {/* DISPLAY COURSES */}
+      <CourseList courses={courses} />
+    </div>
+  );
+}
+
+/* =========================
+   RENDER
+========================= */
+const root = ReactDOM.createRoot(document.getElementById("root5"));
+root.render(<App />);

package/index.css

@@ -0,0 +1,111 @@
+:root {
+  --text: #6b6375;
+  --text-h: #08060d;
+  --bg: #fff;
+  --border: #e5e4e7;
+  --code-bg: #f4f3ec;
+  --accent: #aa3bff;
+  --accent-bg: rgba(170, 59, 255, 0.1);
+  --accent-border: rgba(170, 59, 255, 0.5);
+  --social-bg: rgba(244, 243, 236, 0.5);
+  --shadow:
+    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+
+  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
+  --mono: ui-monospace, Consolas, monospace;
+
+  font: 18px/145% var(--sans);
+  letter-spacing: 0.18px;
+  color-scheme: light dark;
+  color: var(--text);
+  background: var(--bg);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @media (max-width: 1024px) {
+    font-size: 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --text: #9ca3af;
+    --text-h: #f3f4f6;
+    --bg: #16171d;
+    --border: #2e303a;
+    --code-bg: #1f2028;
+    --accent: #c084fc;
+    --accent-bg: rgba(192, 132, 252, 0.15);
+    --accent-border: rgba(192, 132, 252, 0.5);
+    --social-bg: rgba(47, 48, 58, 0.5);
+    --shadow:
+      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+  }
+
+  #social .button-icon {
+    filter: invert(1) brightness(2);
+  }
+}
+
+body {
+  margin: 0;
+}
+
+#root {
+  width: 1126px;
+  max-width: 100%;
+  margin: 0 auto;
+  text-align: center;
+  border-inline: 1px solid var(--border);
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+h1,
+h2 {
+  font-family: var(--heading);
+  font-weight: 500;
+  color: var(--text-h);
+}
+
+h1 {
+  font-size: 56px;
+  letter-spacing: -1.68px;
+  margin: 32px 0;
+  @media (max-width: 1024px) {
+    font-size: 36px;
+    margin: 20px 0;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: 118%;
+  letter-spacing: -0.24px;
+  margin: 0 0 8px;
+  @media (max-width: 1024px) {
+    font-size: 20px;
+  }
+}
+p {
+  margin: 0;
+}
+
+code,
+.counter {
+  font-family: var(--mono);
+  display: inline-flex;
+  border-radius: 4px;
+  color: var(--text-h);
+}
+
+code {
+  font-size: 15px;
+  line-height: 135%;
+  padding: 4px 8px;
+  background: var(--code-bg);
+}

package/index.html

@@ -0,0 +1,84 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>pat3prac</title>
+    <style>
+      body{
+        background-color: teal;
+        color: white;
+      }
+    </style>
+  </head>
+  <body>
+    <hr>
+    <div id="root"></div>
+    <hr>
+    <div id="root2"></div>
+    <hr>
+    <button onclick="hello('John', 'Doe')">HI!!!</button>
+    <script>
+      class Car{
+        constructor(name){
+          this.name = name;
+        }
+      }
+      hello = (var1, var2) => {
+        alert("Hello! " + var1 + " " + var2);
+      }
+      const mycar = new Car("TOYOTA");
+      document.write(mycar.name);
+    </script>
+    <!-- Destructuring -->
+    <script>
+      function calculate(a,b){
+        add = a+b;
+        sub = a-b;
+        mul = a*b;
+        div = a/b;
+        return [add, sub, mul, div];
+      }
+      const [a,b,c,d] = calculate(10,7);
+      document.write("<br>" + a);
+      document.write("<br>" + b);
+      document.write("<br>" + c);
+      document.write("<br>" + d);
+    </script>
+    <hr>
+    <script>
+      const arr1 = [1,2,3];
+      const arr2 = [4,5,6];
+      const arrcomb = [...arr1,...arr2];
+      const [one,two,...rest] = arrcomb;
+      document.write("<br>" + one+"<br>"+rest+"<br>");
+      document.write(arrcomb);
+    </script>
+    <hr>
+    <script type="module">
+    import per from "/src/person.js";
+
+    const { name, age } = per();
+    document.getElementById("root").innerHTML += name;
+    </script>
+    <h1>HELLO</h1>
+    <hr>
+    <hr>
+    <h1>Assignment 1</h1>
+    <div id="root3"></div>
+    <hr>
+    <hr>
+    <h1>Assignment 2</h1>
+    <div id="root4"></div>
+    <hr>
+    <hr>
+    <h1>Assignment 3</h1>
+    <div id="root5"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/test.jsx"></script>
+    <script type="module" src="/src/ass1.jsx"></script>
+    <script type="module" src="/src/ass2.jsx"></script>
+    <script type="module" src="/src/ass3.jsx"></script>
+  </body>
+</html>

package/main.jsx

@@ -0,0 +1,264 @@
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useReducer,
+  useCallback,
+  useMemo
+} from "react";
+import ReactDOM from "react-dom/client";
+
+
+
+
+/* =========================
+   2. CLASS COMPONENT + LIFECYCLE
+========================= */
+
+class Car extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { color: "Red" };
+  }
+
+  componentDidMount() {
+    console.log("Mounted 🚗");
+  }
+
+  componentDidUpdate() {
+    console.log("Updated 🔄");
+  }
+
+  componentWillUnmount() {
+    console.log("Removed 💀");
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>{this.state.color} Car</h3>
+        <button onClick={() => this.setState({ color: "Blue" })}>
+          Change Color
+        </button>
+      </div>
+    );
+  }
+}
+
+/* =========================
+   3. CHILD → PARENT (LIFTING STATE)
+========================= */
+
+function Child({ sendData }) {
+  return (
+    <button onClick={() => sendData("Data from Child")}>
+      Send Data
+    </button>
+  );
+}
+
+/* =========================
+   4. REDUCER
+========================= */
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "inc":
+      return state + 1;
+    case "dec":
+      return state - 1;
+    default:
+      return state;
+  }
+};
+
+/* =========================
+   5. MAIN APP
+========================= */
+
+function App() {
+  /* =========================
+     STATE (useState)
+  ========================= */
+  const [count, setCount] = useState(0);
+  const [text, setText] = useState("");
+  const [message, setMessage] = useState("");
+
+  /* =========================
+     FORM STATE (Controlled)
+  ========================= */
+  const [name, setName] = useState("");
+  const [age, setAge] = useState("");
+
+  /* =========================
+     useRef
+  ========================= */
+  const inputRef = useRef();
+
+  /* =========================
+     useReducer
+  ========================= */
+  const [num, dispatch] = useReducer(reducer, 0);
+
+  /* =========================
+     useEffect
+  ========================= */
+  useEffect(() => {
+    console.log("App Loaded");
+  }, []);
+
+  useEffect(() => {
+    console.log("Count changed:", count);
+  }, [count]);
+
+  /* =========================
+     EVENT HANDLING
+  ========================= */
+  const handleClick = () => {
+    setCount(count + 1);
+  };
+
+  /* =========================
+     HANDLING EVENTS WITH PARAMS
+  ========================= */
+  const greet = (name) => {
+    alert("Hello " + name);
+  };
+
+  /* =========================
+     FORM SUBMIT + VALIDATION
+  ========================= */
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (name === "" || age === "") {
+      alert("Fill all fields");
+      return;
+    }
+
+    alert(`Name: ${name}, Age: ${age}`);
+    setName("");
+    setAge("");
+  };
+
+  /* =========================
+     LIFTING STATE
+  ========================= */
+  const handleData = (data) => {
+    setMessage(data);
+  };
+
+  /* =========================
+     useCallback
+  ========================= */
+  const memoFunc = useCallback(() => {
+    console.log("Callback function");
+  }, []);
+
+  /* =========================
+     useMemo
+  ========================= */
+  const squared = useMemo(() => count * count, [count]);
+
+  /* =========================
+     LISTS + MAP
+  ========================= */
+  const items = ["React", "JSX", "Hooks"];
+
+  const isLoggedIn = true;
+
+  /* =========================
+     INLINE STYLE
+  ========================= */
+  const style = {
+    color: "blue",
+    border: "1px solid black",
+    padding: "5px"
+  };
+
+  return (
+    <div>
+      <h1>React Concepts Practice 🚀</h1>
+
+
+      {/* JSX EXPRESSION */}
+      <p>2 + 2 = {2 + 2}</p>
+
+      {/* EVENT HANDLING */}
+      <h2>Count: {count}</h2>
+      <button onClick={handleClick}>Increase</button>
+
+      {/* CONDITIONAL (TERNARY) */}
+      {isLoggedIn ? <p>Logged In</p> : <p>Logged Out</p>}
+
+      {/* LOGICAL AND */}
+      {count > 5 && <p>Count is greater than 5</p>}
+
+      {/* LIST + KEYS */}
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+
+      {/* CONTROLLED INPUT */}
+      <input
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <p>You typed: {text}</p>
+
+      {/* useRef */}
+      <input ref={inputRef} placeholder="Focus me" />
+      <button onClick={() => inputRef.current.focus()}>
+        Focus
+      </button>
+
+      {/* FORM */}
+      <form onSubmit={handleSubmit}>
+        <input
+          placeholder="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <input
+          placeholder="Age"
+          value={age}
+          onChange={(e) => setAge(e.target.value)}
+        />
+        <button type="submit">Submit</button>
+      </form>
+
+      {/* CHILD → PARENT */}
+      <Child sendData={handleData} />
+      <p>{message}</p>
+
+      {/* useReducer */}
+      <h2>Reducer: {num}</h2>
+      <button onClick={() => dispatch({ type: "inc" })}>+</button>
+      <button onClick={() => dispatch({ type: "dec" })}>-</button>
+
+      {/* useMemo */}
+      <p>Square: {squared}</p>
+
+      {/* CLASS COMPONENT */}
+      <Car />
+
+      {/* useCallback */}
+      <button onClick={memoFunc}>Run Callback</button>
+
+      {/* STYLING */}
+      <p style={style}>Styled Text</p>
+
+      {/* EVENT WITH PARAM */}
+      <button onClick={() => greet("Arin")}>Greet</button>
+    </div>
+  );
+}
+
+/* =========================
+   RENDER
+========================= */
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);

package/package.json

@@ -0,0 +1,13 @@
+{
+
+  "name": "@freddyfazbear1904/rnpkg",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "freddyfzbear19",
+  "license": "ISC",
+  "description": ""
+}

package/person.js

@@ -0,0 +1,6 @@
+const per = () => {
+    const name = "Arin";
+    const age = 20;
+    return { name, age };
+};
+export default per;

package/test.jsx

@@ -0,0 +1,159 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+// const myArray = [1,2,3,4,5];
+// const myList = myArray.map((num) => <li key={num}>{num}</li>);
+// const root = ReactDOM.createRoot(document.getElementById("root2"));
+// root.render(myList);
+
+
+// function Car(props) {
+//     return <h2>I am a {props.brand}!</h2>;
+// }
+// function Garage(){
+//     return(
+//         <>
+//         <p>Hello How are you?</p><br></br>
+//         <Car brand = "Toyota"/>
+//         </>
+//     )
+// }
+
+// class Car extends React.Component{
+//     constructor(){
+//         super();
+//         this.state = "red";
+//     }
+//     render(){
+//         return <h2>I am a {this.state} car!</h2>;
+//     }
+// }
+
+
+// function Car(props) {
+//     return <h2>I am a {props.brand}!</h2>;
+// }
+// function Garage(){
+//     const cars = 
+//     [
+//         {id: 1, brand: "Toyota"},
+//         {id: 2, brand: "Honda"},
+//         {id: 3, brand: "Ford"}
+//     ];
+//     return(
+//         <>
+//         <p>WHo Live in Me Garage?</p>
+//         {cars.map((car) => car.brand==='Ford' && <Car key={car.id} brand={car.brand}/> )}
+//         </>
+//     )
+// }
+
+
+
+// function MyForm(){
+//     return(
+//         <div>
+//             <form>
+//                 <label>Enter Your name:
+//                     <input type="text" name="name"/>
+//                     </label>
+//                     <br></br>
+//                     <label>Enter Your Password
+//                         <input type="password"/>
+//                     </label>
+//                     <br></br>
+//                     <label>What yo Feedback Cuh?
+//                         <input type="text"/>
+//                     </label>
+//                     <button type="submit">Submit</button>
+//             </form>
+//         </div>
+//     );
+// }
+
+import { useState } from "react";
+// function MyForm(){
+//     const [name,setName] = useState("");
+
+//     const handleSubmit = (e) => {
+//         e.preventDefault();
+//         alert("Form Submitted! Name: "+name);
+//     }
+//     return(
+//         <div>
+//             <form onSubmit={handleSubmit}>
+//                 <input type = "text" value = {name} onChange={(e)=> setName(e.target.value)}></input>
+//             </form>
+//         </div>
+//     )
+// }
+
+
+// function MyForm(){
+//     const [nameInput, setNameInput] = useState("");
+//     const [ageInput, setAgeInput] = useState("");
+//     const handleSubmit = (e) => 
+//         {
+//         e.preventDefault(); // prevents page reload
+
+//         if (nameInput === "" || ageInput === "") {
+//             alert("All fields required 😤");
+//             return;
+//         }
+
+//         alert(`Hello ${nameInput}, age ${ageInput}`);
+//         document.getElementById("root2").innerHTML += `<p>Hello ${nameInput}, age ${ageInput}</p>`;
+//     };
+//     return(
+//     <form onSubmit={handleSubmit}>
+//     <h3>Fill Form</h3>
+
+//     <input
+//         type="text"
+//         placeholder="Enter name"
+//         value={nameInput}
+//         onChange={(e) => setNameInput(e.target.value)}
+//     />
+
+//     <br />
+
+//     <input
+//         type="number"
+//         placeholder="Enter age"
+//         value={ageInput}
+//         onChange={(e) => setAgeInput(e.target.value)}
+//     />
+
+//     <br />
+
+//     <button type="submit">Submit</button>
+//     </form>)
+// }
+class Car extends React.Component {
+  constructor() {
+    super();
+    this.state = { color: "Red" };
+  }
+
+  componentDidMount() {
+    console.log("Mounted 😤");
+  }
+
+  componentDidUpdate() {
+    console.log("Updated 😤");
+  }
+
+  changeColor = () => {
+    this.setState({ color: "Blue" });
+  };
+
+  render() {
+    return (
+      <div>
+        <h2>I am a {this.state.color} Car 🚗</h2>
+        <button onClick={this.changeColor}>Change Color</button>
+      </div>
+    );
+  }
+}
+const root = ReactDOM.createRoot(document.getElementById("root2"));
+root.render(<Car />);