fdikmen / Edu-React-Native-PTT.G01

Edu-React-Native-PTT.G01

Edu-React-Native-PTT.G01

Edu-React-Native-PTT.G01

05062023 (Day01)

1. React Native
2. Components
3. export - import - as
4. Folder Structure
5. ES7+ React/Redux/React-Native snippets | React Native Snippet | Prettier - Code formatter
6. Styles
7. View - Text
8. Commands
   Create React Project

npx react-native init [Project-Name]

Start Metro

npm run start

Deploy to Device

npm run ios / npm run android

Exit Terminal

CTRL + C

9. Props
10. Flex - flexDirection
11. State
12. Counter

---

06062023 (Day02)

1. Summary
2. Create First App

• Create JS/JSX App

npx create-react-native-app [Project-Name]

• Create TS/TSX App

npx react-native init [Project-Name]

3. Button (title | onPress | color | disabled)
4. Event Handler/Bind
5. Alert.alert('XXXX') | Alert.prompt('title','msg',func) -> IOS
6. Image (source->{require} | @2x @3x @4x | source->{{uri}})

• resizeMode (contain, cover, center, repeat, stretch )
• style {{width-height}}

7. Touchables => TouchableOpacity & TouchableHighlight & TouchableWithoutFeedback
8. TextInput (onChangeText, value, placeholder, style, secureTextEntry={true}, editable={false}, keyboardType='number-pad', autoCapitalize='characters') IOS Keyboard Show => SHIFT+CMD+K | SHIFT+CTRL+K
9. ScrollView (horizontal={true},pagingEnabled={true} ) -> ListView
10. Dimensions Dimensions.get('window').width | Dimensions.get('window').height; Dimensions.addEventListener('change', onChange); Dimensions.removeEventListener('change', onChange);
11. SafeAreaView
12. Platform Based Components .ios/.android | Platform.OS - (ios - android) | Platform.Version Style Sample=> https://reactnative.dev/docs/platform-specific-code
13. Class Component + Function Comp
14. LifeCycle -> useEffect
15. Hooks -> useState & useEffect
16. Fetch

• https://jsonplaceholder.typicode.com
• https://mockapi.io
• https://www.mockaroo.com

17. Axios

npm i axios

---

BUG FIXED: Address already in use :::8081 (SOLUTION)[https://medium.com/@fdikmen/react-nativede-port-çakışması-sorunu-ve-çözümü-10d2306acaec]

---

07062023 (Day03)

1. Summary
2. Axios
3. Deprecated => npx react-native init LessonProject --platform ios | npx react-native init LessonProject --skip android
4. Dimensions.get('screen').width vs Dimensions.get('window').width
5. Spread Operator (...)
6. Platform.Select
7. ActivityIndicator
8. Custom API => POSTMAN
9. FlatList (data | renderItem | keyExtractor | listEmptyComponent | ListHeaderComponent ) TSX => type User useState[] renderItem keyExtractor
10. PhoneBook (Props, UseState, UseEffect, Axios, SafeAreaView, View, TextInput, FlatList, ActivityIndicator, Text, StyleSheet, Image)

npx react-native init phonebook

• User.ts UserItem.ts (tsrnfs with snippet)
• SafeAreView
• useState, useEffect, users[], axios.get-> https://647f231bc246f166da9026e4.mockapi.io/users

10. Children

---

08062023 (Day04)

1. Summary

2. ErrorBoundary (getDerivedStateFromError | componentDidCatch)

3. ContextAPI

4. Navigation Drawer | Tab | Stack | Nesting

5. Comment => CMD/CTRL + K + C => UnComment => CMD/CTRL + K + U

6. jamfnow => (Local IOS Deploy)

7. Debuging => 1.Native IDE (Xcode & AStudio) 2. Console Msg 3. localhost:8081 4. Terminal(Metro)

---

09062023 (Day05)

1. Summary
2. SafeAreaView X [npm install react-native-screens react-native-safe-area-context] .ts vs .tsx =>JSX
3. Final Project npx react-native init finalProject Clear App.tsx (with tsrnfs)

• Folder Structure [https://medium.com/@fdikmen/react-native-%C3%B6rnek-klas%C3%B6r-yap%C4%B1s%C4%B1-fbc1e131f813]

• npm install @react-navigation/native

• npm install react-native-screens react-native-safe-area-context

• npx pod-install ios => cd ios && pod install

• Import ( import { NavigationContainer } from '@react-navigation/native';)

• npm install @react-navigation/native-stack

• npm install @react-navigation/bottom-tabs

• npm install @react-navigation/drawer

  • npm install react-native-gesture-handler react-native-reanimated
  • import 'react-native-gesture-handler';
  • npx pod-install ios => cd ios && pod install

• npm i axios

• npm install redux

  • npm install react-redux
  • yarn add @reduxjs/toolkit
  • https://medium.com/@fdikmen/redux-toolkit-ile-modern-redux-kullan%C4%B1m%C4%B1-5b59f8055da6

3. Nested Navigation
4. Cutom Icon on Tab Navigation
5. Coding Login Page
6. Redux
7. File Upload Permissons

• android => .../android/app/src/debug/AndroidManifest.xml
• ios => .../ios/finalProject/Info.plist

7. Deploy Steps
8. Final Project Steps