React 개발시 유용한 개발툴 / 익스텐션 / 라이브러리

• VScode extensions
  • Reactjs code snippets
  • Auto import
• Chrome extensions
  • React Developer Tools (https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

jsx 또는 js 파일, postCSS에서 emmet을 사용하려면 VScode settings.json에 아래를 추가하자.

  "emmet.includeLanguages": {

    "javascript": "javascriptreact",

    "postcss": "css"

  },

  "emmet.syntaxProfiles": {

    "postcss": "css"

  },

익스텐션이 설치되었다면, vsode에서 rcc를 입력해보자! 리액트 Component 를 만들 수 있는 프레임이 자동 생성 된다.

import React, { Component } from 'react';

class habit extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default habit;

유용한 라이브러리

$ yarn add @fortawesome/fontawesome-free // 폰트어썸

• @fortawesome/fontawesome-free