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.

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.

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.

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

About Bir Frontendci

Lead FrontEnd Developer, React - Node.js - Html - Css Blogger, Geology Engineer, Gamer, Foosball Player, A True Car Enthusiast..
View all posts by Bir Frontendci →

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak.