Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alioguzhan/react-style-guide
Turkish Translation of Airbnb React/JSX Style Guide
https://github.com/alioguzhan/react-style-guide
Last synced: 30 days ago
JSON representation
Turkish Translation of Airbnb React/JSX Style Guide
- Host: GitHub
- URL: https://github.com/alioguzhan/react-style-guide
- Owner: alioguzhan
- Created: 2017-08-31T19:12:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-20T14:25:49.000Z (almost 2 years ago)
- Last Synced: 2024-10-03T12:44:45.738Z (3 months ago)
- Size: 21.5 KB
- Stars: 34
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Airbnb React/JSX Stil Rehberi
**(Turkish Translation of [Airbnb React/JSX Style Guide](https://github.com/airbnb/javascript/tree/master/react)**
*React and JSX konularına oldukça makul bir yaklaşım*
## içindeki
1. [Temel Kurallar](#temel-kurallar)
1. [Class vs `React.createClass` vs stateless](#class-vs-reactcreateclass-vs-stateless)
1. [Mixinler](#mixins)
1. [Isimlendirme](#isimlendirme)
1. [Deklarasyon](#deklarasyon)
1. [Hizalama](#hizalama)
1. [Tırnaklar](#tırnaklar)
1. [Boşluk Kullanımı](#boşluk-kullanımı)
1. [Proplar](#proplar)
1. [Refler](#refler)
1. [Parantezler](#parantezler)
1. [Taglar](#tagler)
1. [Metodlar](#metodlar)
1. [Sıralama](#sıralama)
1. [`isMounted`](#ismounted)
## Temel Kurallar
- Her bir dosyada sadece bir adet React Componenti barındırın.
- 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).
- Daima JSX i kullanın.
- Uygulamayı JSX olmayan bir dosyadan başlatmadığınız sürece `React.createElement` i kullanmayın.
## Class vs `React.createClass` vs stateless
- 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)
```jsx
// kötü
const Listing = React.createClass({
// ...
render() {
return
{this.state.hello};
}
});
// iyi
class Listing extends React.Component {
// ...
render() {
return
{this.state.hello};
}
}
```
Ve eğer state ya da ref leriniz yoksa, class lar içinde normal fonksiyonları (arrow fonksiyonları değil) tercih edin:
```jsx
// kötü
class Listing extends React.Component {
render() {
return
{this.props.hello};
}
}
// kötü (Fonksiyon ismi çıkarımına güvenmek cesaret kırıcıdır.)
const Listing = ({ hello }) => (
{hello}
);
// iyi
function Listing({ hello }) {
return
{hello};
}
```
## Mixins
- [Mixinleri kullanmayın](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html).
> 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.
## isimlendirme
- **Dosya Uzantıları**: React Bileşenleri için `.jsx` uzantısını kullanın.
- **Dosya İsimleri**: Dosya isimleri için PascalCase yöntemini kullanın. Mesela, `ReservationCard.jsx`.
- **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)
```jsx
// kötü
import reservationCard from './ReservationCard';
// iyi
import ReservationCard from './ReservationCard';
// kötü
const ReservationItem = ;
// iyi
const reservationItem = ;
```
- **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:
```jsx
// kötü
import Footer from './Footer/Footer';
// iyi
import Footer from './Footer/index';
// iyi
import Footer from './Footer';
```
- **Ü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.
> 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.
```jsx
// kötü
export default function withFoo(WrappedComponent) {
return function WithFoo(props) {
return ;
}
}
// iyi
export default function withFoo(WrappedComponent) {
function WithFoo(props) {
return ;
}
const wrappedComponentName = WrappedComponent.displayName
|| WrappedComponent.name
|| 'Component';
WithFoo.displayName = `withFoo(${wrappedComponentName})`;
return WithFoo;
}
```
- **Propların İsimlendirmesi**: DOM Bileşenlerine ait isimleri başka amaçlar için kullanmaktan kaçının.
> 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.
```jsx
// kötü
// iyi
```
## Deklarasyon
- Bileşenleri isimlendirmek için `displayName` kullanmayın. Onun yerine bileşeni referansa göre isimlendirin.
```jsx
// kötü
export default React.createClass({
displayName: 'ReservationCard',
// stuff goes here
});
// iyi
export default class ReservationCard extends React.Component {
}
```
## Hizalama
- 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)
```jsx
// kötü
// iyi
// Eğer proplar bir satıra sığıyorsa aynı satırda tutun.
// çocuklar normal olarak hizalanır.
```
## Tırnaklar
- 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)
> Neden? Normal HTML nitelikleri de tek tırnak yerine çift tırnak kullanır, JSX nitelikleri de bu düzeni yansıtır.
```jsx
// kötü
// iyi
// kötü
// iyi
```
## Boşluk Kullanımı
- 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)
```jsx
// kötü
// çok kötü
// kötü
// good
```
- 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)
```jsx
// kötü
// iyi
```
## Proplar
- Prop isimleri için daima camelCase kullanın.
```jsx
// kötü
// iyi
```
- 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)
```jsx
// kötü
// iyi
// iyi
```
- `![]()
` etiketlerine daima bir `alt` özelliği ekleyin. Eğer resim sunumsal ise, `alt` boş bir dize olabilir veya `![]()
` etiketinde `
// iyi
// iyi
// iyi
```
- `![]()
` etiketinin `alt` özelliğinde "image", "photo", ya da "picture" gibi kelimeler kullanmayın. eslint: [`jsx-a11y/img-redundant-alt`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)
> Neden? Ekran okuyucuları zaten `img` elemanlarını resim olarak bildirdikleri için bu bilgiyi alt metne eklemenize gerek yoktur.
```jsx
// kötü
// iyi
```
- Yalnızca geçerli, soyut olmayan [ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) kullanın. eslint: [`jsx-a11y/aria-role`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)
```jsx
// kötü - bir ARIA role değil
// kötü - soyut ARIA role
// iyi
```
- Elemanlarde `accessKey` kullanmayın. eslint: [`jsx-a11y/no-access-key`](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)
> Neden? Ekran okuyucu kullanan insanlar tarafından kullanılan klavye komutları ve klavye kısayolları ile klavyeler arasındaki tutarsızlıkar erişilebilirliği zorlaştırmaktadır.
```jsx
// bad
// good
```
- `key` özelliği için dizinin index değerini kullanmaktan kaçının; benzersiz bir ID tercih edin. ([why?](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318))
```jsx
// kötü
{todos.map((todo, index) =>
)}
// iyi
{todos.map(todo => (
))}
```
- Always define explicit defaultProps for all non-required props.
> Why? propTypes are a form of documentation, and providing defaultProps means the reader of your code doesn’t have to assume as much. In addition, it can mean that your code can omit certain type checks.
```jsx
// bad
function SFC({ foo, bar, children }) {
return
{foo}{bar}{children};
}
SFC.propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
children: PropTypes.node,
};
// good
function SFC({ foo, bar, children }) {
return
{foo}{bar}{children};
}
SFC.propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
children: PropTypes.node,
};
SFC.defaultProps = {
bar: '',
children: null,
};
```
## Refler
- ref değeri için her zaman callback kullanın. eslint: [`react/no-string-refs`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)
```jsx
// kötü
// iyi
{ this.myRef = ref; }}
/>
```
## Parantezler
- JSX etiketleri bir satırdan fazla olursa parantezler kullanın. eslint: [`react/jsx-wrap-multilines`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-wrap-multilines.md)
```jsx
// kötü
render() {
return
;
}
// iyi
render() {
return (
);
}
// iyi, eğer tek satırsa
render() {
const body =
hello;
return {body};
}
```
## Taglar
- Hiçbir çocuğu olmayan etiketleri her zaman kendi kendine kapatın. eslint: [`react/self-closing-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)
```jsx
// kötü
// iyi
```
- Eğer bileşeninizin birden çok satırdan oluşan özellikleri varsa, bileşeni yeni bir satırda kapatın. eslint: [`react/jsx-closing-bracket-location`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)
```jsx
// kötü
// iyi
```
## Metodlar
- Yerel değişkenleri kapatmak için ok fonksiyonları kullanın.
```jsx
function ItemList(props) {
return (
{props.items.map((item, index) => (
doSomethingWith(item.name, index)}
/>
))}
);
}
```
- Render metodunda kullanılacak olay yöneticilerini constructor metodunda bağlayın. eslint: [`react/jsx-no-bind`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)
> Neden? Render metodunda yer alan bir bağlama çağrısı her render işleminde tamamen yeni bir fonksiyon yaratır.
```jsx
// kötü
class extends React.Component {
onClickDiv() {
// bişeyler yap
}
render() {
return
}
}
// iyi
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
// bişeyler yap
}
render() {
return
}
}
```
- React bileşeninin dahili metodları için alt çizgi önekini kullanmayın.
> Neden? Alt çizgi önekleri gizliliği belirtmek için diğer dillerde bir kural olarak bazen kullanılır. Fakat, bu dillerin aksine, JavaScript'de gizlilik için doğal bir destek yok, her şey açıktır. Niyetlerinize bakılmaksızın, property lere alt çizgi önekleri eklemek onları aslında gizli kılmaz ve herhangi bir property (alt çizgi öneki içeren veya içermeyen) herkese açık olarak değerlendirilmelidir. Daha detaylı bir tartışma için [#1024](https://github.com/airbnb/javascript/issues/1024) ve [#490](https://github.com/airbnb/javascript/issues/490) sorun sayfalarına göz atın.
```jsx
// kötü
React.createClass({
_onClickSubmit() {
// bişeyler yap
},
// diğer şeyler
});
// iyi
class extends React.Component {
onClickSubmit() {
// bişeyler yap
}
// diğer şeyler
}
```
- `render` metodunda bir değer döndürdüğünüze emin olun. eslint: [`react/require-render-return`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)
```jsx
// kötü
render() {
(
}
// iyi
render() {
return (
}
```
## Sıralama
- `class extends React.Component` için sıralama:
1. optional `static` methods
1. `constructor`
1. `getChildContext`
1. `componentWillMount`
1. `componentDidMount`
1. `componentWillReceiveProps`
1. `shouldComponentUpdate`
1. `componentWillUpdate`
1. `componentDidUpdate`
1. `componentWillUnmount`
1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()`
1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()`
1. *optional render methods* like `renderNavigation()` or `renderProfilePicture()`
1. `render`
- `propTypes`, `defaultProps`, `contextTypes`, vs. nasıl tanımlanır:
```jsx
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
text: PropTypes.string,
};
const defaultProps = {
text: 'Hello World',
};
class Link extends React.Component {
static methodsAreOk() {
return true;
}
render() {
return {this.props.text};
}
}
Link.propTypes = propTypes;
Link.defaultProps = defaultProps;
export default Link;
```
- `React.createClass` için sıralama: eslint: [`react/sort-comp`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)
1. `displayName`
1. `propTypes`
1. `contextTypes`
1. `childContextTypes`
1. `mixins`
1. `statics`
1. `defaultProps`
1. `getDefaultProps`
1. `getInitialState`
1. `getChildContext`
1. `componentWillMount`
1. `componentDidMount`
1. `componentWillReceiveProps`
1. `shouldComponentUpdate`
1. `componentWillUpdate`
1. `componentDidUpdate`
1. `componentWillUnmount`
1. *clickHandlers or eventHandlers* like `onClickSubmit()` or `onChangeDescription()`
1. *getter methods for `render`* like `getSelectReason()` or `getFooterContent()`
1. *optional render methods* like `renderNavigation()` or `renderProfilePicture()`
1. `render`
## `isMounted`
- `isMounted` kullanmayın. eslint: [`react/no-is-mounted`](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)
> Neden? [`isMounted` düzene uygun değildir][anti-pattern], ES6 sınıflarını kullanırken geçerli değildir, ve resmi olarak kaldırılmak için üzeredir.
[anti-pattern]: https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html
## Çeviri
Bu JSX/React stil rehberi aynı zamanda diğer dillerde de mevcuttur:
-  **Chinese (Simplified)**: [JasonBoy/javascript](https://github.com/JasonBoy/javascript/tree/master/react)
-  **Chinese (Traditional)**: [jigsawye/javascript](https://github.com/jigsawye/javascript/tree/master/react)
-  **Español**: [agrcrobles/javascript](https://github.com/agrcrobles/javascript/tree/master/react)
-  **Japanese**: [mitsuruog/javascript-style-guide](https://github.com/mitsuruog/javascript-style-guide/tree/master/react)
-  **Korean**: [apple77y/javascript](https://github.com/apple77y/javascript/tree/master/react)
-  **Polish**: [pietraszekl/javascript](https://github.com/pietraszekl/javascript/tree/master/react)
-  **Portuguese**: [ronal2do/javascript](https://github.com/ronal2do/airbnb-react-styleguide)
-  **Russian**: [leonidlebedev/javascript-airbnb](https://github.com/leonidlebedev/javascript-airbnb/tree/master/react)
-  **Thai**: [lvarayut/javascript-style-guide](https://github.com/lvarayut/javascript-style-guide/tree/master/react)
-  **Turkish**: [alioguzhan/react-style-guide](https://github.com/alioguzhan/react-style-guide)
-  **Ukrainian**: [ivanzusko/javascript](https://github.com/ivanzusko/javascript/tree/master/react)
**[⬆ back to top](#içindekiler)**