└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Airbnb React/JSX Stil Rehberi 2 | 3 | **(Turkish Translation of [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)** 4 | 5 | *React and JSX konularına oldukça makul bir yaklaşım* 6 | 7 | ## içindeki 8 | 9 | 1. [Temel Kurallar](#temel-kurallar) 10 | 1. [Class vs `React.createClass` vs stateless](#class-vs-reactcreateclass-vs-stateless) 11 | 1. [Mixinler](#mixins) 12 | 1. [Isimlendirme](#isimlendirme) 13 | 1. [Deklarasyon](#deklarasyon) 14 | 1. [Hizalama](#hizalama) 15 | 1. [Tırnaklar](#tırnaklar) 16 | 1. [Boşluk Kullanımı](#boşluk-kullanımı) 17 | 1. [Proplar](#proplar) 18 | 1. [Refler](#refler) 19 | 1. [Parantezler](#parantezler) 20 | 1. [Taglar](#tagler) 21 | 1. [Metodlar](#metodlar) 22 | 1. [Sıralama](#sıralama) 23 | 1. [`isMounted`](#ismounted) 24 | 25 | ## Temel Kurallar 26 | 27 | - Her bir dosyada sadece bir adet React Componenti barındırın. 28 | - Ama, birden fazla [Stateless ya da Pure Components](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) aynı dosyada kullanılabilir. eslint: [`react/no-multi-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless). 29 | - Daima JSX i kullanın. 30 | - Uygulamayı JSX olmayan bir dosyadan başlatmadığınız sürece `React.createElement` i kullanmayın. 31 | 32 | ## Class vs `React.createClass` vs stateless 33 | - Eğer dahili olarak state ve / veya ref ler varsa, `React.createClass` yerine `class extends React.Component` kullanmayı tercih edin. eslint: [`react/prefer-es6-class`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md) [`react/prefer-stateless-function`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md) 34 | 35 | ```jsx 36 | // kötü 37 | const Listing = React.createClass({ 38 | // ... 39 | render() { 40 | return
{this.state.hello}
; 41 | } 42 | }); 43 | 44 | // iyi 45 | class Listing extends React.Component { 46 | // ... 47 | render() { 48 | return
{this.state.hello}
; 49 | } 50 | } 51 | ``` 52 | 53 | Ve eğer state ya da ref leriniz yoksa, class lar içinde normal fonksiyonları (arrow fonksiyonları değil) tercih edin: 54 | 55 | ```jsx 56 | // kötü 57 | class Listing extends React.Component { 58 | render() { 59 | return
{this.props.hello}
; 60 | } 61 | } 62 | 63 | // kötü (Fonksiyon ismi çıkarımına güvenmek cesaret kırıcıdır.) 64 | const Listing = ({ hello }) => ( 65 |
{hello}
66 | ); 67 | 68 | // iyi 69 | function Listing({ hello }) { 70 | return
{hello}
; 71 | } 72 | ``` 73 | 74 | ## Mixins 75 | 76 | - [Mixinleri kullanmayın](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html). 77 | 78 | > Niye? Mixinler örtülü bağımlılıkları ortaya çıkarır, isim çatışmalarına neden olur ve snowballing karmaşıklığına neden olur. Mixinlerin kullanılmak istendiği bir çok durum, bileşenleri, daha üst düzey bileşenleri veya yardımcı modülleri kullanarak daha iyi yollarla başarılabilir. 79 | 80 | ## isimlendirme 81 | 82 | - **Dosya Uzantıları**: React Bileşenleri için `.jsx` uzantısını kullanın. 83 | - **Dosya İsimleri**: Dosya isimleri için PascalCase yöntemini kullanın. Mesela, `ReservationCard.jsx`. 84 | - **Reference İsimlendirmesi**: React Bileşenleri için PascalCase ve onların örnekleri için camelCase yöntemini kullanın. eslint: [`react/jsx-pascal-case`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md) 85 | 86 | ```jsx 87 | // kötü 88 | import reservationCard from './ReservationCard'; 89 | 90 | // iyi 91 | import ReservationCard from './ReservationCard'; 92 | 93 | // kötü 94 | const ReservationItem = ; 95 | 96 | // iyi 97 | const reservationItem = ; 98 | ``` 99 | 100 | - **Bileşen İsimlendirmesi**: Bileşen ismi olarak dosya adını kullanın. Örneğin, `ReservationCard.jsx` dosyası `ReservationCard` adında bir bileşeni içermelidir. Ancak, bir klasörün kök bileşeni için; dosya ismi olarak `index.jsx` ve bileşen ismi olarak da klasörün ismini kullanın: 101 | 102 | ```jsx 103 | // kötü 104 | import Footer from './Footer/Footer'; 105 | 106 | // iyi 107 | import Footer from './Footer/index'; 108 | 109 | // iyi 110 | import Footer from './Footer'; 111 | ``` 112 | - **Üst-Sıralı Bileşen İsimlendirmesi**: Oluşturulan bileşen üzerinde `displayName` olarak Üst-Sıralı Bileşen ismi ve aktarılan bileşenin isminden oluşan bir karma isim kullanın. Örneğin, Üst-Sıralı bileşen üyesi olan `WithFoo ()` öğesi, `Bar` adındakı bir bileşen tarafından iletildiğinde, `displayName` i `withFoo(Bar)` olan bir bileşen üretmelidir. 113 | 114 | > Neden? Bir Bileşenin `displayName` i, geliştirici araçlarında veya hata mesajlarında kullanılabilir; ve bu ilişkiyi açıkça ifade eden bir değere sahip olması, insanların neler olduğunu anlamasına yardımcı olur. 115 | 116 | ```jsx 117 | // kötü 118 | export default function withFoo(WrappedComponent) { 119 | return function WithFoo(props) { 120 | return ; 121 | } 122 | } 123 | 124 | // iyi 125 | export default function withFoo(WrappedComponent) { 126 | function WithFoo(props) { 127 | return ; 128 | } 129 | 130 | const wrappedComponentName = WrappedComponent.displayName 131 | || WrappedComponent.name 132 | || 'Component'; 133 | 134 | WithFoo.displayName = `withFoo(${wrappedComponentName})`; 135 | return WithFoo; 136 | } 137 | ``` 138 | 139 | - **Propların İsimlendirmesi**: DOM Bileşenlerine ait isimleri başka amaçlar için kullanmaktan kaçının. 140 | 141 | > Neden? İnsanlar `style` ve `className` gibi proplarin tek belirgin bir anlama gelmesini bekler. Bu API yi uygulamanızın bir alt kümesi için değiştirmek kodu daha az okunabilir ve daha az sürdürülebilir hale getirir, ve buglara sebep olabilir. 142 | 143 | ```jsx 144 | // kötü 145 | 146 | 147 | // iyi 148 | 149 | ``` 150 | 151 | ## Deklarasyon 152 | 153 | - Bileşenleri isimlendirmek için `displayName` kullanmayın. Onun yerine bileşeni referansa göre isimlendirin. 154 | 155 | ```jsx 156 | // kötü 157 | export default React.createClass({ 158 | displayName: 'ReservationCard', 159 | // stuff goes here 160 | }); 161 | 162 | // iyi 163 | export default class ReservationCard extends React.Component { 164 | } 165 | ``` 166 | 167 | ## Hizalama 168 | 169 | - JSX sözdizimi için bu hizalama stillerini takip edin: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md) [`react/jsx-closing-tag-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md) 170 | 171 | ```jsx 172 | // kötü 173 | 175 | 176 | // iyi 177 | 181 | 182 | // Eğer proplar bir satıra sığıyorsa aynı satırda tutun. 183 | 184 | 185 | // çocuklar normal olarak hizalanır. 186 | 190 | 191 | 192 | ``` 193 | 194 | ## Tırnaklar 195 | 196 | - JSX nitelikleri için daima çift tırnak (`"`), ama diğer bütün JS için tek tırnak (`'`) kullanın. eslint: [`jsx-quotes`](http://eslint.org/docs/rules/jsx-quotes) 197 | 198 | > Neden? Normal HTML nitelikleri de tek tırnak yerine çift tırnak kullanır, JSX nitelikleri de bu düzeni yansıtır. 199 | 200 | ```jsx 201 | // kötü 202 | 203 | 204 | // iyi 205 | 206 | 207 | // kötü 208 | 209 | 210 | // iyi 211 | 212 | ``` 213 | 214 | ## Boşluk Kullanımı 215 | 216 | - Kendi kendine kapanan taglar için daima tek boşluk kullanın. eslint: [`no-multi-spaces`](http://eslint.org/docs/rules/no-multi-spaces), [`react/jsx-tag-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md) 217 | 218 | ```jsx 219 | // kötü 220 | 221 | 222 | // çok kötü 223 | 224 | 225 | // kötü 226 | 228 | 229 | // good 230 | 231 | ``` 232 | 233 | - JSX süslü parantezlerini boşlukla şişirmeyin. eslint: [`react/jsx-curly-spacing`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md) 234 | 235 | ```jsx 236 | // kötü 237 | 238 | 239 | // iyi 240 | 241 | ``` 242 | 243 | ## Proplar 244 | 245 | - Prop isimleri için daima camelCase kullanın. 246 | 247 | ```jsx 248 | // kötü 249 | 253 | 254 | // iyi 255 | 259 | ``` 260 | 261 | - Açıkça `true` olarak belirtildiyse propun değerini atlayın. eslint: [`react/jsx-boolean-value`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md) 262 | 263 | ```jsx 264 | // kötü 265 |