Skip to content

WORKSHOP_FRONTEND.md

Latest commit

 

History

History
76 lines (63 loc) · 3.35 KB

WORKSHOP_FRONTEND.md

File metadata and controls

76 lines (63 loc) · 3.35 KB

Workshop: Front-End

In this chapter we will tackle how to create various components on the newly setup project.

Title Changes

  • Modify the title component so that is shows the current page location
  • Modify the title class style

Add a new page: home

  • Create a new folder called home under public
  • Create a new homePage.js file and use export default content

Add a new page: about

  • Create a new folder called about under public
  • Create a new aboutPage.js file and use export default content;

Make use of the new components in view.js.

  • Import content as aboutContent into view.js
  • Import content as homeContent into view.js
  • Modify content of view.js by using switchcase to modify content based on current page location

Adding buttons

  • Add a button in the home page which purpose will be to take the user to about page:

    • This should have title "About"
    • Should use one an icon: info
    • Should print to the console its purpose

  • Add a button in the home page to get the username:

    • Should use one iconPerson icon
    • Should print to the console its purpose

  • Add a button in the about page which purpose will be to take the user to home page:

    • This should have title "Home"
    • Should use an icon
    • Should print to the console its purpose

  • Add a button in the about page which purpose will be to request data about the application:

    • Add a title to it
    • Should use an icon
    • Should print to the console its purpose

Create a new class file Home.js

  • Class should have a constructor
    • Constructor should initialize super() and userName
  • Write a getUserName method which will return the userName and will be used by the "User" button
  • Write a setUserName method which will set the user to your name
  • Add a label component in the home page which should use getUserName method to display the user.
  • Use the setUserName method to change the label to your username when pressing the user button
  • Press button. Was the label updated?
  • Observable model - missing this.notify()

Create an new class file About.js

  • Class should have a constructor
    • Constructor should
      • initialize super()
      • an empty JSON variable details in which data will be placed
      • a requestedTimes variable
    • Add a method to getDetails which will set the JSON variable and increment the requestedTimes variable

Build a table in aboutPage.js

  • The table should be filled with data from the getDetails method implemented earlier which is being called by the button with the same purpose

Link pages between them

Make use of QueryRouter

  • Add functionality to the 2 buttons (in home and about pages) to take the user from one page to the other