FloorPlan_ReactApp

Floor plan created using React components, JSX & CSS styling

Define each component in its own file. The naming convention to use for a component's file is UpperCamelCase also known as Pascal Case, for example, a <CodeSandbox> component's file would be named CodeSandbox.js (CodeSandbox.jsx also works).
Export each component from its module. For example:

import React from ‘react’;

function CodeSandbox(props) {

return (

 <div>

   <h1>CodeSandbox</h1>

 </div>

);

}

// Must export the component’s function (or class)

export default CodeSandbox;

Define the following components as functions and code them such that they fulfill their responsibilities:

Component

Responsibilities

Rendered by . Renders the following components: - A component - A component - Three components - Two components Render the components in any order you wish to make the floor plan more interesting. Renders the text "Kitchen" and the following components: - A component - A component Renders the text "Living Room" Accepts a bedNum prop and renders the text "Bedroom [bedNum]" (substituting the value of the bedNum prop) Accepts a size prop and renders the text "[size] Bath", i.e., "Half Bath", "Full Bath" Renders the text "Oven" Renders the text "Sink" Add the following CSS inside of styles.css to style each component's wrapping

to make it easier to visualize the components: div { border: 1px solid grey; margin: 5px; padding: 5px; } With the minimum requirements complete, the output should resemble: Hints If a component accepts a prop, that prop must be passed to it by the component that renders it, in other words, parent components pass props to their children components. Bonus Style the components to make the output look like a floor plan: Hints Use className and/or id on React Elements (

,

, , etc.) to apply CSS styling using CSS rules in the styles.css module. Styling the component as a CSS Grid is a great way to layout its children (grid items). Use props being passed in to generate a unique id on an element that can be used to target that element for custom styling. For example: <div className='bedroom' id={`bed-${props.bedNum}`}> Would result in this having a wrapping

like:

if it was rendered as: <Bedroom bedNum={2} />