React.js-2

React.js-2

• 1. Slide1 ReactJS ØReact-Pose Animation ØReact-Lifecycle Methods ØReact-Router
• 2. REACT-POSE ANIMATION Bir React Pose kütüphanesidir. Npm package’dir. Bir dive animation kazandırmak için kullanırız. 1.Pose’u import ederiz. 2.Değişken oluştururuz. REACT-POSE ANIMATION
• 3. REACT-POSE ANIMATION 3.Oluşturduğumuz değişkeni component olarak kullanabiliyoruz REACT-POSE ANIMATION
• 4. REACT-POSE ANIMATION 4.Animation için visible /hidden state’i için arrow functionumuzu yazıyoruz. 5.Return içinde fonksiyonumuzu kontrol eden butonu ekliyoruz. REACT-POSE ANIMATION
• 5. REACT-LIFECYCLE METHODS •Unmounting React projelerinde lifecyle süreci 3 adımdan oluşmaktadır. •Updating •Mounting REACT-LIFECYCLE METHODS
• 6. MOUNTING Componentimizin DOM’a bağlanması adımıdır. Componentin Real Dom’a aktarılmadan önceki anıdır. setState fonksiyonu çalışmaz çünkü render’dan sonra çalışır. Constructor’dan sonra çalışır. ComponentWillMount MOUNTING
• 7. MOUNTING Componentimizin DOM’a bağlanması adımıdır. Componentimiz Dom’da render edildikten sonra çalışır. Önce constructor sonra ComponentWillMount sonra render edilir. En son da ComponentDidMount çalışır. ComponentDidMount MOUNTING Render
• 8. UPDATING Componentimizin DOM üzerinde güncellenmesi işlemidir. ComponentDidUpdate Önce ComponentWillUpdate çalışır Render işlemi gerçekleşir ondan sonraki event ComponentDidUpdate’tir. UPDATING
• 9. UNMOUNTING Componentimizin DOM’dan kaldırılması işlemidir. ComponentWillUnmount Tüm işlemler bittikten sonra componentimizi DOM üzerinden kaldırmak için çalışan event’tir. UNMOUNTING
• 10. REACT ROUTER 1.React router için kütüphanemizi dahil edelm 2.BrowserRouter import edelim •Route component Yalnızca link olursa render edilince yazılır. REACT ROUTER
• 11. REACT ROUTER 3. taglerinin arasına Exact path olarak adresleme yapabiliriz. ‘’/’’ Route’da Users Componentini render ediyor ‘’/add’’ geldiğinde AddUser componentinin render ediyor. REACT ROUTER
• 12. REACT ROUTER React router kullanmak için yapmamız gereken şey, `Link` componentleri ile URL'i set etmek, ardından `Route` componentleri ile URL ile eşleşen componenti yüklemektir. REACT ROUTER
• 13. SOURCE https://omergulcicek.github.io/react-router/gelismis- kilavuzlar/route.html https://www.udemy.com/sifirdan-reactjs-ve-context- api/learn/lecture/13577650#overview https://reacttraining.com/react-router/web/guides/quick-start https://github.com/omergulcicek/react-router http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ https://medium.com/software-development-turkey/react-lifecycle-ya%C5%9Fam- d%C3%B6ng%C3%BCs%C3%BC-d650ab78ab4f SOURCE