Differences
This shows you the differences between two versions of the page.
|
se:labs:03 [2022/10/25 15:15] gabriel.nicolae3103 [Props] |
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 116: | Line 116: | ||
| We can also use inline if-else operators. | We can also use inline if-else operators. | ||
| + | |||
| + | When sending props from parent to child component, we can use **object destructuring** . Destructuring really shines in React apps because it can greatly simplify how you write props. | ||
| <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 132: | Line 136: | ||
| <code javascript> | <code javascript> | ||
| function HomePage() { | function HomePage() { | ||
| - | const names = ['POLI', 'ASE', 'UNIBUC']; | + | const names: string[] = ["POLI", "ASE", "UNIBUC"]; |
| return ( | return ( | ||
| Line 138: | 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 145: | Line 149: | ||
| ); | ); | ||
| } | } | ||
| + | </code> | ||
| + | |||
| + | Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. | ||
| + | |||
| + | The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. | ||
| + | |||
| + | <code javascript> | ||
| + | const universitiesItems = universities.map((uni) => ( | ||
| + | <li key={uni.id}>{uni.name}</li> | ||
| + | )); | ||
| </code> | </code> | ||
| Line 157: | Line 171: | ||
| useState() returns an array. The first item in the array is the state value, which you can name anything. It’s recommended to name it something descriptive. The second item in the array is a function to update the value. You can name the update function anything, but it's common to prefix it with set followed by the name of the state variable you’re updating. | useState() returns an array. The first item in the array is the state value, which you can name anything. It’s recommended to name it something descriptive. The second item in the array is a function to update the value. You can name the update function anything, but it's common to prefix it with set followed by the name of the state variable you’re updating. | ||
| + | The only argument to useState() is the initial state. | ||
| Line 162: | 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 + 1); | + | setLikes((likes: number) => likes + 1); |
| } | } | ||
| Line 185: | 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 206: | 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 217: | 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 230: | 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 246: | 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. |
