├── Extensions.md ├── README.md ├── Week-0.0.md ├── Week-0.1.md ├── Week-3.0.md └── pictures ├── 1.png ├── 2.png ├── 3.png ├── 4.png └── 5.png /Extensions.md: -------------------------------------------------------------------------------- 1 | **GitLens:** https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 2 |
3 | **Snippets:** https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 4 |
5 | **Import Cost:** https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost 6 |
7 | **Better Align:** https://marketplace.visualstudio.com/items?itemName=wwm.better-align 8 |
9 | **Better Comments:** https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments 10 |
11 | **Path Intellisense:** https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense 12 |
13 | **Auto Rename Tag:** https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag 14 |
15 | **Highlight:** https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag 16 |
17 | **Indented Block Highlighting:** https://marketplace.visualstudio.com/items?itemName=byi8220.indented-block-highlighting 18 |
19 | **VSCode Dimmer Block:** https://marketplace.visualstudio.com/items?itemName=imagio.vscode-dimmer-block 20 |
21 | **Sort JSON objects:** https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json 22 |
23 | **IntelliCode:** https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode 24 |
25 | **Prettier:** https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 26 |
27 | **icon_v1:** https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons (sadece birisini kullanın) 28 |
29 | **icon_v2:** https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme (sadece birisini kullanın) 30 |
31 | **JSON Diagram Schema Editor:** https://jsoncrack.com/editor -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Native Bootcamp Notes 2 | 3 | 1. Hafta 0.0 -> [Tıkla](Week-0.0.md) 4 | 2. Hafta 0.1 -> [Tıkla](Week-0.1.md) 5 | 6 | - Ödevler: 7 | - StyleSheet dökümantasyon okuması : [Tıkla](https://reactnative.dev/docs/stylesheet) 8 | - Layout Props dökümantasyon okuması : [Tıkla](https://reactnative.dev/docs/layout-props) 9 | - API dökümantasyonu okuması : [Tıkla](https://reactnative.dev/docs/accessibilityinfo) 10 | - Spread operator 11 | 12 | 1. Hafta 1.0 13 | 2. Hafta 1.1 14 | 15 | - Ödevler: 16 | 17 | - En az bir tane Third Party Library kullanılacak. 18 | - Responsive tasarım 19 | - IOS status bar durumuna bakılacak. 20 | - Dosya hiyerarşisine dikkat edilmeli 21 | 22 | İstediğimiz herhangi bir uygulama yapılacak. Önemli olan responsive design olması. 23 | 24 | Kendime ait 2. ödevi incelemek isterseniz [tıklayınız](https://github.com/K149-WFP-React-Native-Bootcamp/second-week-homework-mustafadede) 25 | 26 | 27 | 1. Hafta 2.0 28 | 2. Hafta 2.1 29 | 30 | - Ödevler: 31 | 32 | - React Navigation proje içerinde olmalı 33 | - Responsive tasarım 34 | - Redux implementasyonu 35 | - Dosya hiyerarşisine dikkat edilmeli 36 | 37 | İstediğimiz herhangi bir uygulama yapılacak. Önemli olan navigation ve redux. 38 | 39 | 1. Hafta 3.0 -> [Tıkla](./Week-3.0.md) 40 | - Öğretmenin tavsiye ettiği [eklentiler](./Extensions.md) -------------------------------------------------------------------------------- /Week-0.0.md: -------------------------------------------------------------------------------- 1 | - Visual Studio Code : https://code.visualstudio.com/ 2 | - Java'yı yönetmek için tool (Jenv) : https://www.jenv.be/ 3 | - Windows için Jenv : https://github.com/FelixSelter/JEnv-for-Windows 4 | - Zulu (Java SDK) : https://www.azul.com/downloads/?package=jdk 5 | - Node.js kurulumu : https://nodejs.org/en/ 6 | - Android Studio : https://developer.android.com/studio 7 | - Xcode : https://developer.apple.com/xcode/ 8 |
9 | Kurulum sırasında dikkat edilmesi gereken şeyler: 10 | - Xcode kısmında eski sürümler : https://stackoverflow.com/questions/10335747/how-to-download-xcode-dmg-or-xip-file 11 | - Java SDK kurulumu kısmında add to path dememiz şart. Eğer yapmadan geçerseniz path kısmına ekstra olarak tanımlayın ya da indirdiğimiz SDK dosyasını tekrar açıp change kısmını seçip add to path kısmını seçerek ekleyin. 12 | - Android kurulumu sırasında tüm tikleri işaretleyiniz. 13 |
14 | ![kurulum-fotoğrafı](./pictures/1.png) 15 |
16 | 17 | - Android Studio kurulduktan sonra more actions kısmına tıklayalım ve aşağıda olan kısımları seçelim: 18 |
19 | 20 | ![kurulum-fotoğrafı](./pictures/2.png) 21 | ![kurulum-fotoğrafı](./pictures/3.png) 22 | 23 | - More Actions -> Virtual Device Manager -> Create Virtual Device kısmından istediğimiz cihazı seçiniz. 24 | - Android Virtual Device kurulumundan sonra Cool boost özelliğini eğer performans istiyorsanız seçiniz. Ram kısmını da ayarlayabilirsiniz. 25 | 26 | ![Kurulum](./pictures/4.png) 27 | 28 | ## React Native CLI ile proje oluşturmak 29 | 30 | ### Windows için: 31 | 32 | Proje oluşturmak için `npx react-native init [proje adı]` komutu ile terminale komut yazabilirsiniz. 33 | 34 | - Android kısmı için Windows tuşu + R tuşlaması yaparak `SystemPropertiesAdvanced.exe` girin ve ortam değişkenlerini açın. 35 | 36 | - Ortam değişkenleri içerisine Sistem değişkenleri kısmından Path kısmına gelip fotoğraftaki son iki kısmı değişkenlere ayrı ayrı ekleyin. 37 | 38 | ![Kurulum](./pictures/5.png) 39 | 40 | ### Mac için: 41 | 42 | - Brew yüklemek için : https://brew.sh/index_tr 43 | - `brew install node` diyerek node'u kurunuz. 44 | - Pods için : https://cocoapods.org/ 45 | 46 | - Z Profile hatası için terminale bunları yazınız : 47 |
48 |
49 | `export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools` 50 | -------------------------------------------------------------------------------- /Week-0.1.md: -------------------------------------------------------------------------------- 1 | # React Native Start 2 | 3 | **Not: Android kısımlarını ios ile değiştirebilirsiniz.** 4 | 5 |
6 | 7 | Proje kurulumu : 8 | 9 | 1. Terminal kısmına `npx react-native init [proje-adi]` yazarak React Native projesi başlatabilirsiniz. 10 | 11 | IOS için build alma : 12 | 13 | 1. ios klasörüne gelip terminalde aç dedikten sonra `pod install --repo-update` terminale kodu giriniz. 14 | 15 | Kendi cihazınızda çalıştırmak için : 16 | 17 | 1. Telefonu kablo ile bağlayıp usb debugging modunu açın. 18 | 19 | 2. Terminalde cihazınızı görüntülemek için `adb devices` 20 | 21 | 3. Projenizi cihazınızda başlatmak için `npx react-native run-android --deviceId=yourDeviceId ` 22 | 23 | 4. Projenizi daha sonra başlatmak için : `adb reverse tcp:8081 tcp:8081` 24 | 25 | İpuçları : 26 | 27 | - Expo local network hatası aldığınızda : `npx expo start --tunnel` 28 | - NPM cache temizleme : `npm cache clean --force` 29 | - NPM cache temizleme doğrulama : `npm cache verify` 30 | - NPM install dediğimizde sürüm çakışması için : `npm install --legacy-peer-deps` 31 | - Android Virtual device listeleme : `emulator -list-avds` 32 | - İstediğimiz device'ı terminalde açmak için : `emulator @1` 33 | - Kendi cihazınızı takıp terminalden çalıştırmak için : 34 | 35 | - `npm run android` 36 | - `react-native run android` 37 | - `npx react-native run-android` 38 | 39 | - React Native Upgrade helper : [Tıkla](https://react-native-community.github.io/upgrade-helper/) 40 | 41 | - NPM sürümlerini görme : `npm outdated` 42 | - NPM içeriklerini güncelleme : `npm update` 43 | - npm upgrade ve update arasındaki farklar : [Tıkla](https://stackoverflow.com/questions/12478679/npm-install-vs-update-whats-the-difference) 44 | - Start dediğimizde npm sıkıtılarını çözmek için : `npm audit fix` 45 | Sorunlar : 46 | 47 | - npx kurulumu için : `sudo npm i -g npx` 48 | - Ruby version seçme : 49 | - `rvm install 2.7.5` 50 | - `rvm list` 51 | - `rvm use 2.7.5` 52 | - RVM indirmek için : [Tıkla](https://rvm.io/rvm/install) 53 | -------------------------------------------------------------------------------- /Week-3.0.md: -------------------------------------------------------------------------------- 1 | ## Path 2 | 3 | ``` 4 | npm i --save-dev babel-plugin-root-import 5 | ``` 6 | 7 | ``` 8 | plugins: [['babel-plugin-root-import', { paths: [{ rootPathPrefix: '~', rootPathSuffix: 'src' }] }]], 9 | ``` 10 | 11 | - Root içerisinde olması gereken jsconfig.json dosyası 12 | 13 | ``` 14 | { 15 | "compilerOptions": { 16 | "target": "ES2021", 17 | "baseUrl": ".", 18 | "module": "commonjs", 19 | "paths": { 20 | "~/*": [ 21 | "./src/*" 22 | ] 23 | } 24 | }, 25 | "exclude": [ 26 | "./node_modules" 27 | ] 28 | } 29 | ``` -------------------------------------------------------------------------------- /pictures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mustafadede/React-Native-Bootcamp-Notes/1c9b5e9d23c9c0322968def2ca4d3bc77d899797/pictures/1.png -------------------------------------------------------------------------------- /pictures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mustafadede/React-Native-Bootcamp-Notes/1c9b5e9d23c9c0322968def2ca4d3bc77d899797/pictures/2.png -------------------------------------------------------------------------------- /pictures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mustafadede/React-Native-Bootcamp-Notes/1c9b5e9d23c9c0322968def2ca4d3bc77d899797/pictures/3.png -------------------------------------------------------------------------------- /pictures/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mustafadede/React-Native-Bootcamp-Notes/1c9b5e9d23c9c0322968def2ca4d3bc77d899797/pictures/4.png -------------------------------------------------------------------------------- /pictures/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mustafadede/React-Native-Bootcamp-Notes/1c9b5e9d23c9c0322968def2ca4d3bc77d899797/pictures/5.png --------------------------------------------------------------------------------