Show page

Differences

This shows you the differences between two versions of the page.

--- se:labs:03 [2025/10/19 18:58]
ilie_cristian.sandu [Adding Interactivity with State]
+++ se:labs:03 [2025/10/19 20:34] (current)
ilie_cristian.sandu [Tasks]
@@ Line 400: / Line 400: @@
 ===== Tailwind CSS =====
-Tailwind CSS is a utility-first CSS framework that allows you to build custom designs quickly and efficiently. Unlike traditional CSS frameworks, which come with predefined components, Tailwind provides low-level utility classes for controlling layout, color, spacing, typography, and more, directly in your HTML. This approach gives you more flexibility without writing custom CSS.
+Tailwind CSS is a **utility-first CSS framework** that allows you to build custom designs quickly and efficiently.
+Unlike traditional CSS frameworks, which come with predefined components, Tailwind provides low-level utility classes for controlling layout, color, spacing, typography, and more — directly in your React components.
+This approach gives you more flexibility without writing custom CSS.
 Some key concepts of Tailwind CSS:
-  * **Utility-First**: Tailwind provides small, single-purpose classes for styling (e.g., `**p-4**` for padding, `**text-center**` for text alignment).
+  * **Utility-First**: Tailwind provides small, single-purpose classes for styling (for example, `p-4` for padding or `text-center` for text alignment).
   * **Responsive Design**: Tailwind has built-in support for responsive design, enabling you to style elements differently based on screen size.
-  * **Customization**: You can customize or extend Tailwind's default configuration, adding your own color palettes, spacing, and more.
+  * **Customization**: You can customize or extend Tailwind's default configuration by adding your own color palettes, spacing, or typography.
-Examples:
 **Centering Text**
-To center-align text and add some padding, you can use the `**text-center**` and `**p-4**` utilities:
+To center-align text and add some padding in React, you can use the `text-center` and `p-4` utilities with `className`:
-<code html>
+<code javascript>
-<div class="text-center p-4">
+export default function CenteredText() {
-  <h1 class="text-xl font-bold">Hello, Tailwind CSS!</h1>
+  return (
-</div>
+    <div className="text-center p-4">
+      <h1 className="text-xl font-bold">Hello, Tailwind CSS!</h1>
+    </div>
+  );
+}
 </code>
 **Responsive Layout**
-With Tailwind, you can easily create responsive layouts using its responsive utilities. For instance, to set different column layouts on different screen sizes, you might do:
+With Tailwind, you can easily create responsive layouts using its responsive utilities.
+For instance, to set different column layouts on different screen sizes, you might do:
-<code html>
+<code javascript>
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+export default function ResponsiveGrid() {
-  <div class="bg-blue-200 p-4">Item 1</div>
+  return (
-  <div class="bg-blue-200 p-4">Item 2</div>
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-  <div class="bg-blue-200 p-4">Item 3</div>
+      <div className="bg-blue-200 p-4">Item 1</div>
-  <div class="bg-blue-200 p-4">Item 4</div>
+      <div className="bg-blue-200 p-4">Item 2</div>
-</div>
+      <div className="bg-blue-200 p-4">Item 3</div>
+      <div className="bg-blue-200 p-4">Item 4</div>
+    </div>
+  );
+}
 </code>
 **Button Styling**
-Tailwind allows you to create buttons with custom styles by combining utility classes:
+Tailwind allows you to create buttons with custom styles by combining multiple utility classes.
+In React, use `className` for the styling attribute:
-<code html>
+<code javascript>
-<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+export default function StyledButton() {
-  Click Me
+  return (
-</button>
+    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+      Click Me
+    </button>
+  );
+}
 </code>
+**More Examples**
+Tailwind also provides utilities for:
+  * **Text colors** – `text-red-500`, `text-gray-700`, `text-green-600`
+  * **Backgrounds** – `bg-blue-100`, `bg-yellow-200`
+  * **Spacing** – `m-4`, `p-2`, `px-6`
+  * **Flexbox and grid layouts** – `flex`, `items-center`, `justify-between`, `grid-cols-3`
+  * **Typography** – `font-bold`, `text-lg`, `tracking-wide`
+You can find the full list of utilities and examples in the official Tailwind CSS documentation:
+**[[https://tailwindcss.com/docs|https://tailwindcss.com/docs]]**
+===== (Optional) Useful Resources for Modern React Development =====
+Once you understand the basics of React, there are several modern libraries and frameworks that can help you build professional, scalable applications more efficiently.
+Below are some of the most widely used tools in the React ecosystem.
+=== ShadCN/UI ===
+[[https://ui.shadcn.com/|ShadCN/UI]] is a modern React component library built with **Tailwind CSS** and **Radix UI**.
+It provides ready-to-use, accessible, and themable components (buttons, dialogs, data tables, forms, tooltips, etc.) that you can copy directly into your project and customize.
+  * Designed for flexibility — you own the code of each component.
+  * Uses Tailwind for styling.
+  * Fully compatible with Next.js and Vite setups.
+**Example (Button component):**
+<code javascript>
+import { Button } from "@/components/ui/button";
+export default function Example() {
+  return <Button variant="outline">Click me</Button>;
+}
+</code>
+=== TanStack React Query ===
+[[https://tanstack.com/query/latest|TanStack Query (React Query)]] is a powerful library for **data fetching, caching, and synchronization** in React apps.
+It simplifies working with APIs by managing loading states, caching results, refetching automatically, and handling background updates — all with minimal code.
+**Example (fetching data):**
+<code javascript>
+import { useQuery } from "@tanstack/react-query";
+async function fetchUsers() {
+  const res = await fetch("https://jsonplaceholder.typicode.com/users");
+  return res.json();
+}
+export default function Users() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["users"],
+    queryFn: fetchUsers,
+  });
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error loading data</p>;
+  return (
+    <ul>
+      {data.map((user) => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}
+</code>
+=== TanStack Table ===
+[[https://tanstack.com/table/latest|TanStack Table]] (formerly React Table) is a lightweight headless table library for building **interactive and customizable data tables**.
+You control how the table is rendered — it only provides the logic for sorting, filtering, pagination, and selection.
+**Example (basic table setup):**
+<code javascript>
+import { useReactTable, getCoreRowModel } from "@tanstack/react-table";
+const data = [
+  { name: "Alice", age: 25 },
+  { name: "Bob", age: 30 },
+];
+const columns = [
+  { header: "Name", accessorKey: "name" },
+  { header: "Age", accessorKey: "age" },
+];
+export default function BasicTable() {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+  return (
+    <table>
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {headerGroup.headers.map((header) => (
+              <th key={header.id}>{header.column.columnDef.header}</th>
+            ))}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <tr key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <td key={cell.id}>{cell.getValue()}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+</code>
+=== Other Notable Tools ===
+  * **[[https://nextjs.org/|Next.js]]** – React framework for building full-stack apps with server-side rendering and routing.
+  * **[[https://react.dev/learn|React Docs]]** – The official React documentation (excellent for up-to-date examples).
+  * **[[https://tailwindcss.com/docs|Tailwind CSS Docs]]** – Learn how to customize design tokens, responsive utilities, and themes.
+  * **[[https://radix-ui.com/|Radix UI]]** – Low-level, accessible UI primitives used by ShadCN/UI.
+  * **[[https://reactrouter.com/en/main|React Router]]** – Client-side routing for React apps.
+  * **[[https://formik.org/|Formik]]** and **[[https://react-hook-form.com/|React Hook Form]]** – For building and validating forms easily.
+✅ **Tip:**
+These libraries are not required for this lab, but they are very common in real-world React projects and can greatly improve developer productivity and user experience.
@@ Line 445: / Line 597: @@
 ====== Tasks ======
-  - Download the generated project {{:se:labs:se-lab3-tasks.zip|}} (and run `npm install` and `npm start`)
+  - Download the generated project {{:se:labs:se-lab3-tasks.zip|}} (and run **npm install** and **npm run dev**)
   - Create a to do list app:
-  - Implement the List component in `components/ToDoList.tsx`
+  - Implement the List component in **components/ToDoList.tsx**
-    - Create a new component in `components/` that will represent __a todo-list item__ that should have:
+    - Create a new component in **components/** that will represent __a todo-list item__ that should have:
       - text showing the description of the todo-list item
       - edit button that enable you to edit todo-item text

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/03.1760889539.txt.gz · Last modified: 2025/10/19 18:58 by ilie_cristian.sandu

Show page Old revisions

Media Manager Back to top