React’ın Tökezlediği Durumlar

React’ın Tökezlediği Durumlar

React'ın Tökezlediği Durumlar

Sinek küçüktür ama mide bulandırır sözü tam da bu konuyu özetliyor. React ile JSX yazmak güzel fakat bazı klişeler gerçekten can sıkabiliyor. Bu yazıda bu minik ayrıntılara değineceğim ve bunları aklımızın bir köşesinde tutarsak tökezlemeden react yazabiliriz.

Bileşen Adları

Eğer JSX kullanıyorsanız React bileşenleri büyük harfle başlamalıdır. Bileşeninize “userMenu” ya da “usermenu” gibi isimler verirseniz çalışmadığını göreceksiniz. Bu isimleri “UserMenu” ve “Usermenu” olarak vermeniz gerekmektedir.

Bunun nedeni JSX formatında html elemanları yani div, ul gibi elemanlar küçük harfle başlar. Bileşen isminizi küçük yazdığınızda JSX onu bir Html / Svg elemanı olarak algılar ve karşılığını bulmaya çalışır. Bulamadığında ise hata verecektir.

*React yazarken eğer JSX formatı kullanmıyorsanız küçük harf yazabilirsiniz. Ancak bu ileride size sıkıntı çıkarabilir.

 

Html Elemanlarının Kapatılması

JSX formatında her elemanın kapalı olması gerekir.

DOĞRU OLAN:

return <br/>;

return <input type='password' .../>;

YANLIŞ OLAN:

return <br>;

return <input type='password' ...>;

 

setState’in Asenkron olması

setState ve this.state diye anlık değiştirdiğiniz stateler asenkron olarak çalışmaktadır. Bir state’e bağlı başka işlemler yapacaksanız setState işlemi bittikten sonra yapmanız gerekiyor. Eğer buna ihtiyaç duyuyorsanız setState işlemi bitince çalışacak bir fonksiyonla bunu çözebilirsiniz.

this.setState({name: 'Evren'}, function() {

	// Burası setState işlemi bittikten sonra çalışacaktır.

});

Bunun bir diğer çözümü de componentWillUpdate veya ComponentDidUpdate kullanmaktır. Bu işlemler render’dan hemen sonra çağırılacaktır.

 

Benim şu anda aklıma gelenler bunlar. Aklıma geldikçe ekleyeceğim, sizin de karşılaştığınız bu tarz sorunlar varsa yazabilirsiniz.

Facebook Yorumları
Admin

Lead FrontEnd Developer, React – Node.js – Html – Css Blogger, Geology Engineer, Gamer, Foosball Player, A True Car Enthusiast..

Yorum yapmak ister misin?