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

SENG2021 5.3 - Frontend Design

By npatrikeos

SENG2021 5.3 - Frontend Design

SENG2021

🔨 5.3 - Tools

Frontend Design

In this lecture

A Simple Component

React State

Making a request

Structure of a Frontend

Managing Dependencies

SENG2021 5.3 - Frontend Design

More from npatrikeos