Difference between revisions of "7CC005 Workshop w3"
From mi-linux
Jump to navigationJump to search| (13 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
[[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 03 - Google Angular - part 2 | [[Main Page]] >> [[7CC005|Web Technologies]] >> [[7CC005_-_Workbook|Workbook]] >> Week 03 - Google Angular - part 2 | ||
| + | |||
| + | Please learn '''ONE''' of the JS frameworks below. | ||
| + | |||
| + | I recommend React.js, which is a lot simpler to learn. Only go for Angular if you have previous experience in this framework. | ||
| + | |||
| + | == Facebook React (recommended) == | ||
| + | |||
| + | * Work through the [https://react.dev/learn/describing-the-ui Learn React chapters]. | ||
| + | * There are various ways to fetch data from a server-side API: | ||
| + | ** Using the standard fetch() method. Look at this excellent : [https://pusher.com/tutorials/consume-restful-api-react HOW TO CONSUME A RESTFUL API IN REACT]. Here's my [https://mi-linux.wlv.ac.uk/~in9352/react/ modest attempt], with a few tweaks and corrections. | ||
| + | ** Using the Next.js framework: [https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side] | ||
| + | ** Using the Redux library: [https://redux.js.org/tutorials/essentials/part-5-async-logic https://redux.js.org/tutorials/essentials/part-5-async-logic] | ||
== Google Angular == | == Google Angular == | ||
| − | + | Carry on working through '''The Tour of Heroes tutorial''', located here: | |
| − | * [https://angular.io/tutorial https://angular.io/tutorial] | + | * [https://angular.io/tutorial/tour-of-heroes https://angular.io/tutorial/tour-of-heroes] |
It is recommended that you cover sections 4-6 this week: | It is recommended that you cover sections 4-6 this week: | ||
| − | *4. Services | + | *4. Add Services |
| − | *5. | + | *5. Add In-App Navigation |
| − | *6. | + | *6. Get Data from a Server |
Then consolidate your understanding of the framework by reading through the official guide: | Then consolidate your understanding of the framework by reading through the official guide: | ||
* [https://angular.io/guide/architecture https://angular.io/guide/architecture] | * [https://angular.io/guide/architecture https://angular.io/guide/architecture] | ||
| − | == | + | == GitHub == |
| − | '''Important:''' Make sure that you commit your work to | + | '''Important:''' Make sure that you commit your work to GitHub on a regular basis! |
Latest revision as of 15:38, 6 February 2024
Main Page >> Web Technologies >> Workbook >> Week 03 - Google Angular - part 2
Please learn ONE of the JS frameworks below.
I recommend React.js, which is a lot simpler to learn. Only go for Angular if you have previous experience in this framework.
Facebook React (recommended)
- Work through the Learn React chapters.
- There are various ways to fetch data from a server-side API:
- Using the standard fetch() method. Look at this excellent : HOW TO CONSUME A RESTFUL API IN REACT. Here's my modest attempt, with a few tweaks and corrections.
- Using the Next.js framework: https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side
- Using the Redux library: https://redux.js.org/tutorials/essentials/part-5-async-logic
Google Angular
Carry on working through The Tour of Heroes tutorial, located here:
It is recommended that you cover sections 4-6 this week:
- 4. Add Services
- 5. Add In-App Navigation
- 6. Get Data from a Server
Then consolidate your understanding of the framework by reading through the official guide:
GitHub
Important: Make sure that you commit your work to GitHub on a regular basis!
