The Client Server Model

Your React application may be part of a larger architecture, including data from other machines. It's helpful to understand how websites work.

... introducing ...

The Client Server Model

Websites consist of "Client" code running on a user's web browser (HTML, CSS, JavaScript, React, etc) and "Server" code running on a remote computer, on the internet or across a network. They communicate using HyperText Transfer Protocol, aka HTTP.

     frontend                   ☁️ internet ☁️                       backend
 +------------------+                                          +------------+  
 | Your React code  | < ==== (        HTTP       ) ======= >   | API        |
 | (Client )        |                                          | (Server)   |
 +------------------+                                          +------------+

In our study session we are mainly focused on the Frontend, but depending on what you are building, you may need to understand how to retrieve things from a backend.

Read more:

• https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview
• https://en.wikipedia.org/wiki/Client%E2%80%93server_model
• https://www.geeksforgeeks.org/client-server-model/
• https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

Tools for working with APIs:

• https://www.postman.com/
• https://curl.se/
• Network Inspector
  • https://developer.chrome.com/docs/devtools/network/
  • https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor