From b27dab2fc3ea7f29b866c81fcc167e219dff3027 Mon Sep 17 00:00:00 2001 From: abodthedude25 Date: Mon, 13 Nov 2023 19:40:48 -0500 Subject: [PATCH] Finalize tech guides (#28) * polished React Guide * fixing this issue: https://github.com/techstartucalgary/Docs/issues/18 --------- Signed-off-by: abodthedude25 --- src/SUMMARY.md | 11 + .../README.md | 0 .../images/image1.png | Bin .../images/image2.png | Bin .../images/image3.png | Bin src/guides/React_Native_Guide/README.md | 1133 +++++++++++++++++ src/guides/Web_Dev_Guide/README.md | 2 + src/installation/installfest/README.md | 55 +- 8 files changed, 1176 insertions(+), 25 deletions(-) rename src/guides/{GraphQL_API_Guide => API_Guide}/README.md (100%) rename src/guides/{GraphQL_API_Guide => API_Guide}/images/image1.png (100%) rename src/guides/{GraphQL_API_Guide => API_Guide}/images/image2.png (100%) rename src/guides/{GraphQL_API_Guide => API_Guide}/images/image3.png (100%) create mode 100644 src/guides/React_Native_Guide/README.md diff --git a/src/SUMMARY.md b/src/SUMMARY.md index adfa416..ae54322 100644 --- a/src/SUMMARY.md +++ b/src/SUMMARY.md @@ -53,6 +53,17 @@ --- +# Guides + +- [Django](./guides/Django_Guide/README.md) +- [Git](./guides/Git_Guide/README.md) +- [APIs](./guides/API_Guide/README.md) +- [React](./guides/React_Guide/README.md) +- [React Native](./guides/React_Native_Guide/README.md) +- [Web Dev](./guides/Web_Dev_Guide/README.md) + +--- + [Contributing](./CONTRIBUTING.md) [Credits](./CREDITS.md) diff --git a/src/guides/GraphQL_API_Guide/README.md b/src/guides/API_Guide/README.md similarity index 100% rename from src/guides/GraphQL_API_Guide/README.md rename to src/guides/API_Guide/README.md diff --git a/src/guides/GraphQL_API_Guide/images/image1.png b/src/guides/API_Guide/images/image1.png similarity index 100% rename from src/guides/GraphQL_API_Guide/images/image1.png rename to src/guides/API_Guide/images/image1.png diff --git a/src/guides/GraphQL_API_Guide/images/image2.png b/src/guides/API_Guide/images/image2.png similarity index 100% rename from src/guides/GraphQL_API_Guide/images/image2.png rename to src/guides/API_Guide/images/image2.png diff --git a/src/guides/GraphQL_API_Guide/images/image3.png b/src/guides/API_Guide/images/image3.png similarity index 100% rename from src/guides/GraphQL_API_Guide/images/image3.png rename to src/guides/API_Guide/images/image3.png diff --git a/src/guides/React_Native_Guide/README.md b/src/guides/React_Native_Guide/README.md new file mode 100644 index 0000000..b3333c1 --- /dev/null +++ b/src/guides/React_Native_Guide/README.md @@ -0,0 +1,1133 @@ + +| | +| --- | +# Tech Start's React Native Guide + +Please get aquanted with our [React Guide](../React_Guide/README.md) before you read this page, this is just a reccomendation though. Transitioning from a good background in React to React Native is a relatively smooth process, as many concepts carry over. However, there are specific topics and components you should learn to effectively work with React Native. Here's an outline of the topics you need to cover: + +1. [Video Resources (If you don't Like Reading)](#video-resources) + +2. [React Native Basics Main Concepts](#react-native-main-concepts) + - [Components](#components) + - [Styling](#styling) + - [Layout](#layout) + +3. [Navigation](#navigation) +4. [Platform-Specific Code](#platform-specific) +5. [Accessing Device Features](#device-features) +6. [Native Modules and Bridges](#modules-bridges) +7. [State Management](#state-managment) +8. [Async Storage](#async-storage) +9. [Network Requests](#network-requests) +10. [Advanced Topics](#advanced-topics) + - [Debugging and Troubleshooting](#debugging) + - [Testing](#testing) + - [Performance Optimization](#performance) + - [Publishing and Deployment](#deployment) + +1. [Third-Party Integration](#third-party) + +2. [Security](#security) +3. [conclusion](#conclusion) + + +## Video Resources: +These tutorials should be suffecient to get started but this guide give many more subtle topics that are not covered in these videos. Choose your weapon wisely. +- https://www.youtube.com/playlist?list=PL4cUxeGkcC9ixPU-QkScoRBVxtPPzVjrQ +- https://www.youtube.com/watch?v=0-S5a0eXPoc + +## React Native Basics: + +### Components in React Native + +Components in React Native are similar to those in React, but with some variations and additional elements. Here's a more detailed breakdown: + +#### 1. Core Components: + +React Native provides a set of core components that are similar to HTML elements. These include: +- `View`: The fundamental component for creating UI layouts. +- `Text`: Used for displaying text. +- `Image`: For displaying images. +- `ScrollView`: For scrollable content. +- `TextInput`: For text input fields. +- And many more. + +#### 2. Custom Components: + +You can create your custom components just like in React. These components can be stateless functional components or class components. To create a custom component, use the `View`, `Text`, `Image`, and other core components to compose your UI. + +## Styling in React Native + +Styling in React Native is different from traditional web development. You have various options for styling your components: + +#### a. Inline Styles: + +React Native supports inline styles using JavaScript objects. You can apply styles directly to components, like this: + +```javascript + + Hello, React Native! + +``` + +#### b. Stylesheets: + +Using stylesheets, you can create reusable style definitions: + +```javascript +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: 'lightblue', + }, + text: { + fontSize: 20, + color: 'black', + }, +}); + + + Hello, React Native! + +``` + +#### c. Flexbox Layout: + +React Native relies heavily on flexbox for layout design. It's similar to CSS flexbox but with a few differences. You can use properties like `flex`, `alignItems`, and `justifyContent` to control layout. + +```javascript + + Hello, React Native! + +``` + +## Layout in React Native + +Understanding layout is vital in React Native to create responsive and visually appealing designs. + +1. Flexbox Layout: Flexbox is the primary layout system in React Native. It allows you to design flexible and adaptive layouts. Key properties include: + - `flex`: Determines how space is distributed among children. + - `alignItems`: Aligns items along the cross-axis (vertical alignment). + - `justifyContent`: Aligns items along the main axis (horizontal alignment). + - `flexDirection`: Sets the direction of the main axis. + +2. **Positioning:** You can control the position of elements using properties like `position`, `top`, `left`, `right`, and `bottom`. + +3. **Dimensions:** Set dimensions using `width` and `height`. You can use percentages, fixed values, or dynamic values like `flex`. + + 4. **Responsive Design:** React Native allows you to create responsive designs using `Dimensions` and the `onLayout` event. + + 5. **Orientation Handling:** Handle changes in device orientation by adjusting your layout accordingly. Use the `Dimensions` API to detect changes. + + 6. **Stylesheet Composition:** Compose styles using stylesheets and conditionally apply styles based on screen dimensions or other criteria. + + 7. **Best Practices**: + - Separation of Concerns: Keep styles, logic, and presentation separate for better maintainability and code clarity. + + - Optimizing Styles: Optimize styles to reduce unnecessary re-renders and improve app performance. + +By mastering these concepts related to components, styling, and layout in React Native, you can create rich and visually appealing mobile app user interfaces. Flexbox, in particular, is a powerful tool for creating flexible layouts, and understanding the nuances of styling is crucial for developing a professional-looking app. + + +## Navigation: +Navigation is a crucial aspect of building mobile applications with React Native. It involves creating the structure and flow of your app, allowing users to move between different screens or views. The most common library for implementing navigation in React Native is **React Navigation**. Here's a more detailed overview of navigation in React Native: + +**1. Installing React Navigation:** + - To get started with React Navigation, you need to install it in your project using npm or yarn: + ```bash + npm install @react-navigation/native @react-navigation/stack + ``` + +**2. Stack Navigator:** + - The Stack Navigator is one of the most commonly used navigators in React Navigation. It allows you to create a stack of screens where each screen is placed on top of the previous one. You can navigate between screens by pushing and popping them from the stack. + - To set up a Stack Navigator, you need to import it and define your screens. + ```javascript + import { createStackNavigator } from '@react-navigation/stack'; + + const Stack = createStackNavigator(); + ``` + +**3. Defining Screens:** + - Each screen in your app is defined as a React component. For example, you might have a HomeScreen and a ProfileScreen. + ```javascript + function HomeScreen() { + // Your screen's content + } + + function ProfileScreen() { + // Your screen's content + } + ``` + +**4. Navigating Between Screens:** + - You can navigate between screens using navigation functions provided by React Navigation. For example, to navigate from the HomeScreen to the ProfileScreen: + ```javascript + import { NavigationContainer } from '@react-navigation/native'; + import { createStackNavigator } from '@react-navigation/stack'; + + const Stack = createStackNavigator(); + + function App() { + return ( + + + + + + + ); + } + ``` + In your HomeScreen component, you can use `navigation.navigate('Profile')` to navigate to the ProfileScreen. + +**5. Passing Data Between Screens:** + - You can pass data from one screen to another using parameters. For example, you can send a user's ID to the ProfileScreen: + ```javascript + // In HomeScreen + navigation.navigate('Profile', { userId: 123 }); + + // In ProfileScreen + const userId = route.params.userId; + ``` + +**6. Drawer Navigation and Tab Navigation:** + - React Navigation also supports Drawer and Tab navigations. The Drawer Navigator creates a sidebar menu for navigation, while the Tab Navigator allows you to switch between different tabs within an app. + +**7. Nested Navigation:** + +React Navigation allows you to nest navigators within each other, creating complex navigation structures. This can be useful when you have a tab navigator and want to use a stack navigator within one of the tabs, or if you want to combine different types of navigators for more intricate navigation patterns. + +Here's an example of nesting a Stack Navigator within a Tab Navigator: + +```javascript +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; +import { createStackNavigator } from '@react-navigation/stack'; + +const Tab = createBottomTabNavigator(); +const Stack = createStackNavigator(); + +// Define a tab navigator with a stack navigator in one of the tabs +function TabNavigator() { + return ( + + + + + + ); +} + +// Define a stack navigator to use within a tab +function StackScreen() { + return ( + + + + + ); +} +``` + +**8. Navigation Lifecycle:** + +React Navigation provides navigation lifecycle events that allow you to perform actions when a screen comes into view or goes out of view. Common lifecycle events include: + +- `focus`: Triggered when a screen comes into focus. +- `blur`: Triggered when a screen loses focus. +- `didFocus`: Triggered after the screen has come into focus. + +You can add listeners to these events to perform actions or fetch data when a screen is in focus. + +```javascript +import { useFocusEffect } from '@react-navigation/native'; + +function MyScreen({ navigation }) { + // Add a focus event listener + useFocusEffect( + React.useCallback(() => { + // Perform actions when the screen comes into focus + console.log('Screen is in focus'); + // You can also fetch data or make API calls here + }, []) + ); + + // ... rest of the screen component +} +``` + +**9. Screen Options:** + +You can customize the appearance and behavior of each screen's navigation using the `options` property in your screen component. This allows you to set options like the screen title, header style, and more. + +```javascript +function MyScreen({ route, navigation }) { + // Define screen-specific options + React.useLayoutEffect(() => { + navigation.setOptions({ + title: 'Custom Title', + headerStyle: { + backgroundColor: 'blue', + }, + headerTintColor: 'white', + }); + }, [navigation]); + + // ... rest of the screen component +} +``` + +**10. Navigation Methods:** + +React Navigation provides a set of methods that allow you to navigate between screens programmatically. Common methods include: + +- `navigate`: Navigate to a new screen in the same stack. +- `push`: Push a new screen onto the stack. +- `pop`: Pop the current screen from the stack. +- `goBack`: Navigate back to the previous screen. + +These methods are accessible through the `navigation` prop in your screen components. + +```javascript +function MyScreen({ navigation }) { + return ( + +