쑥쑥나무

React.js 초기 셋팅 (리액트)

React js project setting

1. npx creat-react-app [프로젝트명] 프로젝트 생성을 해줍니다.

2. 폴더로 이동하여 폴더를 정리해줍니다

- public 폴더

• index.html 제외 전부 삭제
• public 폴더 내에 asset,font,image등 폴더 생성

- src 폴더

• App.js / index.js 제외 전부 삭제
• src 폴더 내에 components,pages,styles등 폴더 생성

3. 보편적인 라이브러리 설치

• React-Router 설치
  
  • npm install react-router-dom / yarn add react-router-dom
• Styled Components 설치
  • npm install styled-components / yarn add styled-components
• Tailwindcss 설치
  • npm i -D tailwindcss postcss autoprefixer
  • npx tailwindcss init -p
  • tailwind.config.js 수정
  • 최상위 css 파일에 지시문 추가

• Eslint 설치
  • npm install eslint --save-dev
  • .eslintrc.js 생성

{
  "extends": "react-app",
  "rules": {
    "quotes": ["error", "single", { "avoidEscape": true }],
    "indent": ["error", 2]
  }
}

• • npm install eslint-config-airbnb

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": 0
  }
}

• Prettier 설치
  • npm install prettier --save-dev --save-exact
  • .prettierrc 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

• Eslint,Prettier 설정 모듈
  • npm install eslint-plugin-prettier eslint-config-prettier --save-dev