Previous Lecture Lecture 14 Next Lecture

Lecture 14, Wed 04/28

Wed Lecture: Intro to JavaScript/React, and the team02 project

We’ll be in “straight lecture mode” again today with no participation grade.

While you are encouraged to participate synchronously, it is acceptable to just watch the video later if you are in a time zone where sleep is a better alternative, or if you are just juggling other responsibilities.

We have two upcoming team activities planned for next week, so please plan on synchronous participation then:

I had anticipated that we’d be starting the legacy code deployment today, but it came to light from students’ experiences with jpa03 that there were some improvements we could make to the process so that things would go more smoothly.
So, I think it’s worth waiting until next week to get those improvements into the code base.

What we are building in team02

The team02 assignment is still under development, but here’s a preview of the app (in its current state):

As you can see, we still have access to the “Swagger” interface directly to the backend endpoints, but we also have some nicer interfaces intended for human users.

There is also a Storybook for the React components for the app here, where we can see what each looks like indepdenntly:

And a QA version here, where you can see the storybook for the most recently pushed PR:

What is a React component?

A react component is a unit of JavaScript code (actually JSX code, which is a blend of JavaScript and HTML) that represents a part of a web user interface.

It can be en entire page, or part of a page.

We keep components that are full pages under:

And those that are parts of pages under:

There are tests for both under:

And there is also something called a “Storybook” where you can see each of these components in isolation (from other components, and from the backend):

Plain old JavaScript code.

Let’s look at some plain old javascript code and the code that is used to test it:

Overall structure

Under javascript

Under javascript/src we find:

Under main