Daha güçlü ve profesyonel React uygulaması geliştirmek

Yusuf Özlü
May 9, 2018 · 2 min read

Öncelikle merhaba,

React/React.js web uygulaması geliştirmek konusunda yararlı olacağını düşündüğüm birkaç teknik ve kütüphane paylaşmak istiyorum…

Boilerplate Seçimi

React uygulaması geliştireceksiniz ama sıfırdan uygula mimarı oluşturmak yerine boilerplate kullanabilirsiniz. Ama internet pek çok boilerplate ile dolu. İhtiyaca göre aşağıdakilerden herhangi birini seçebilirsiniz.

React Boilerplate (Client Side Rendering)

Büyük projeler için bu boilerplate’i tercih edebilirsiniz. Bu boilerplate içinde bazı teknolojilerle geliyor bunlar:

  • Redux

Next.js (Server Side Rendering)

Next.js SSR(Server Side Rendering) için vazgeçilmez, kendisine has routing mekanizması var. Büyük yada küçük projelerde rahatlıkla kullanabilirsiniz.

Create React App (Client Side Rendering)

Küçük çaplı projeler için bu boilerplate’i kesinlikle öneriyorum. Redux kullanmak zorunda değilsiniz. React v16.3'ten sonra gelen context API ile state yönetimini küçük çaplı projeler için Redux olmadan kolaylıkla halledebilirsiniz.

Styling/Tasarım/Design

Styled-Components

Tasarım konusunda tek geçerim diyebileceğim Styled-Components var. Styled-Components size sass/less/stylus gibi preprocessor’ların sunduğu imkanı javascript ile yapmanızı sağlıyor. Ayrıca sadece .js(JavaScript) uzantısı ile çalışmakta ayrı bir haz vericek zamanla.

Linting/Formatting

ESLint

ESLint size pek çok konuda yardımcı olacaktır, özellikle kullanılmayan kod parçaları gibi… Aynı zamanda belirli bir kod yazma tarzını group projeleri için zorunlu hale getirir.

StyleLint

StyleLint ile yanlış yazılan styling attribute’lerini düzeltebilirsiniz ve styling konusunda belirli bir standardı yakalayabilirsiniz.

div{diplay:block} bu kod parçası size display attribute’u için uyarı verecektir

Prettier

Prettier kodunuzun formatını düzeltir ve belirli bir kod standardı yakalamanızı sağlar.

Pre-commit Hooks

Git Pre-Commit Hooks ile StyleLint, ESLint ve Prettier hatalarını düzeltmeden commit(git commit) işlemi gerçekleştirilemez, bu da geliştiricileri kod standardına uymaya zorunlu kılar. Ayrıca Pre-Commit Hooks ile ESLint, StyleLint ve Prettier hatalarının bazıları otomatik düzeltilebilir.

React ile vazgeçilmez olan kütüphaneler

Redux Saga

Redux Saga ile projenizdeki Network/IO gibi yan etkileri(side effects) yönetebilirsiniz.

Reselect

Reselect ile Redux statelerinizi yeni selektörler oluşturarak memoize işlemini gerçekleştirebilirsiniz, bu sayede redux tüm state’i baştan değiştirmek yerine sadece ilgili state’i değiştirerek performans konusunda büyük ölçüde fayda sağlar.

Ramda

Ramda sabitlik (immutability) ve fonksiyonel programlama(functional programming) konusunda size yardımcı olacaktır, büyük çaplı projeler için öneririm. Ramda’nın içinde pek çok faydalı fonksiyonlar(reduce, range, prop, assoc, sort, pickBy) da var onlar zamandan kazanmanıza da yardımcı olur

Recompose

R̶e̶c̶o̶m̶p̶o̶s̶e̶ ̶i̶l̶e̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶’̶l̶e̶r̶i̶n̶i̶z̶i̶ ̶s̶t̶a̶t̶e̶ ̶k̶a̶v̶r̶a̶m̶ı̶n̶d̶a̶n̶ ̶k̶u̶r̶t̶a̶r̶ı̶p̶ ̶h̶o̶c̶s̶(̶H̶i̶g̶h̶e̶r̶ ̶O̶r̶d̶e̶r̶ ̶C̶o̶m̶p̶o̶n̶e̶n̶t̶s̶)̶ ̶i̶l̶e̶ ̶e̶v̶e̶n̶t̶ ̶v̶e̶ ̶s̶t̶a̶t̶e̶l̶e̶r̶i̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶ ̶d̶ı̶ş̶ı̶n̶d̶a̶ ̶h̶a̶l̶l̶e̶t̶m̶e̶n̶i̶z̶i̶ ̶s̶a̶ğ̶l̶a̶r̶.̶ ̶B̶u̶ ̶s̶a̶y̶e̶d̶e̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶ ̶s̶t̶a̶t̶e̶l̶e̶s̶s̶/̶f̶u̶n̶c̶t̶i̶o̶n̶a̶l̶/̶p̶u̶r̶e̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶ ̶o̶l̶a̶r̶a̶k̶ ̶t̶a̶n̶ı̶m̶l̶a̶y̶ı̶p̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶’̶i̶ ̶t̶e̶k̶r̶a̶r̶ ̶k̶u̶l̶l̶a̶n̶i̶l̶a̶b̶i̶l̶i̶r̶(̶r̶e̶u̶s̶a̶b̶l̶e̶)̶ ̶h̶a̶l̶e̶ ̶g̶e̶t̶i̶r̶m̶i̶ş̶ ̶v̶e̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶’̶i̶ ̶b̶ü̶y̶ü̶k̶ ̶y̶ü̶k̶t̶e̶n̶ ̶k̶u̶r̶t̶a̶r̶m̶ı̶ş̶ ̶o̶l̶u̶r̶s̶u̶n̶u̶z̶.̶

Update: React v16.8 ile gelen React Hooks’tan sonra Recompose’a ihtiyaç kalmadı.

Formik & Yup

Formik form yönetimi için vazgeçilmez bir kütüphane. Yup ile form elementlerinizin doğrulama(validation) işlemini kolaylıklıkla halledebilirsiniz. Formik pek çok form elemanlarının(input, textarea, button) event’larını kendisi yönetir bu da sizi büyük yükten kurtarır.

Storybook

Storybook ile React UI component’lerinizi kolaylıkla dokümante ve test edebilirsiniz.

Editor/IDE

Visual Studio Code

Ben yaklaşık 1 yıldır Visual Studio Code kullanıyorum, eklentileri(extensions) ile vazgeçilmez oluyor. Kesinlikle öneririm.

Beni GitHub’ta bulabilirsiniz.

İyi kodlamalar 👨🏻‍💻🚀⚛️…

Yusuf Özlü

Written by

a Front-end Developer ⚛