React - komponenty szablonu (layout components)

Wstęp

Komponenty layoutu pozwalają aplikacji React na wyświetlanie w pojedynczym widoku wielu różnych komponentów. Odpowiadają funkcji include, czy require dla plików w języku PHP.

node_modules
public
src
├── App.css
├── App.js
├── components
│   └── SplitScreen.js
├── pages
│   └── Help.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

Komponent szablonu: SplitScreen.js

Stylowanie komponentu:

Aby stylowanie zadziałało należy doinstalować pakiet: npm install styled-components

import styled from 'styled-components';
const Container = styled.div`
	display: flex;
`;
// podstawowy układ 2 równych kolumn (50%-50%)
const Pane = styled.div`
	flex: 1;
`;
// alternatywny układ z 1 kolumną szerszą (np. 30%-60%)
const PaneTwo = styled.div`
	flex: 2;
`;
...

Komponent widoku:

...
export const SplitScreen = (
  { left: Left, right: Right }
) => {
  return (
	<Container>
	  <Pane>
	    <Left/>
	  </Pane>
	  <Pane>  // lub alternatywnie PaneTwo
	    <Right/>
	  </Pane> // lub alternatywnie PaneTwo
	</Container>
  );
}

Komponent strony: Help.js

import React from 'react';
import { SplitScreen } from '../component/SplitScreen';
// TUTAJ możliwe komponenty:
// LeftSideComp
// RightSideComp
const Help = ()=>{
  return (
    <>
	  <h1>Help</h1>
	  <SplitScreen left={LeftSideComp}
                      right={RightSideComp} />
    </>
  );
}
export default Help;

Możliwe komponenty

Osadzone w komponencie strony lub jako zewnętrzne pliki.

const LeftSideComp = ()=>{
	return <h1>FAQ</h1>;
}
const RightSideComp = ()=>{
	return <h1>FORM</h1>;
}	

Wykonaj następujący Layout Component:

node_modules
public
src
├── App.css
├── App.js
├── components
│   ├── ListItem.js
│   └── RegularList.js
├── pages
│   └── Parts.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js