SENG2021

🔨 5.3 - Tools

Frontend Design

In this lecture

Why?

  • Understand React state manipulation
  • Work with React components and properties
  • Study an example of React application design

A Simple Component

  • A seperate code block - modular software design
  • Passing in data via properties

React State

  • Let's modify our webpage to be a bit more useful

Making a request

function performSearch() {
    axios
      .get('/search/v1', {
        params: {
          token,
          query_str,
        },
      })
      .then(({ data }) => {
        const { messages } = data;
        if (typeof messages !== "undefined" && !Array.isArray(messages)) return;
        setMessages(messages);
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  }

Structure of a Frontend

  • Components
  • Pages
  • AuthContext, Routes & ProtectedRoutes
  • How to handle errors from the backend?

Managing Dependencies

  • Dependencies are local to the project - not global (like pip/pip3)
  • npm install <package_name>
  • package.json