Differences
This shows you the differences between two versions of the page.
|
se:labs:03 [2022/10/27 16:27] gabriel.nicolae3103 [Adding Interactivity with State] |
se:labs:03 [2024/11/01 19:07] (current) cosmin.dumitrache [Lab 03 - Introduction to React] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Lab 03 - Introduction to React ====== | + | ====== Lab 03 - Frontend ====== |
| =====React==== | =====React==== | ||
| Line 34: | Line 34: | ||
| <code javascript> | <code javascript> | ||
| - | const name = 'Andrei'; | + | const name: string = "Andrei"; |
| const element = <h1>Hello, {name}</h1>; | const element = <h1>Hello, {name}</h1>; | ||
| </code> | </code> | ||
| Line 89: | Line 89: | ||
| <code javascript> | <code javascript> | ||
| - | function HomePage({titleSE}) { | + | function HomePage({ titleSE: string }) { |
| return ( | return ( | ||
| <div> | <div> | ||
| Line 106: | Line 106: | ||
| <code javascript> | <code javascript> | ||
| - | function Greeting(props) { | + | function Greeting(props: any) { |
| - | const isLoggedIn = props.isLoggedIn; | + | const isLoggedIn: boolean = props.isLoggedIn; |
| if (isLoggedIn) { | if (isLoggedIn) { | ||
| return <h1>Welcome back!</h1>; | return <h1>Welcome back!</h1>; | ||
| Line 120: | Line 120: | ||
| <code javascript> | <code javascript> | ||
| - | function Header({ title }) { | + | function Header({ title }: { title: string }) { |
| - | return <h1>{title ? title : 'Default title'}</h1>; | + | return <h1>{title ? title : "Default title"}</h1>; |
| } | } | ||
| </code> | </code> | ||
| Line 136: | Line 136: | ||
| <code javascript> | <code javascript> | ||
| function HomePage() { | function HomePage() { | ||
| - | const names = ['POLI', 'ASE', 'UNIBUC']; | + | const names: string[] = ["POLI", "ASE", "UNIBUC"]; |
| return ( | return ( | ||
| Line 142: | Line 142: | ||
| <Header title="Universities" /> | <Header title="Universities" /> | ||
| <ul> | <ul> | ||
| - | {names.map((name) => ( | + | {names.map((name: string) => ( |
| <li key={name}>{name}</li> | <li key={name}>{name}</li> | ||
| ))} | ))} | ||
| Line 156: | Line 156: | ||
| <code javascript> | <code javascript> | ||
| - | const universitiesItems = universities.map((uni) => | + | const universitiesItems = universities.map((uni) => ( |
| - | <li key={uni.id}> | + | <li key={uni.id}>{uni.name}</li> |
| - | {uni.name} | + | )); |
| - | </li> | + | |
| - | ); | + | |
| </code> | </code> | ||
| Line 179: | Line 177: | ||
| function HomePage() { | function HomePage() { | ||
| // ... | // ... | ||
| - | const [likes, setLikes] = React.useState(0); | + | const [likes, setLikes] = React.useState<number>(0); |
| function handleClick() { | function handleClick() { | ||
| - | setLikes(likes => likes + 1); | + | setLikes((likes: number) => likes + 1); |
| } | } | ||
| Line 202: | Line 200: | ||
| <code javascript> | <code javascript> | ||
| export default function HomePage() { | export default function HomePage() { | ||
| - | const [inputField, setInputField] = useState(''); | + | const [inputField, setInputField] = useState<string>(""); |
| function handleChange(e) { | function handleChange(e) { | ||
| - | setInputField(e.target.value); | + | setInputField(e.target.value); |
| } | } | ||
| return ( | return ( | ||
| - | <div> | + | <div> |
| - | <input value={inputField} onChange={handleChange}/> | + | <input value={inputField} onChange={handleChange} /> |
| - | <h1>{inputField}</h1> | + | <h1>{inputField}</h1> |
| - | </div> | + | </div> |
| ); | ); | ||
| } | } | ||
| Line 223: | Line 221: | ||
| <code javascript> | <code javascript> | ||
| const Parent = () => { | const Parent = () => { | ||
| - | const [message, setMessage] = React.useState("Hello World"); | + | const [message, setMessage] = React.useState<string>("Hello World"); |
| - | const chooseMessage = (message) => { | + | const chooseMessage = (message: string) => { |
| setMessage(message); | setMessage(message); | ||
| }; | }; | ||
| Line 234: | Line 232: | ||
| ); | ); | ||
| }; | }; | ||
| - | const Child = ({ chooseMessage }) => { | + | const Child = ({ chooseMessage }: { chooseMessage: string }) => { |
| - | let msg = 'Goodbye'; | + | let msg: string = "Goodbye"; |
| return ( | return ( | ||
| <div> | <div> | ||
| - | <button onClick={() => chooseMessage(msg)}>Change Message</button> | + | <button onClick={() => chooseMessage(msg)}>Change Message</button> |
| </div> | </div> | ||
| ); | ); | ||
| Line 247: | Line 245: | ||
| + | ===== 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. | ||
| + | |||
| + | 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). | ||
| + | * **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. | ||
| + | Examples: | ||
| + | |||
| + | **Centering Text** | ||
| + | |||
| + | To center-align text and add some padding, you can use the `**text-center**` and `**p-4**` utilities: | ||
| + | |||
| + | <code html> | ||
| + | <div class="text-center p-4"> | ||
| + | <h1 class="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: | ||
| + | |||
| + | <code html> | ||
| + | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | ||
| + | <div class="bg-blue-200 p-4">Item 1</div> | ||
| + | <div class="bg-blue-200 p-4">Item 2</div> | ||
| + | <div class="bg-blue-200 p-4">Item 3</div> | ||
| + | <div class="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: | ||
| + | |||
| + | <code html> | ||
| + | <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> | ||
| + | Click Me | ||
| + | </button> | ||
| + | </code> | ||
| - | |||
| ====== Tasks ====== | ====== Tasks ====== | ||
| - | - Download the generated project {{:se:labs:se-lab3-tasks.zip|}} (amd run npm install and npm run dev) | + | - Download the generated project {{:se:labs:se-lab3-tasks.zip|}} (and run `npm install` and `npm start`) |
| - Create a to do list app: | - Create a to do list app: | ||
| - | - Implement the List component in component/List.js | + | - 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 | - text showing the description of the todo-list item | ||
| + | - edit button that enable you to edit todo-item text | ||
| + | - checkbox that enable you to check todo-item text | ||
| + | - cancel button that enable you to **cancel** a edit action | ||
| - delete button that emits an event to parent to remove the item | - delete button that emits an event to parent to remove the item | ||
| - Create an input that you will use to create new list items by appending to your array | - Create an input that you will use to create new list items by appending to your array | ||
| Line 263: | Line 305: | ||
| ====== Feedback ====== | ====== Feedback ====== | ||
| - | Please take a minute to fill in the **[[https://forms.gle/NuXCJktudGzf4rLg6 | feedback form]]** for this lab. | + | Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab. |
