React.JS için Küçük İpuçları

Published in

Frontend Development With JS

3 min readOct 29, 2018

Redux Connect

Redux Store’unda oluşan state değişikliklerini ilgili Component’a Connection sağlamak için bir Decorator kullanırsınız. Bu decorator redux state comp prop geçirerek state objesinde oluşan değişiklikleri component iletir.

import {connect} from 'react-redux';const mapStateToProps = state => {
    return {
        xyz: state.xyz,
        abc: state.abc    }
};

export default connect( mapStateToProps )( Comp );

Bunun bir diğer yoluda decorator plugini ile yapmaktır.

@connect((store) => {
    return {
        xyz: store.xyz,
        abc: store.abc
    };
})

Babel Loader JS dosyalarını yüklerken bu dönüşümü sizin için yaparlar.. Bunun için package.json ve webpack.config.js dosyalarına transform-decorators-legacy tanımlamanız gerekir..

package.json
babel-plugin-transform-class-properties
babel-plugin-transform-decorators-legacy: "^1.3.4",webpack.config.js
{
 test: /\.(js|jsx)$/,
 include: paths.appSrc,
 loader: require.resolve(‘babel-loader’),
 options: {
 
 // This is a feature of `babel-loader` for webpack (not Babel itself).
 // It enables caching results in ./node_modules/.cache/babel-loader/
 // directory for faster rebuilds.
 cacheDirectory: true,
 plugins: [“transform-decorators-legacy”],
 },
},

Production Lazy Load JS’lerin Çalışmaması

Development ortamında Lazy load ile yaptığınız çalışan dosyalar Production ortamında her bir dosya ayrı bir chunk dosyasına dönüştürülür ve bunlarda çağrılırken Undefined Token vb şekilde hatalar oluşur. Bu tip lazy load dosyaların ayrı JS Chunkları olmadan tek bir dosyada toplanmasını sağlamak için /* webpackMode: ‘eager’ */ ile import edilen dosyaları çağırın..

mapOfImports[‘getXXAPI’]={ functionName:’getXXAPI’,importAction:() => import(/* webpackMode: ‘eager’ */ ‘src/actions/xxapi.js’)};

Ekstra Not:
LazyImport load edilen modüllerin dinamik parametreler ile call edilmesi için ben statik bir sample seti kullandım. Siz Faker kütüphanesinden faydalanabilirsiniz.

Production Ortamında Assetlerin Font, SVG vb yüklenmemesi ve ekranda gözükmemesi

Development ortamında font veya svg dosyalarınız düzgün bir şekilde çalışırken prod ortamında assetler load olmaz ise public path production ortamınızın path verin.

webpack.config.js  
const publicPath ='https://s3-eu-west-1.amazonaws.com/...../';

Relative Path Problemi => Absolute Path..

Paketlere Erişim için Relative Path kullanırız fakat iç içe bileşenler tanımladıkça ../../../ path tanımlamaları işin içinden çıkılmaz bir hal almaya başlar . Bunun için absolute path tanımlayabilirsiniz..