React.js

React.js

• 1. Slide1 ReactJS JSX standartıyla yazılan bir JS kütüphanesidir.
• 2. Slide2 Modal-View-Controller mimarisinin View kısmını oluşturur.
• 3. Slide3 REACT-VİRTUAL DOM KAVRAMI Diff Alg. Virtual Dom’un bir adet de snapshot’ı kaydedilir. Virtual Dom Diff algoritması ile Real Dom’a aktarılır. Component mantığından dolayı performans artırılır. Virtual Dom, Gerçek Dom’un kopyasıdır. 2 Adet Virtual Dom vardır. VDOM SNAPSHOT VDOM REAL DOM
• 4. Slide4
• 5. Slide14 Component herhangi bir state barındırmıyorsa, Sabit olacak ve bir props gönderilcekse component functional oluşturulur. Functioanal Components
• 6. Slide15 Hem state hem de props olacaksa component class-base oluşturulur. Class Components
• 7. Slide5 REACT- CSS VE BOOTSTRAP Css’i istersek inline style olarak ya da ayrı bir css dosyası şeklinde ekleyebiliriz.
• 8. Slide16 BOOTSTRAP Bootstrap’i getbootstrap.com sitesinden alıp linklerini index.html’e ekliyoruz. rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384- ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> https://getbootstrap.com/docs/4.3/getting- started/introduction/
• 9. Slide6 PROPS KAVRAMI Propslar Componentler arası veri aktarımı yapmaya yararlar. Sabit veriler göndeririz ve bu veriler sabit olduğundan render edilmezler.
• 10. Slide7 STATE KAVRAMI State component’ın o anki datalarının durumunu gösterir. State değiştiğinde Virtual Dom bunu farkeder ve sadece o state render edilir. Stateler sadece setState() fonksiyonu ile güncellenebilir.
• 11. Slide17 STATE KAVRAMI (cont.) 2 yöntemi vardır. 1.Constructor içinde 2.Class’ın en tepesinde oluşturarak.
• 12. Slide8 REACT- EVENTLAR Js deki gibi elementimize eventimiz ekliyoruz. Event metodumuzda this’i gösteriyoruz Fakat this’in hangi objeyi gösterdiğini bilmemiz için elentimizi bind etmemiz gerekir.
• 13. Slide18 REACT- EVENTLAR(cont.) Bind işlemini istersek constructor’ın içinde yapabiliriz. İstersek de arrow function şeklinde yazarız.(Arrow function kendisi bind’lar.)
• 14. Slide11 CONTEXT API “Context” ihtiyaç duyulan verilerin, uygulama içerisinde “global” olarak kullanılmasını sağlar.
• 15. Slide19 Provider: İçerisine “property” olarak bir değer alır ve alt bileşenlerine bu değeri aktarır. CONTEXT API(cont.) Consumer: İçerisine fonksiyon yazarak bir sonuç döndürmemiz sağlar.
• 16. Slide13 ACTION, DISPATCH, REDUCER KAVRAMI ...state operatörü eski verileri kaybetmemek için alır,yerleştirir ve bu sayede güncelleriz
• 17. Slide20 ACTION, DISPATCH, REDUCER KULLANIMI 1.Dispatch’i state’in içine yazarız. 2.Providerla value olarak alttaki componentlara geçiriyoruz.
• 18. Slide21 3.Dispatch içine action alır. ACTION, DISPATCH, REDUCER KULLANIMI 4.Action önceki state ile beraber reducer’a gider.
• 19. Slide22 ACTION, DISPATCH, REDUCER KULLANIMI 5.Reducer switch yapısıyla action.type’ı kontrol eder. 6.Dispatch’e yeni state gelir ve güncellenir.
• 20. Slide10 •https://guide.freecodecamp.org/react/functional- components-vs-class-components/ •https://tr.reactjs.org/ •https://www.udemy.com/sifirdan-reactjs-ve-context-api/learn •https://getbootstrap.com/docs/4.3/getting- started/introduction/ SOURCE •https://medium.com/@hvsonmez/reactjs-context- b%C3%B6l%C3%BCm-5-47dbf7808f0