reactJ의 파일 명명 규칙?
최근에 리액트J를 배우기 시작했어요.유일하게 혼란스러운 것은 리액트 앱 디렉토리의 폴더와 파일의 이름을 짓는 것입니다.
컴포넌트 파일의 이름을 붙이려면 , 다음의 순서에 따릅니다.
TitleCase.js그리고 일부는 그 뒤를 따른다.camelCase.js.앱 디렉토리의 이름을 붙이는 사람은 거의 없습니다.
camelCase거의 없다smallcase또는small-case.
명명 규칙에 대한 공식 문서를 찾으려고 했지만 찾을 수 없었습니다.ReactJs에서 올바른 파일 이름 지정 방법을 찾는 데 도움을 주실 수 있나요?
명명 규칙에 대해 ReactJS는 의견이 없습니다.
당신이 제기한 질문에 대한 공식적인 지침이나 진술은 없습니다.문서에서도 찾을 수 없습니다.
그것은 개인적인 취향이다.이 중 하나를 시행하는 데 어려움을 겪는다면, Airbnb의 React와 JSX에 대한 대부분 합리적인 접근 방식을 고수할 수 있다.
PS: 일관성이 있는 한 안전하다고 말할 수 있습니다.
'Google JavaScript 스타일 가이드' 기반
파일 이름은 모두 소문자여야 하며 밑줄(_) 또는 대시(-)를 포함할 수 있지만 추가 구두점은 포함할 수 없습니다.프로젝트에서 사용하는 규칙을 따르십시오.파일 이름의 확장자는 .js여야 합니다.
다른 사람들이 언급했듯이, 우리는 Airbnb 스타일 가이드를 채택했습니다.이름 붙이기 규칙에 관한 문서의 특정 섹션을 다음에 나타냅니다.
https://github.com/airbnb/javascript/tree/master/react#naming
tl;dr Pascal Case 명명
추천드립니다hyphens-case모든 npm 모듈은 이 명령어를 사용하여hyphens-case따라서 Import된 커스텀파일이 npm 모듈과 동일한 경우.
File Structure에 대한 그들의 문서를 근거로 Pascal Case가 아니라면 저는 Pascal Case를 선택하겠습니다.index.css,index.html또는index.js또한 create-react-app은 이런 구조를 가지고 있습니다.
컴포넌트나 클래스에는 Pascal Case를 사용합니다.컴포넌트를 만들기 위해 함수를 사용하더라도 파스칼 케이스는 사용할 수 있습니다.
예:
- 컴포넌트 폴더: Pascal Case.jsx 커스텀 컴포넌트
- 페이지 폴더: Pascal Case.js 내 페이지를 나타내는 컴포넌트
- 클래스 폴더: Pascal Case.js
- 기타 폴더: camel Case.js
snake_case.snake를 사용하지 마십시오.
폴더에는 소문자만 사용하고 camel Case, snake_case 또는 하이픈 대소문자는 사용하지 않습니다.
대소문자를 구분하는 환경도 있고 대소문자를 구분하지 않는 환경도 있기 때문에 파일 이름에 작은 문자를 사용하는 것이 좋습니다.또한 케이스 실수를 놓치기 쉽습니다.
파일명 케이스 문제로 인해 리액트 코드를 Netlify에 전개하는 문제에 직면했습니다.자세한 설명은 Netlify 지원 가이드 "Netlify 앱은 로컬로 빌드되지만 배포 시 실패(대문자와 소문자가 구분됨)"를 참조하십시오.
웅변 Javascript에 따르면클래스는 TitleCase를 따르고 메서드/함수 및 속성은 camelCase를 따릅니다.디렉토리와 컴포넌트는 모두 소문자 이름 뒤에 있다고도 합니다.C, C++, Java를 포함한 많은 프로그래밍 언어에서 선호되는 이름 짓기 방법 및 인기 있는 규칙 또는 규칙입니다.
그러나 Javascript는 거친 언어이기 때문에 정확한 명명 규칙은 없고 선호만 있을 뿐입니다.모듈/컴포넌트/프로젝트 전체에서 쉽게 읽을 수 있고 일관성이 있으며 다른 개발자에게 혼란을 주지 않는 한 이름을 붙이는 방법은 전적으로 사용자에게 달려 있습니다.
리액션은 여러 가지가 있지만, 직설적인 것은 아니다.
하지만 이 기사 5개의 리액트 개발자를 위한 베스트 프랙티스(Best Practices for React Developers)가 제 생각에 매우 도움이 되었습니다.
명명 규칙에 대해 언급된 사항은 두 가지입니다.
- 컴포넌트는 Pascal Case여야 합니다.
- 메서드는 camelCase로 지정해야 하며 해당 기능에 대해 이름을 지정해야 합니다.
그 밖에도, 모든 것은 당신이나 프로젝트에 임하는 팀에 달려 있습니다.왜냐하면 최종적으로는 당신이 변경을 가하거나 업데이트를 추가할 때 모든 것을 기억해야 하기 때문입니다.
언급URL : https://stackoverflow.com/questions/43973199/file-naming-conventions-in-reactjs
'programing' 카테고리의 다른 글
| SpringBoot 주 매니페스트 특성 없음(매븐) (0) | 2023.03.06 |
|---|---|
| javax.servlet.spring 웹 앱의 형식으로 ServletException을 확인할 수 없습니다. (0) | 2023.03.06 |
| TypeError: 미들웨어가 함수가 아닙니다. (0) | 2023.03.06 |
| Jackson JSON 시리얼화, 레벨 정의에 의한 재귀 회피 (0) | 2023.03.06 |
| Bower를 사용한 패키지 업데이트 (0) | 2023.03.06 |