├── 1.hafta-2-3-Kasim.md ├── 2.hafta-9-10-Kasim.md ├── 3.hafta-16-17-Kasim.md ├── 4.Hafta-23-24-Kasim-2019.md ├── 5.Hafta-30-Kasim-1-Aralik-2019.md └── README.md /1.hafta-2-3-Kasim.md: -------------------------------------------------------------------------------- 1 | # Kodluyoruz Frontend Bootcamp 2 | 3 | ## Genel olarak takip edebileceğimiz kaynaklar 4 | 5 | [leonardomso/33-js-concepts](https://github.com/leonardomso/33-js-concepts) 6 | 7 | Burda iyi bir JavaScript geliştiricisi olmak için bilmeniz gereken konseptlerin hepsi özetlenmiş ve hepsi için kaynaklar paylaşılmış. Her zaman kontrol edebileceğiniz bir kaynak 8 | 9 | [freeCodeCamp.org](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ) 10 | 11 | Sadece JavaScript değil tüm programlama dillerinden videolar içeren güzel bir youtube kanalı 12 | 13 | [The Courses to Master the JavaScript Ecosystem](https://tylermcginnis.com/) 14 | 15 | JavaScript ve React üzerine çok sade ve anlaşılır anlatımlar içeren bir websitesi. Genelde içerikler ücretli ancak aynı kişinin çok kaliteli ücretsiz içerikleri de sitede ve youtube'da bulunuyor. 16 | 17 | [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 18 | 19 | JavaScript'de bilmediğimiz bir şeyi öğrenmek istersek bakabileceğimiz ilk kaynak. Google da konu adının yanına "mdn" yazarak da istediğimiz sayfaya ulaşabiliriz. Örneğin template literals'i öğrenmek istiyorsak "JavaScript Template Literals mdn" aramasını google'da yapalım. 20 | 21 | ## 1. Hafta (2-3 Kasım 2019) 22 | 23 | ### Konu Başlıkları 24 | 25 | - React için bilmemiz gereken JavaScript Konuları 26 | - Template Literals 27 | - Shorthand Property and Function Names 28 | - Arrow Functions 29 | - Destructiring 30 | - Parameter Defaults 31 | - Rest / Spread Operators 32 | - var, let, const, function and block scopes 33 | - Array methods (map, filter, some, every, find) 34 | - Bu hafta öğrendiğimiz React konuları 35 | - Thinking in React 36 | - JSX 37 | - Props 38 | - Create React App 39 | 40 | ### Bu Hafta öğrendiğimiz konularla ilgili kaynaklar 41 | 42 | [fatihhayri/es6-turkce-kaynaklar](https://github.com/fatihhayri/es6-turkce-kaynaklar) 43 | 44 | Gördüğümüz JavaScript konuları hakkında türkçe kaynakları derleyen bir github sayfası. 45 | 46 | [JavaScript to Know for React](https://kentcdodds.com/blog/javascript-to-know-for-react/) 47 | 48 | İlk gün konuştuğumuz, React için bilmemiz gereken Javascript konularını özetleyen bir blog. 49 | 50 | [JavaScript Array Explorer](https://arrayexplorer.netlify.com/) 51 | 52 | Farklı array metodlarını inceleyebileceğimiz interaktif bir websitesi. 53 | 54 | [What you should know about JavaScript arrays](https://thomlom.dev/what-you-should-know-about-js-arrays/) 55 | 56 | Array'lerle alakalı bilmemiz gerekenlerden bahseden bir web sayfası 57 | 58 | [Öğretici: React'e giriş - React](https://tr.reactjs.org/tutorial/tutorial.html) 59 | 60 | React.js resmi türkçe dökümanı 61 | 62 | [ReactJS Ders 04: Props kullanımı ve Parent-Child Component İletişimi](https://www.youtube.com/watch?v=5WjwauFbSNU) 63 | 64 | Props konusunda inceleyebileceiğimiz şöyle bir türkçe kaynak var. 65 | 66 | [JSX'e Giriş - React](https://tr.reactjs.org/docs/introducing-jsx.html) 67 | 68 | JSX nedir 69 | 70 | ### Bu hafta yaptığımız örnek projelerin kaynak kodları 71 | 72 | [pokedex.zip](pokedex-7200812e-71eb-4db2-9007-28008ba7f858.zip) 73 | 74 | ### Bu hafta öğrendiklerimizi uygulamak için sizin yapabileceğiniz proje tavsiyeleri 75 | 76 | - Social Card 77 | 78 | Component yapısını daha iyi anlamak için aşağıdaki gibi bi card yapmayı deneyebilirsiniz. 79 | 80 | ![](Untitled-c60a9fa2-4738-46c2-a8a3-da1f84555c69.png) 81 | 82 | - Hava Durumu uygulaması 83 | 84 | ![](Untitled-960c1109-a1f0-423e-8b52-100c9aae2c0a.png) 85 | 86 | ### Bilgisayarınızda bulunmasını tavsiye ettiğim bir Chrome eklentisi 87 | 88 | [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) 89 | -------------------------------------------------------------------------------- /2.hafta-9-10-Kasim.md: -------------------------------------------------------------------------------- 1 | Ödevler 2 | ======= 3 | 4 | * React yazı tura uygulaması. Aşağıdaki linke tıklayarak ödevi alabilirsiniz, detaylar ödev reposunda yazıyor https://classroom.github.com/a/eiwdNYY4 5 | * Array methodları alıştırmalları, aşağıdaki linkten ödevi alabilirsiniz. 6 | https://classroom.github.com/a/14IiEoPy 7 | 8 | Dökümanlar 9 | ======= 10 | * Array metodları hakkında bir döküman: https://gist.github.com/yurtarmehmet/1d0b35166cd6a189458d92ca36c7ae05 11 | * Class vs Functional components hakkında bir döküman: https://gist.github.com/yurtarmehmet/ace48760ce2404d88a0f71119ab403fd 12 | 13 | Yapılan projeler 14 | ======= 15 | 16 | * Burger Builder uygulaması: https://github.com/Frontend-Bootcamp-Istanbul/burger-builder 17 | 18 | Linkler 19 | ======= 20 | 21 | * Bir React Developerın Yol Haritası: https://raw.githubusercontent.com/adam-golab/react-developer-roadmap/master/roadmap.png 22 | * Props vs State 1: https://scotch.io/courses/5-essential-react-concepts-to-know-before-learning-redux/what-is-props-and-state-in-react 23 | * Props vs State 2: https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c 24 | * Props vs State 3: https://lucybain.com/blog/2016/react-state-vs-pros/ 25 | * Create React App: https://kodcu.com/2017/05/react-js-projesi-gelistirmek-icin-ortam-olusturmak/ 26 | * JavaScript Array metodları (türkçe): https://cagatay.me/javascript-i%CC%87le-temel-dizi-i%CC%87%C5%9Flemleri-javascript-array-operations-de040d8ac41e 27 | * React genel bir bakış: https://www.taniarascia.com/getting-started-with-react/ 28 | * Git(Türkçe): https://kod5.org/baslica-git-komutlari/ 29 | * Git ve Github(Türkçe): https://medium.com/@emrullahluleci/git-ve-github-nas-l-kullan-l-r-7d3cc886b77e 30 | * React&Redux Linkleri: https://github.com/markerikson/react-redux-links 31 | 32 | 33 | Örnek Proje Kaynak Kodları 34 | ======= 35 | 36 | * React Adam Asmaca oyunu: https://github.com/tundeszirak/hangman 37 | * React Zar atma oyunu: https://www.golangprograms.com/dice-game-in-react-js.html 38 | -------------------------------------------------------------------------------- /3.hafta-16-17-Kasim.md: -------------------------------------------------------------------------------- 1 | Ödev 2 | ======= 3 | 4 | * Todo uygulaması. Aşağıdaki linke tıklayarak ödevi alabilirsiniz, detaylar ödev reposunda yazıyor 5 | https://classroom.github.com/a/IHUoUsp9 6 | 7 | Dökümanlar 8 | ======= 9 | * State'de ekleme-çıkarma-güncelleme işlemleri: https://gist.github.com/yurtarmehmet/638f9b3b4be792c00a06cac9efc01a59 10 | 11 | Linkler 12 | ======= 13 | 14 | * React Lifecycle metodları grafik: https://erdincuzun.com/wp-content/uploads/2019/component_lifecycle.jpg 15 | * React Lifecylce metodları blog (Türkçe):https://medium.com/software-development-turkey/react-lifecycle-ya%C5%9Fam-d%C3%B6ng%C3%BCs%C3%BC-d650ab78ab4f 16 | * React Lifecylce metodları blog 2 (Türkçe): https://erdincuzun.com/react-native/01-08-react-bileseni-yasam-dongusu/ 17 | * React Lifecycle metodları: https://programmingwithmosh.com/javascript/react-lifecycle-methods/ 18 | * How to use React Lifecycle Methods: https://medium.com/front-end-weekly/how-to-use-react-lifecycle-methods-103fc3b1711 19 | * JavaScript'de değişmezlik: https://medium.com/@oguzkilic/javascriptte-de%C4%9Fi%C5%9Fmezlik-11b895a730d8 20 | * Does it mutate?: https://doesitmutate.xyz/ 21 | * Kontrollü, Kontrolsüz Input: https://github.com/tylermcginnis/react-fundamentals/blob/master/Notes.md#forms-and--encapsulation-in-react 22 | * Kontrollü, Kontrolsüz Input: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ 23 | * Kontröllü Input: https://tr.reactjs.org/docs/forms.html#controlled-components 24 | * Kontrölsüz Input: https://tr.reactjs.org/docs/uncontrolled-components.html 25 | * Event Propagation: https://www.w3schools.com/jsref/event_stoppropagation.asp 26 | * JavaScript WAT? Talk: https://www.destroyallsoftware.com/talks/wat 27 | -------------------------------------------------------------------------------- /4.Hafta-23-24-Kasim-2019.md: -------------------------------------------------------------------------------- 1 | Ödev 2 | ======= 3 | 4 | **Pet Detay Sayfasi** 5 | 6 | Pets uygulamasina pet detay sayfasinin eklenmesi. Her bir pet componentine tikladigimizda /detay uzantili url gitmesini 7 | ve burada da tiklanan pet'in detaylarinin gosterilmesini bekliyoruz. 8 | Her bir pet icin id ekledim cektigimiz data icerisine, url'de bu idleri kullanmalisiniz. Ilgili pet'in detayini alabilmek icin 9 | ```http://5dd7af92505c590014d3b4ac.mockapi.io/pets/${id}``` 10 | adresine istek atmaniz gerekiyor. 11 | 12 | 13 | **Infinite Scroll** 14 | 15 | Listelenen 37 tane pet var, bunlarin 37 tanesini tek seferde gormek yerine sayfada 4'er 4'er gosterecek yapiyi kuralim. Kullanici sayfanin en altina her indiginde 4 urun daha gosterecegiz. 16 | 17 | 18 | **Istege bagli odev, axios kullanimi** 19 | 20 | Isteklerimizi atarken fetch degil de axios isimli kutuphaneyi kullanalim. 21 | 22 | Linkten Odevi alabilirsiniz: https://classroom.github.com/a/fBgJdo1p 23 | 24 | 25 | Linkler 26 | ======= 27 | 28 | * React Router 1 - https://scotch.io/bar-talk/getting-started-with-react-router-v4 29 | * React Router 2 - https://tylermcginnis.com/react-router-handling-404-pages/ 30 | * React Router 3 - https://tylermcginnis.com/react-router-programmatically-navigate/ 31 | * React Router 4 - https://tylermcginnis.com/react-router-query-strings/ 32 | * Simple React Patterns - http://lucasmreis.github.io/blog/simple-react-patterns/ 33 | * React Bits Kitap https://vasanthk.gitbooks.io/react-bits/ 34 | * React Patterns ([https://reactpatterns.com/](https://reactpatterns.com/)) 35 | * React Component Patterns ([https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82](https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82)) 36 | * Presentational and Container Components https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 37 | * Props.Children (https://codeburst.io/a-quick-intro-to-reacts-props-children-cb3d2fce4891) 38 | * Using axios with react https://alligator.io/react/axios-react/ 39 | -------------------------------------------------------------------------------- /5.Hafta-30-Kasim-1-Aralik-2019.md: -------------------------------------------------------------------------------- 1 | Odevler 2 | ======= 3 | 4 | * 1. TodoApp Redux uygulamasi: Yaptigimiz todo uygulamamizda butun proplari redux storeuna cevirelim, app.js dosyasinin render methodu son durumda soyle gozukmeli 5 | 6 | ```js 7 | render(){ 8 | return ( 9 |
10 |
11 |

Todo Ekle / Sil

12 |
13 | 14 | 15 | 16 |
17 |
18 | 20 |
21 | ); 22 | } 23 | } 24 | ``` 25 | 26 | * 2. Todo uygulamamizda Redux ile, her todo eklendiginde ve silindiginde ekrana uyari cikartan bir yapi kuralim. Ipucu olarak "SHOW_NOTIFICATION" ve "HIDE_NOTIFICATION" isimli iki actionumuz olacak. 27 | 28 | * 3. Todo uygulamamizdaki cssleri sass yada styled-component yontemlerinden birine cevirelim. 29 | 30 | Odevi linkten alabilirsiniz: https://classroom.github.com/a/KTieEpiQ 31 | 32 | 33 | 34 | 35 | Linkler 36 | ======= 37 | 38 | **State Management / React State Yonetimi - Redux** 39 | 40 | * Managing State in Modern React Apps: https://developerhandbook.com/react/managing-state-modern-react-web-applications/ 41 | * Bir JavaScript developer neden Redux Ogrenmeli: https://www.robinwieruch.de/redux-javascript 42 | * React ve Redux'ta immutability(degismezlik): https://daveceddia.com/react-redux-immutability-guide/ 43 | * A carton intro to redux: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6 44 | * Redux ile bookshop uygulamasi: https://scotch.io/tutorials/build-a-bookshop-with-react-redux-i-react-redux-flow 45 | * React-Redux resmi dokumani: https://react-redux.js.org/introduction/quick-start 46 | * Redux dev tools: https://github.com/zalmoxisus/redux-devtools-extension 47 | * Container ve Presentational Components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 48 | * React&Redux ogrenmek icin ipuclari: https://www.robinwieruch.de/tips-to-learn-react-redux 49 | * Redux nedir? (TURKCE): http://devnot.com/2018/redux-nedir/ 50 | 51 | **PropTypes ve defaultProps** 52 | 53 | * https://css-tricks.com/props-and-proptypes-in-react/ 54 | 55 | **React'da css ve styling secenekleri** 56 | * React'da stilleme(TURKCE): https://medium.com/@oguzkilic/css-in-javascript-styled-components-aa06a6f54388 57 | * React 3 Temel css yaklasimi: https://jsramblings.com/2017/09/22/understand-the-react-styling-paradigms.html 58 | * React componentleri icin 4 farkli css yaklasimi: https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 59 | * Styled components'e 5 dakikalik bir giris: https://www.freecodecamp.org/news/a-5-minute-intro-to-styled-components-41f40eb7cd55/ 60 | * Styled components detayli analiz: https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/ 61 | 62 | **Genel** 63 | * Modern JavaScript Terimleri Sozlugu Part 1: https://auth0.com/blog/glossary-of-modern-javascript-concepts/ 64 | * Modern JavaScript Terimleri Sozlugu Part 2: https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/ 65 | * JavaScript&React ogrenirken nasil bir yol izlenmeli: https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3 66 | * React.js cheatsheet: https://devhints.io/react 67 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Program-Linkler-Odevler 2 | 3 | [1. Hafta (2-3 Kasım 2019)](https://github.com/Frontend-Bootcamp-Istanbul/program-linkler-odevler/blob/master/1.hafta-2-3-Kasim.md) 4 | 5 | [2. Hafta (9-10 Kasım 2019)](https://github.com/Frontend-Bootcamp-Istanbul/program-linkler-odevler/blob/master/2.hafta-9-10-Kasim.md) 6 | 7 | [3. Hafta (16-17 Kasım 2019)](https://github.com/Frontend-Bootcamp-Istanbul/program-linkler-odevler/blob/master/3.hafta-16-17-Kasim.md) 8 | 9 | [4. Hafta (23-24 Kasım 2019)](https://github.com/Frontend-Bootcamp-Istanbul/program-linkler-odevler/blob/master/4.Hafta-23-24-Kasim-2019.md) 10 | 11 | [5. Hafta (30 Kasım - 1 Aralık 2019)](https://github.com/Frontend-Bootcamp-Istanbul/program-linkler-odevler/blob/master/5.Hafta-30-Kasim-1-Aralik-2019.md) 12 | --------------------------------------------------------------------------------