En basitinden React Js haritası

Elbette yeterli ingilizceniz varsa bu konu hakkında internetde çok fazla ve bazıları baya bir işinize yarayacak kaynaklar var fakat burda sorun şu ki pek çoğu konuya kendileri hakim olduklari için direk karmaşık olaylardan ve belki bir çok insanın hayatında ilk kez gördüğü terminlerden konuşuyorlar. Sonuç hiç de olumlu deyil. (Ve bu makaleni yazmamın en önemli sebebi direk bir tecrübe olarak anlatmam ve Türkce daha açiklayıcı olması)

Arkadaşlar ilk önce söylemek istiyorum ki bu makalede size Virtual Dom ve Real Dom farkı ve ya JSX nedir ve ya 2 way data binding ve s konuları anlatmaya niyyetli deyilim. Zaten bunları öğrenmek isterseniz belirtdiğim gibi bu konu hakkında cok güzel kaynaklar var.

Ilk önce tebrikler React js öğrenecek konuma gele bildiyseniz demek ki artık programlamada epey yol katetmişsinizdir. Çoğ insan React öğrenmeye başlarken ilk önce ne yapar? Tabii programlamada seneleri geçmiş insanlarin cevabi belli documents okumak ve kişisel websitesinde araştırmalar yapmak. Peki ya programlamaya yeni başladıysanız ve ingilizceniz yeteri kadar iyi değilse? Cevap basit Udemy den kurs alirim ordan denerim. Aslına bakarsanız kulağa kötü de gelmiyor.

Konuyu fazla uzatmadan bu görsele iyice bakmanızı istiyorum.

Tabii ilk defa görüyorsanız baya korkutucu gele bilir mesele şu ki burda yazılanların hepsini aslında bilmeniz gerekmiyor çoğu şirket zaten sadece bir kaçını kulaniyor ve bu kadarı başlanğıç için çok fazla.

1. Fundametal Topics.

Bence React js -in nasıl çalışdığını anlamak için tabii Webpack , babel ve s bilginiz iyi değilse CRA -nin klasör yapısını iyice bilmeniz gerek. Ve en püf nokta burası sanıyorum Component mimarisi nedir onu iyice anlamak ve JSX -in teoride değil pratik olarak ne olduğunu ve yazdığınız kodun nasıl çalıştığı mantığını anlamak. Props , State ve Conditional Rendering kavramlarına mümkün olduğunca zaman ayırmağa çalısın projelerde işe yaradığını göreceksiniz. (Ben zamanında Class component yapısını da öğrendim ama ne şuan çalıştığım şirketde nede artık başka bir yerde kullanıldığını düşünmüyorum opsiyonel olarak diyelim buna)

2. Component life cycle, Keys, Composition, Basic Hooks- ve unutmamamız gereken önemli bir şey daha React js bir javascript kütüphanesidir yani javascripti özellikle es6+ la gelen yenilikleri iyi bilmek sizi baya ileri götürecekdir. Programlamada yeniyseniz Component life cycle baya ilginc gele bilir size diğerleri o kadar da zor konular değil fakat bilmeden yapamazsınız

3. React Hooks- tabii son zamanlar baya bi çoğaldılar. Ama functional component yazıyorsanız hook-suz asla olmaz bana sorarsanız en azından useState, useEffect, useRef, useContext, useMemo, useCallBack, useReducer öğrenmeniz baya faydalı olacaktır ve unutmadan ufaktan kendi hook-unuzu yazmayı ve asılnda hook dediğimiz şeyin ne olduğunu bilmeniz iyi olucakdır.

4. HOC, Error Boundaries , React Lazy, Large scale react project architecture-arkadaşlar bu konulara gelmeden mutlaka en az2 proje geliştirmeniz sizi bu konularda baya tecrübeli yapacakdır ben baya bir proje yazdım bu konuları öğrenmeden önce. Özellikle large scale react project architecture konusunu baya bir araştırın derim cok fazla kaynak yok ama bulamasanız bile bir fikir sahibi olucaksınız ve bu aynı zamanda bir tecrübe ile kazanılacak bir konu.

5. React forms, Formik, React Hook Form, Yup- o kadar da zor olacağını düşünmüyorum bu konular baya kullanışlı projeye çalışacağınız şirkete göre farklılık göstermekte biz mesela kullanmıyoruz neredeyse

6. State Managment: Redux, Recoil, React Query- burası bir az hassas bir konu açikcası. Geniş bir komunitisi olması sebebile React çok fazla gelişiyor ve bence çok fazla state managment kütüphaneleri var bana sorarsanız Redux ve React Query bunlardan en önemlileri Recoil kullanim kolaylığı açısından seviyorum küçük projeler için çok uyğun.

7. Next or Gatsby , SSR, React Router Dom- React yazacaksanız tabii bu konuya değinmeden olmazdı ben bu konuda açikca Next Js -i seviyorum baya bir kullandım ve şirketler açısından şansınızı arttırıyor ama siz Gatsby de seçe bilirsiniz. Ben tek projede hem back end hem frontend geliştirmeyi ve SSR-in rahat kullanıldığına göre Next Js seçtim.

8. React Bootstrap, Material Ui, Styled-components, Sass modules- bootstrap biliyorsanız ve component matığını iyice kavramışsanız react bootstrap sizin için baya kolay olacaktır. Ama bana sorarsanız bu konular baya bir önemli ve hepsini öğrenirseniz verimli olucaktır

9. Always learn and practise- devamlı araştırmada olun , makaleler okuyun ve en az 1 büyük proje yapın kendi başınıza

Arkadaşlar benden bu kadar kendi tecrübelerimi sizinle bölüşmek istedim umarim yardimi dokunur. Teşekkürler Sağolun.