"Airbnb React/JSX 스타일 가이드"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 2명의 중간 판 4개는 보이지 않습니다)
1번째 줄: 1번째 줄:
==개요==
==개요==
;Airbnb React/JSX Style Guide
;Airbnb React/JSX Style Guide
;Airbnb React/JSX 스타일 가이드
;Airbnb 리액트/JSX 스타일 가이드
*"React와 JSX에 대한 가장 합리적인 접근"
*"React와 JSX에 대한 가장 합리적인 접근"
*https://github.com/airbnb/javascript/tree/master/react
*https://github.com/airbnb/javascript/tree/master/react
7번째 줄: 7번째 줄:
==주요 내용==
==주요 내용==
;클래스 생성
;클래스 생성
<source lang='JavaScript'>
<syntaxhighlight lang='JavaScript'>
// bad
// bad
const Listing = React.createClass({
const Listing = React.createClass({
21번째 줄: 21번째 줄:
   }
   }
}
}
</source>
</syntaxhighlight>


;이름짓기
;이름짓기
*컴포넌트는 [[PascalCase]], 인스턴스는 [[camelCase]]
*컴포넌트는 [[PascalCase]], 인스턴스는 [[camelCase]]
<source lang='JavaScript'>
<syntaxhighlight lang='JavaScript'>
// bad
// bad
const reservationCard = require('./ReservationCard');
const reservationCard = require('./ReservationCard');
37번째 줄: 37번째 줄:
// good
// good
const reservationItem = <ReservationCard />;
const reservationItem = <ReservationCard />;
</source>
</syntaxhighlight>


==같이 보기==
==같이 보기==
44번째 줄: 44번째 줄:
*[[JSX]]
*[[JSX]]


==참고 자료==
==참고==
*https://github.com/airbnb/javascript/tree/master/react
*https://github.com/airbnb/javascript/tree/master/react


[[분류: 가이드]]
[[분류: React]]
[[분류: 스타일 가이드]]

2020년 11월 2일 (월) 02:54 기준 최신판

1 개요[ | ]

Airbnb React/JSX Style Guide
Airbnb 리액트/JSX 스타일 가이드

2 주요 내용[ | ]

클래스 생성
// bad
const Listing = React.createClass({
  render() {
    return <div />;
  }
});

// good
class Listing extends React.Component {
  render() {
    return <div />;
  }
}
이름짓기
// bad
const reservationCard = require('./ReservationCard');

// good
const ReservationCard = require('./ReservationCard');

// bad
const ReservationItem = <ReservationCard />;

// good
const reservationItem = <ReservationCard />;

3 같이 보기[ | ]

4 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}