"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"
},
- Install:
npx create-react-app
-
Create a filed named
SplitScreen.js
: -
Install styled-components:
yarn add styled-components
OR:
npm install styled-components
- Import the styled component
import styled from 'styled-components';
- 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;
`;
- 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 themPane
) that are wrapping our Left and Right components.
const Pane = styled.div`
flex: 1;
`;
- 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';
- 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
andmessage
, respectfully.
const LeftHandComponent = ({ names }) => {
return <h1 style={{ backgroundColor: 'teal' }}>{names}</h1>
}
const RightHandComponent = ({ message }) => {
return <p style={{ backgroundColor: 'orange' }}>{message}</p>
}
- 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
, andmessage
as shown
function App() {
return (
<SplitScreen leftWeight={1} rightWeight={3}>
<LeftHandComponent names = "Jon"/>
<RightHandComponent message = "Rules"/>
</SplitScreen>
);
}
- Over in our SplitScreen component, lets define it and add a
children
prop as well as those two props,leftWeight
andrightWeight
. Assign the latter two props each a value of 1.
export const SplitScreen = ({
children,
leftWeight = 1,
rightWeight = 1
}) => {
- In the body of the SplitScreen component, define our children prop as an array of elements,
left
andright
.
const [left, right] = children;
- Insert the value of that weight prop into the flex property:
const Pane = styled.div`
flex: ${props => props.weight};
`;
- Complete the return statement, which will contain 2 components:
Container
,Pane
, as well as the elementsleft
andright
from ourchildren
prop. SO.... wrapped in ourContainer
component we have twoPane
components with theweight
prop being passed in each one with their respective values wrapped in curly brackets. EachPane
component displays the respective elements using curly brackets (don't forget theexport default App;
in the end:
return (
<Container>
<Pane weight={leftWeight}>
{left}
</Pane>
<Pane weight={rightWeight}>
{right}
</Pane>
</Container>
)
}
export default App;
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>
)
}
Jon Christie
GitHub: mathcodes