In class group WOD: Murphy’s Bar and Grill (React Version)

For this in-class group WOD, you will work in teams of two to re-implement your Bootstrap 5 version of Murphy’s Bar and Grill Home page using Bootstrap 5/React.

Note that you will find your code that you developed in last week’s in-class assignment to be helpful. If you wish, you can use a sample solution rather than your own code.

You will also find your solution to Experience Island Snow in React to be helpful.

Here are the steps:

Task 1: Set up your development environment.

Create a private GitHub repo called murphys-react and initialize it with a README.

Clone it to your local workspace (preferably using GitHub Desktop).

Create an IntelliJ IDEA project called “murphys-react” that points to your local repo.

Create a .gitignore file, and ignore node_modules, *.iml and .idea.

Task 2: Create your skeleton Murphy’s React app.

Change directory into murphys-react/ and invoke npx create-react-app my-app. (This may take a few minutes.)

Change directory into my-app/.

Install Bootstrap 5 by typing npm install react-bootstrap bootstrap react-bootstrap-icons --save

Remove all the files in the src/ directory (rm -f src/*)

Copy the style.css file from your In class Murphys project into the src/ directory.

Create an index.js file with the following contents:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './style.css';
import { Container } from 'react-bootstrap';

const Murphys = () => (
  <Container>
    <h1 className="text-center">Murphy's</h1>
  </Container>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Murphys />);

(You can switch to JSX if IntelliJ asks. Also, you can disable ESLint for this week.)

Edit the public/index.html to update the title of the React App.

Now run npm start in your shell. If all goes according to plan, you should see the following appear at http://localhost:3000:

Task 3: Build the page

Take a look at the index.html file from your Murphy’s inclass experience. You can see that the home page consists of three sections:

1. A top menu (containing the murphy’s logo on the left, and menu items on the right).
2. A middle section (containing a full-width photo with some text)
3. A three column footer.

Similar to the Island Snow with React experience, create three React components, one for each section of the site.

When you finish, the site should look like this:

Note that getting the middle alignment in the center section is a little tricky. If you can’t figure it out, ask the instructor to show you how to add a style attribute to your Grid component to fix its size at 500px.

Task 4: Finish

When you’ve finished, commit and push your repo to GitHub.

Then raise your hands so I can check your work.

You may grant read access to this repo to the TA for your section if you wish to receive feedback on your work. To do this:

• Retrieve your repository in a browser, then click on “Settings”. Depending upon the GitHub UI you are provided, you’ll then click on either “Collaborators” or “Manage Access”. Let us know if you can’t find either of these.
• For sections 001 and 002 search for “zerinnasrintumpa”, then click “Add collaborator”.
• For section 003 search for “giorgio-tran”, then click “Add collaborator”.

• For sections 004 and 005 search for “acatarinaoaraujo”, then click “Add collaborator”.

• Send a DM to the TA requesting a review of your repository; it will help to provide a description of any problems you are experiencing

Rx: <20 min Av: 20-40min Sd: 40-60 min DNF: 60+ min