Difference between revisions of "7CC005 Workshop w3"

From mi-linux
Jump to navigationJump to search
 
(7 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
== Facebook React (recommended) ==
 
== Facebook React (recommended) ==
  
* Finish working through the official tutorial: [https://reactjs.org/tutorial/tutorial.html https://reactjs.org/tutorial/tutorial.html]
+
* Work through the [https://react.dev/learn/describing-the-ui Learn React chapters].
* Work through the [https://reactjs.org/docs/hello-world.html Main Concepts] section of the documentation, to consolidate what you learnt during the tutorial.
+
* There are various ways to fetch data from a server-side API:
* Look at this excellent tutorial: [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 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.
* For adding, amending and deleting, look at these 2 pages in the documentation:
+
** 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]
** [https://reactjs.org/docs/forms.html https://reactjs.org/docs/forms.html]
+
** Using the Redux library: [https://redux.js.org/tutorials/essentials/part-5-async-logic https://redux.js.org/tutorials/essentials/part-5-async-logic]
** [https://reactnative.dev/docs/network https://reactnative.dev/docs/network]
 
 
 
* Optional: Look at Redux: [https://redux-docs.netlify.com/introduction/getting-started https://redux-docs.netlify.com/introduction/getting-started]
 
  
 
== Google Angular ==
 
== Google Angular ==
  
You should spend 2 weeks working through '''The Tour of Heroes tutorial''', located here:
+
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:
Line 30: Line 27:
 
* [https://angular.io/guide/architecture https://angular.io/guide/architecture]
 
* [https://angular.io/guide/architecture https://angular.io/guide/architecture]
  
== GitLab ==
+
== GitHub ==
'''Important:''' Make sure that you commit your work to [[GitLab_server|GitLab]] on a regular basis!
+
'''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)

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!