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 Semantic UI version of Murphy’s Bar and Grill Home page using Semantic UI/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 directory, and ignore node_modules, *.iml and .idea.

Task 2: Create your skeleton Murphys 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 Semantic UI by typing npm install semantic-ui-react semantic-ui-css --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 './style.css';
import 'semantic-ui-css/semantic.min.css';
import { Container, Header } from 'semantic-ui-react';

class Murphys extends React.Component {

  render() {
    return (
        <Container textAlign="center">
          <Header as='h1'>Murphys</Header>
        </Container>
    );
  }
}

ReactDOM.render(<Murphys/>, document.getElementById('root'));

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

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.

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