(a) Starter React with CSS

In your clubReact we will update the index.html and index.js files from the previous problem. 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}  />;

(b) Menu Component

Now lets create a “non-functional” menu component based on the <nav> you used in your club website. Note: we are now building an app starting from those web pages. Create a separate file to hold your new React function component for the menu. This function should return a <nav> JSX element. Don’t worry about “conditional rendering” of the menu based on role or if the menu works at all (it should not be functional at this time, remove the hrefs.)

Your initial index.js will import the menu component and will look something like this:

import React from "react";
import ReactDOM from "react-dom";
import events from "./eventData.json"
import Menu from "./menu"; // my new menu component in menu.js

// Create contents using imported Menu
let contents = <Menu />; 

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

Give the filename of your new menu component here. Show a screenshot of your app here.

My screenshot looks like:

Note: the menu does not work at this point in development.

(c) Home Component

Now create a new file holding a home React functional component based on you club websites home page. Import and show this component along with your menu component.

My index.js showing both the menu and the home components looks like:

import React from "react";
import ReactDOM from "react-dom";
import events from "./eventData.json" // Importing JSON!
import Menu from "./menu"; // my new menu component
import Home from "./home";

// Create contents using imported Menu and Home page
// This is a [React Fragment](https://reactjs.org/docs/fragments.html#short-syntax) 
// that avoids creating extra <div>s.
let contents = <><Menu /> <Home /></>; 

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

Give the filename of your new home component here. Show a screenshot of your app here with both menu and home component showing.

My screenshot looks like:

(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) Membership

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

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

My screenshot looks like: