Web Programming for Apps and Services

Notes Weekly Resources Graded work Policies Standards Professors & addendum Code examples

BTI425 Week 4 Notes

The theme for the next two weeks is to continue to develop our component-oriented web app development skills using React. We will examine how we can organize our app by splitting up components into separate files, use HTML Forms, and communicate with a back-end web service.

Test info

Test 1 is on Monday, January 28, 2019.

All tests in this course are hand-written, in pen or pencil. Answer styles will vary, but we’re mostly looking for short- to medium-length answers, and/or diagrams, and so on.

No references or resources are permitted - “closed book, open brain”. Device usage is not permitted.

The duration of each test will be approximately 80 to 90 minutes. Generally, about 4 minutes per question is allotted, which seems to work out OK. And, you will have some choice - you will be able to answer any “x” of “y” questions.

The tested topics are mostly review-based, but will also include forward-looking topics for the current “week”. The forward-looking aspect encourages you to prepare for class, by reading and using the weekly content before the class. You will be tested on comprehension, understanding, and the application of new topics. The review-based aspect enables you to show that you have the foundational knowledge and understanding needed for current and future tasks.

A few other points:

Topics this week

After last week’s introduction to React and the component idea, we want to go further.

Now, we want to work with many components, in containment and replacement or navigation scenarios. We have seen the containment idea already, and to implement navigation, we will learn about routing.

Along the way, we will iterate more on two topics, forms, and communicating with a web service.

Before we do the routing topic, we want to study two code examples, and learn the component concepts that they implement.
React components
The first code example (react-app-layout) shows how a typical viewport is organized, when composed with a number of sequentially-presented components.
The second code example (react-tania-updated) is (as its name suggests) an updated version of last week’s Tania Rascia code example. It has a more clearly-defined and obvious component structure, using containment (aka nesting or embedding).

Routing introduction, using the React Router package.
Open the react-router-intro code example as you go through the document.

Communicating with a web service, with the Fetch API.
Open the react-ws-intro code example as you go through the document.

Coverage of “Forms” in React apps is moved to Week 5

Remember to frequently use the learning resources.