(a) Starter React with CSS

In your new clubReact directory create a basic index.html and index.js for use with Parcel and React such as in the course notes or use these from homework #5. In addition bring over your CSS styles from your clubProject and link to them as from your index.html file in the standard HTML way.

Hints: There are a number of issues to be fixed as we take the raw HTML from our website project and bring it in as JSX. One is that all HTML class attributes that you may have been using for styling need to be changed to className attributes in JSX.

In addition images need to be brought in via a two step process. First import you images and then use that imported item for the src attribute, e.g.,

import neptune from "./images/PIA01492.jpg";
// Use in JSX
let nepImage = <img src={neptune}  />;

(a) Activities Component

Create an activities component that receives an array of activities and displays them in a table. Part of my index.js file that uses this component now looks like:

import events from "./eventData.json" // Importing JSON!
import Menu from "./menu"; // my new menu component
import Home from "./home";
import Activities from "./activities";

let contents = <><Menu /> <Activities events={events} /></>; 

ReactDOM.render(contents, document.getElementById("root"));

Show the code for your activities component here. Show a screenshot of your app displaying this component and with the React dev tools component view focusing on this component.

My screenshot looks like:

(b) Login

Create a (non-functioning) login component (no SVG doodle or extra functionality). Note: we will bring this component to “life” in a later homework.

Give the file name for this component. Show a screenshot of this component in use in your app.

My screenshot looks like:

(c) Membership

Create a (non-functioning) membership component. Note: we will bring this component to “life” in a later homework.

Give the file name for this component. Show a screenshot of this component in use in your app.

My screenshot looks like:

(a) App Component

Within you index.js create an App class based component somewhat like the following:

import React from "react";
import ReactDOM from "react-dom";
// lots of component imports

class App extends React.Component {
    constructor(props) {
        super(props);
        // Application state variables:
        // *role* is for RBAC == "role based access control"
        // we have "guest", "user", and "admin"
        //
        this.state = { role: "user", show: "home" }; 
    }


    render() {
        let content = <Home />;
        // statements/logic to set the content variable based on state
        return (
            <>
                <Menu/>
                {content}
            </>
        );
    }
}
// Now rendering the App component!
ReactDOM.render(<App />, document.getElementById("root"));

(b) Conditional Content Rendering

In your update the App component to show the appropriate component based on the state variable show. Note: you can use other names for the state variables role and show. Debug your application to make sure you can see all your different components just by changing the state variable show in the React developer tools in your browser.

Show a screenshot demonstrating this capability. Note: we have not learned enough about React yet to change the state from our menu component. We will do that in the next assignment. Show your App’s render function (not the whole App file).

My screenshot looks like:

(a) Menu and States

We need the menu component to be a bit “smarter”, e.g., if a visitor is already logged in, we don’t want to show the “Login” menu item. Let’s fix this now.

We currently have assigned three possible roles for visitors:

• “guest”: Visitors that have not logged into the app.
• “user”: A club member that has logged into the app.
• “admin”: A special user/member that has logged in and will have extra privleges.

For each of the above user types make a list of what menu items they should see (include a “logout” item as appropriate). Show that list here.

(b) Dynamic Menu

Now pass the App state role into your menu component and have your menu component only show the appropriate items based on the role.

Show a screenshot with role = “user”.

Show a screenshot with role = “guest”.

My screenshots look like:

(c) Active Component

To help our visitors know where they are in our App we will add a highlight to the corresponding menu item. To do this pass the App state variable show to the Menu component so it can add the appropriate CSS class to the item.

For example here is a screenshot when a visitor is looking at activities (note Activities menu item highlighted)

Here is a screen shot when a visitor is about to login (Note Login menu item is highlighted)

Test this from the React developer tools extension by changing the App show state variable.

Show the code for your Menu component here.