Tata letak ditata (bersama React TypeScript)

Salah satu blok bangunan GUI adalah tata letak; itu bisa berupa tata letak tunggal, tata letak ganda atau beberapa tata letak juga. Saat menjelajahi internet untuk mencari solusi dalam membuatnya, saya merasa agak sulit menemukan pendekatan skrip reaksi untuk membangun tata letak. Oleh karena itu, ketika saya merasa telah menyusun solusi yang dapat digunakan kembali yang layak, saya pikir saya dapat membagikannya. Pada artikel ini, saya akan memandu Anda melalui proses pengembangan tata letak saya bersama dengan semua puncak dan palung yang saya lalui.

**Karena artikel ini menyoroti pembangunan tata letak, artikel ini mengasumsikan setidaknya pemahaman tingkat pemula tentang React-Typescript.**

Mari kita bicara tentang struktur file sebelum sampai ke inti.
Biasanya ada tiga jenis CSS seperti yang tercantum di bawah ini:
- CSS Inline - CSS
Internal atau Tertanam
- CSS Eksternal
Sepanjang proyek ini, saya telah memilih untuk menggunakan CSS Eksternal karena memfasilitasi perbedaan dalam file. CSS eksternal hanya akan berisi properti gaya dengan bantuan atribut tag. Untuk singkatnya, saya menggunakan:
1. one-column.tsx untuk membungkus konten tampilan bersama dengan gaya ke dalam satu tata letak.
2. one-column.styles.ts untuk css (dan sass)
Pola serupa dibuat untuk dua atau lebih layar berpanel.
Semua informasi layar akan dikodekan di folder masing-masing dan terkandung dalam file screens.

...
layouts/
  nav-panel.styles.ts
  nav-panel.tsx
  one-column.styles.ts
  one-column.tsx  
  two-columns.styles.ts
  two-columns.tsx
  ...
routes/
  index.tsx
screens/
  screen-two/
    content-panel/
      index.tsx
    layout.tsx
...

import React from ‘react’;
import { ThemeProvider } from ‘react-jss’;
import theme from ‘../app-theme’;
import useStyles from ‘./one-column.style’;
export interface Props {
    contentPanel: React.ReactElement;
}
const OneColLayoutThemeWrapper: React.FC<Props> = (props) => (<ThemeProvider theme={theme}>
    <OneColLayout {…props} />
</ThemeProvider>);
const OneColLayout: React.FC<Props> = (props) => {
const styles = useStyles();
return <div className={styles.mainLayout}>
    {props.contentPanel}
</div>;
};
export default OneColLayoutThemeWrapper;

Atribut css yang disertakan ( one-column.styles.ts) terlihat sedikit seperti ini:

import { ITheme } from “../app-theme”;
const { createUseStyles } = require(“react-jss”);
export default createUseStyles((theme: ITheme) => ({
    mainLayout: {
        minWidth:"1920px",
        minHeight: "1080px",
        fontSize: "25pt",
        backgroundColor: theme.palette.shade1,
    }
 }))

Tujuan dari layar ini adalah untuk menampilkan satu baris untuk tujuan demo, jadi ini ditambahkan di content-panel/index.tsx

export interface Props {}
const ContentPanel: React.FC<Props> = (props) => {
    return <div>Wubba Lubba Dub Dub</div>;
};
export default ContentPanel;

export interface Props {}
const ScreenOneLayout: React.FC<Props> = (props) => {
  return <OneColLayoutThemeWrapper 
   contentPanel={<ContentPanel />}
  />
};
export default ScreenOneLayout;

Di sini, kolom pertama sesuai dengan panel navigasi dan kolom kedua sesuai dengan panel konten. Kami dua columns.tsx akan dibentuk mengandung dua kolom, oleh karena:

export interface Props {
  columnOne: React.ReactElement;
  columnTwo: React.ReactElement;
}
const TwoColsLayoutThemeWrapper: React.FC<Props> = (props) => 
(<ThemeProvider theme={theme}>
  <TwoColsLayout {...props} />
 </ThemeProvider>
);
const TwoColsLayout: React.FC<Props> = (props) => { 
  const styles = useStyles();
  return (
    <div className={styles.twoColumns}>
      <div className={styles.firstColumn}>{props.columnOne} </div>.   
      <div className={styles.secondColumn}>{props.columnTwo}</div>
    </div>
  );
};
export default TwoColsLayoutThemeWrapper;

twoColumns: {
  display: "flex",
  flexDirection: "row",
  width: "100%",
  minHeight: "100vh"
},
firstColumn: {
  minWidth:"300px",
  minHeight: "1080px",
  backgroundColor: theme.palette.shade4,
  display: "inline-block",
  color: theme.white.accent1
},
secondColumn: {
  width:"1620px",
  color: theme.palette.shade4,
  backgroundColor: theme.white.accent1,
  padding:"25px 45px 25px 45px",
}

const ScreenTwoLayout: React.FC<Props> = (props) => {
return (
  <TwoColsLayoutThemeWrapper
    columnOne={<NavPanel />}
    columnTwo={<ContentPanel />}
  />
)};

Terima kasih telah membaca sejauh ini!