Split-Screen-Components.md

Split Screen Components

The following tutorial walks you through creating a split screen component using layout components.

Dependencies:

  "dependencies": {
    "@testing-library/jest-dom": "5.14.1",
    "@testing-library/react": "11.2.7",
    "@testing-library/user-event": "12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "web-vitals": "1.1.2"
  },

Instructions:

1. Install:

npx create-react-app

2. Create a filed named SplitScreen.js:

3. Install styled-components:

yarn add styled-components

OR:

npm install styled-components

3. Import the styled component

import styled from 'styled-components';

4. Add a new styled component called container using the syntax that styled components uses to define its components. We also define the styles (display:flex)that we want to apply to the container.

const Container = styled.div`
    display: flex;
`;

5. Define another styled component called pane with one style defined, flex:1. This is going to be the style that we apply to these two divs (we will name them Pane) that are wrapping our Left and Right components.

const Pane = styled.div`
    flex: 1;
`;

6. Open App.js and delete all the boilerplate inside the return statement and just return our SplitScreen component. Then import it at the top:

import { SplitScreen } from './SplitScreen';

7. Define and pass in two components, LeftHandComponent and RightHandComponentone, for each side. Then add some styling to each component by passing styling props to each tag. Also, each component takes in a prop, name and message, respectfully.

const LeftHandComponent = ({ names }) => {
  return <h1 style={{ backgroundColor: 'teal' }}>{names}</h1>
}

const RightHandComponent = ({ message }) => {
  return <p style={{ backgroundColor: 'orange' }}>{message}</p>
}

8. We will add two more props to the SplitScreen component, leftWeight and rightWeight. For now, in App.js, complete the return statement by wrapping the two components you just made in the SplitScreen component. Pass in all 4 props. leftWeight, rightWeight, names, and message as shown

function App() {
  return (
    <SplitScreen leftWeight={1} rightWeight={3}>
      <LeftHandComponent names = "Jon"/>
      <RightHandComponent message = "Rules"/>
    </SplitScreen>
    
  );
}

9. Over in our SplitScreen component, lets define it and add a children prop as well as those two props, leftWeight and rightWeight. Assign the latter two props each a value of 1.

export const SplitScreen = ({
    children,
    leftWeight = 1,
    rightWeight = 1
}) => {

10. In the body of the SplitScreen component, define our children prop as an array of elements, left and right.

const [left, right] = children;

11. Insert the value of that weight prop into the flex property:

const Pane = styled.div`
    flex: ${props => props.weight};
`;

12. Complete the return statement, which will contain 2 components: Container, Pane, as well as the elements left and right from our children prop. SO.... wrapped in our Container component we have two Pane components with the weight prop being passed in each one with their respective values wrapped in curly brackets. Each Pane component displays the respective elements using curly brackets (don't forget the export default App; in the end:

return (
        <Container>
            <Pane weight={leftWeight}>
                {left}
            </Pane>
            <Pane weight={rightWeight}>
                {right}
            </Pane>
        </Container>
    )
}

export default App;

THAT IS IT. WELL DONE :)

App.js COMPLETE:

import { SplitScreen } from './SplitScreen';

const LeftHandComponent = ({ names }) => {
  return <h1 style={{ backgroundColor: 'teal' }}>{names}</h1>
}

const RightHandComponent = ({ message }) => {
  return <p style={{ backgroundColor: 'orange' }}>{message}</p>
}

function App() {
  return (
    <SplitScreen leftWeight={1} rightWeight={3}>
      <LeftHandComponent names = "Jon"/>
      <RightHandComponent message = "Rules"/>
    </SplitScreen>
    
  );
}

export default App;

SplitScreen.js COMPLETE:

import styled from 'styled-components';

const Container = styled.div`
    display: flex;
`;

const Pane = styled.div`
    flex: ${props => props.weight};
`;
    
export const SplitScreen = ({
    children,
    leftWeight = 1,
    rightWeight = 1
}) => {
    const [left, right] = children;
    return (
        <Container>
            <Pane weight={leftWeight}>
                {left}
            </Pane>
            <Pane weight={rightWeight}>
                {right}
            </Pane>
        </Container>
    )
}

Contact

Jon Christie

GitHub: mathcodes