React.js 상용구(SPA)

🧐 내용물

✨ 빠른 시작

git clone https://github.com/dennisfrijlink/react-spa-boilerplate.git

cd react-spa-boilerplate/
npm install
npm start

$ npm run build

⚙️ 단일 페이지 애플리케이션이란?

폴더 구조

자산

-| assets/
----| images/
----| scss/
------| DMSans-Regular.ttf
------| DMSans-Bold.ttf
----| fonts/
------| DMSans-Regular.ttf
------| DMSans-Bold.ttf

구성 요소

-| components/
----| card/
------| index.js
------| card.js
------| card.scss

후크

레이아웃

-| layouts/
----| app.js

import  React, { Fragment } from  'react';
import { Link } from  'react-router-dom';

const  App  = ({ children }) => {
  return (
    <Fragment>
      <div  className="navigation">
        <Link  to="/">home</Link>
        <Link  to="/about">about</Link>
      </div>
      <Fragment>
       {children}
      </Fragment>
    </Fragment>
  );
};

export  default  App;

페이지

const Home = lazy(() =>  import("./pages/Home"));
const About = lazy(() =>  import("./pages/About"));

const  Root  = (props) => {
  return (
    <Router>
      <App>
        <Suspense  fallback={<div></div>}>
          <Switch>
            <Route  exact  path="/"  component={Home}  />
            <Route  path="/about"  component={About}  />
          </Switch>
        </Suspense>
      </App>
    </Router>
   );
};

앱 구조

📱 중단점 모바일 우선

SCSS 파일

assets
│
└─── scss
    │
    └─── _mixins.scss
    │
    └─── breakpoints.scss

// breakpoints.scss


/* Small (sm) */
$screen-sm-min: 640px;

/* Medium (md) */
$screen-md-min: 768px;

/* Large (lg) */
$screen-lg-min: 1024px;

/* Extra Large (xl) */
$screen-xl-min: 1280px;

/* Fluid */
$screen-fluid-min: 1536px;

// _mixins.scss


// Small devices
@mixin  sm {
  @media (min-width: #{$screen-sm-min}) {
    @content;
  } 
}

// Medium devices
@mixin  md {
  @media (min-width: #{$screen-md-min}) {
    @content;
  } 
}

// Large devices
@mixin  lg {
  @media (min-width: #{$screen-lg-min}) {
    @content;
  } 
}

// Extra large devices
@mixin  xl {
  @media (min-width: #{$screen-xl-min}) {
    @content;
  } 
}

// Extra large devices
@mixin  fluid {
  @media (min-width: #{$screen-fluid-min}) {
    @content;
  } 
}

// _mixins.scss


// Custom devices
@mixin rwd($screen) {
  @media (min-width: $screen+'px') {
    @content;
  }
}

예를 들어

.container {
    padding: 0 15px;

    /* 576px window width and more */
    @include sm {
        padding: 0 20px;
    }

    /* 992px window width and more */
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    }

    /* 1400px window width and more */
    @include rwd(1400) {
        margin-bottom: 20px;
        margin-top: 20px;
    }
}