Differences
This shows you the differences between two versions of the page.
|
se:labs:03 [2024/10/28 18:43] ilie_cristian.sandu [Passing data from child to parent component] |
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 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> | ||
| - | |||
| Line 259: | Line 298: | ||
| - 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 | - edit button that enable you to edit todo-item text | ||
| - | - cancel button that enable you to _cancel_ a edit action | + | - 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 | ||
