Beyond Create React App 1-개발환경 및 설정

fepanbr·2019년 10월 29일
0

React

목록 보기
1/1

이 예제는
Beyond Create React App: React Router, Redux Saga, and More

를 참고하여 만들었습니다.

- React Router, Redux-saga, Auth0 ... 등을 이용한 예제입니다.

1. React SPA 구축

npx create-react-app react-todo

2. Prettier 설치 및 설정

Prettier란?

  • An opinionated code formatter
  • Supports many languages
  • Integrates with most editors
  • Has few options
    Prettier

즉, code formatter이다.
그 외에 Husky, Lint-staged를 적용한다.

npm install --save husky lint-staged

Husky, Lint-staged란?

3. react-bootstrap 설치 및 설정

npm install react-bootstrap bootstrap

그리고 ./public/index.html 파일에 다음과 같이 적용.

<!-- ./public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... title and other elements ... -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
      integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
      crossorigin="anonymous"
    />
  </head>
  <!-- ... body ... -->
</html>

4. PropTypes 설치 및 적용

  • 설치
npm install --save prop-types
  • 적용
import React from 'react';
import PropTypes from 'prop-types';

const Header = ({ description }) => <h1>{description}</h1>;

Header.propTypes = {
  description: PropTypes.string.isRequired
};
profile
나무아래에 앉아, 코딩하는 개발자가 되고 싶은 박철현 블로그입니다.

0개의 댓글