meta data for this page
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| ixc2024:tech:wfrontend:implementing_planning:start [2024/05/28 10:20] – alesta | ixc2024:tech:wfrontend:implementing_planning:start [2024/05/28 10:58] (current) – alesta | ||
|---|---|---|---|
| Line 28: | Line 28: | ||
| ); | ); | ||
| } | } | ||
| + | |||
| + | [[https:// | ||
| + | [[https:// | ||
| Line 140: | Line 143: | ||
| - View Changes in Browser | - View Changes in Browser | ||
| - The browser will reload, and you should see the new component' | - The browser will reload, and you should see the new component' | ||
| + | |||
| + | == React Hooks == | ||
| + | |||
| + | Hooks are very important concept in React, because they are the core mechanism of tracking the state of data and content on the web pages. | ||
| + | |||
| + | Learn about hooks: [[https:// | ||
| + | |||
| + | Most useful hooks are: | ||
| + | |||
| + | **useState()** | ||
| + | * Tracks the state of the data, the state of the variable to which it is refering | ||
| + | * It has it's // | ||
| + | |||
| + | {{: | ||
| + | |||
| + | **useEffect()** | ||
| + | * Tracks changes that are happening in the content, and is triggered if it notices a change in the variable that it was tracking | ||
| + | * Tracked variable is put within the [ ] brackets at the right side | ||
| + | * If the brackets are left empty, the useEffect hook will activate when the page is loaded, so it can be used for triggering the fetch of the data from the backend, or for doing certain logic for setting up the page | ||
| + | * Otherwise, the useEffect will be triggered with the change of the variable within the brackets | ||
| + | |||
| + | {{: | ||
| + | |||
| + | **useNavigate()** | ||
| + | * It is used for moving into another page, through code | ||
| + | * This can be used when we want to transfer user to a different page, for example after they complete the process of registration, | ||
| + | |||
| + | {{: | ||
| + | |||
| + | ==Navigation== | ||
| + | |||
| + | It is always good to implement some sort of a navigation for your users. A go-to way of doing so is by implementing a Navigation Bar - Navbar. However, navigation can also be implemented for example when we want to open a profile of another user, by clicking on the user's profile picture or their name. | ||
| + | |||
| + | For implementation of Navbars: [[https:// | ||
| + | |||
| + | {{: | ||
| + | |||
| + | |||
| + | For implementation of Links: [[https:// | ||
| + | |||
| + | {{: | ||
| + | |||
| + | |||
| + | |||
| ==Add personality to your Web Application == | ==Add personality to your Web Application == | ||
| Line 151: | Line 198: | ||
| * icon: Flag of Malaysia | * icon: Flag of Malaysia | ||
| - | {{: | + | {{: |
| Setting up these two things helps your users find your application within all the other tabs that they have open. | Setting up these two things helps your users find your application within all the other tabs that they have open. | ||
| Line 161: | Line 208: | ||
| - To change the name find index.html file of your project and change the text that is withing < | - To change the name find index.html file of your project and change the text that is withing < | ||
| - | | + | |
| - | {{: | + | {{: |