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 (
+
+
+ );
+}
+```
+
+These features offer extensive flexibility in designing complex navigation structures and allow you to respond to navigation events and customize screen-specific options. Understanding these concepts is crucial for building intuitive and feature-rich navigation in your React Native applications.
+
+
+## Platform-Specific Code:
+Platform-specific code in React Native involves writing code that is specific to either iOS or Android platforms. This is sometimes necessary when you want to implement platform-specific features, handle platform-specific behaviors, or optimize your app for a particular platform. Here's a more detailed overview of this topic:
+
+**1. Platform-Specific Components and Styling:**
+
+- React Native allows you to conditionally render components or apply styles based on the platform. For example, you can use the `Platform.OS` property to determine the platform:
+
+ ```javascript
+ import { View, Text } from 'react-native';
+ import { Platform } from 'react-native';
+
+ const MyComponent = () => (
+
+ Common Text
+ {Platform.OS === 'ios' && iOS only Text}
+ {Platform.OS === 'android' && Android only Text}
+
+ );
+ ```
+
+- Similarly, you can conditionally apply styles:
+
+ ```javascript
+ import { StyleSheet } from 'react-native';
+
+ const styles = StyleSheet.create({
+ commonStyle: {
+ // Common styles
+ },
+ iosStyle: {
+ // iOS-specific styles
+ },
+ androidStyle: {
+ // Android-specific styles
+ },
+ });
+
+ const MyComponent = () => (
+
+
+ Platform-specific styling
+
+
+ );
+ ```
+
+**2. Platform-Specific Modules:**
+
+- In some cases, you might need to use platform-specific modules or APIs. React Native provides a way to do this using the `.ios.js` and `.android.js` file extensions. For example, you can have separate implementations for iOS and Android as follows:
+
+ - `MyModule.ios.js` for iOS-specific code.
+ - `MyModule.android.js` for Android-specific code.
+
+- React Native will automatically pick the right file based on the platform. This is useful when dealing with platform-specific features or APIs.
+
+**3. Conditional Logic:**
+
+- You can use conditional logic to handle platform-specific behaviors. For instance, you might need to request permissions differently on iOS and Android or use platform-specific libraries.
+
+ ```javascript
+ import { PermissionsAndroid, Platform } from 'react-native';
+
+ async function requestLocationPermission() {
+ if (Platform.OS === 'android') {
+ // Android-specific logic for requesting permissions
+ try {
+ const granted = await PermissionsAndroid.request(
+ PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+ );
+ if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+ console.log('Location permission granted.');
+ } else {
+ console.log('Location permission denied.');
+ }
+ } catch (err) {
+ console.warn(err);
+ }
+ } else if (Platform.OS === 'ios') {
+ // iOS-specific logic for requesting permissions
+ // ...
+ }
+ }
+ ```
+
+**4. Platform-Specific Libraries:**
+
+- There are times when you need to use platform-specific libraries or modules. React Native allows you to conditionally include these libraries based on the platform. You can use conditional `require` statements to achieve this:
+
+ ```javascript
+ let platformSpecificLibrary;
+ if (Platform.OS === 'ios') {
+ platformSpecificLibrary = require('ios-specific-library');
+ } else {
+ platformSpecificLibrary = require('android-specific-library');
+ }
+ ```
+
+**5. Native Modules:**
+
+- For highly platform-specific tasks, you might need to write native code (Objective-C/Swift for iOS or Java/Kotlin for Android) and create native modules. These native modules can be called from your React Native code, allowing you to perform platform-specific tasks.
+
+Understanding how to handle platform-specific code is important for ensuring your React Native app functions correctly and efficiently on both iOS and Android devices. By using these techniques, you can create a seamless and native-like experience for users on each platform.
+
+## Accessing Device Features:
+Accessing device features in React Native involves interacting with native device functionality, such as the camera, geolocation, sensors, and more. Here, I'll provide more detail on this topic and examples of how to access specific device features:
+
+1. **Camera:**
+ - To access the camera in React Native, you can use the `react-native-camera` library. This library allows you to capture photos and record videos. You can also customize the camera settings, switch between front and back cameras, and apply real-time image processing.
+ - Example:
+ ```javascript
+ import { RNCamera } from 'react-native-camera';
+
+ // In your component
+
+ ```
+
+2. **Geolocation:**
+ - To access the device's location, you can use the built-in `Geolocation` module in React Native. It provides methods for retrieving the user's current location and monitoring changes in real-time.
+ - Example:
+ ```javascript
+ import Geolocation from '@react-native-community/geolocation';
+
+ // Get the current location
+ Geolocation.getCurrentPosition((position) => {
+ console.log(position.coords.latitude, position.coords.longitude);
+ });
+ ```
+
+3. **Sensors:**
+ - React Native provides access to various device sensors, including the accelerometer, gyroscope, and magnetometer, through the `react-native-sensors` library. You can use this library to collect data from these sensors.
+ - Example:
+ ```javascript
+ import { Accelerometer } from 'react-native-sensors';
+
+ const accelerometerObservable = new Accelerometer();
+
+ const subscription = accelerometerObservable.subscribe((data) => {
+ console.log('Acceleration X:', data.x);
+ console.log('Acceleration Y:', data.y);
+ console.log('Acceleration Z:', data.z);
+ });
+ ```
+
+4. **Contacts:**
+ - Accessing device contacts can be achieved using the `react-native-contacts` library. This allows you to read and write contacts to the user's address book.
+ - Example:
+ ```javascript
+ import Contacts from 'react-native-contacts';
+
+ // Fetch all contacts
+ Contacts.getAll()
+ .then((contacts) => {
+ console.log(contacts);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ ```
+
+5. **Device Information:**
+ - React Native provides device information through the `react-native-device-info` library. You can retrieve details like the device's manufacturer, model, unique identifier, and more.
+ - Example:
+ ```javascript
+ import DeviceInfo from 'react-native-device-info';
+
+ // Get device information
+ console.log('Device Model:', DeviceInfo.getModel());
+ console.log('Device ID:', DeviceInfo.getUniqueId());
+ ```
+
+6. **Bluetooth and NFC:**
+ - To work with Bluetooth and NFC, you can use libraries like `react-native-ble-manager` and `react-native-nfc-manager`. These libraries enable communication with nearby devices and NFC tags.
+ - Examples can get quite involved, as working with Bluetooth and NFC often requires handling various events and connections. You can refer to the library [documentation](https://github.com/innoveit/react-native-ble-manager) for detailed examples.
+
+
+When accessing device features in React Native, it's essential to follow the documentation and best practices for the specific libraries and modules you're using. Additionally, consider handling permissions appropriately, especially for features like camera, geolocation, and contacts, which may require user consent.
+
+## Native Modules and Bridges:
+
+Native modules and bridges in React Native are a way to access native code (Java or Objective-C) from JavaScript and vice versa. They are essential for tasks that require platform-specific functionality or performance optimization. Let's dive into more detail and provide examples of how to create and use native modules and bridges in React Native.
+
+### Native Modules
+
+Native modules allow you to expose native code to JavaScript in a structured manner. Here's how to create a simple native module:
+
+1. **Create a Native Module for iOS (Objective-C):**
+
+ Let's say you want to create a native module that shows a native iOS alert.
+
+ ```objective-c
+ // AlertModule.h
+ #import
+
+ @interface AlertModule : NSObject
+ @end
+ ```
+
+ ```objective-c
+ // AlertModule.m
+ #import "AlertModule.h"
+ #import
+
+ @implementation AlertModule
+
+ RCT_EXPORT_MODULE();
+
+ RCT_EXPORT_METHOD(showAlert:(NSString *)title message:(NSString *)message)
+ {
+ UIAlertController *alert = [UIAlertController
+ alertControllerWithTitle:title
+ message:message
+ preferredStyle:UIAlertControllerStyleAlert];
+
+ UIAlertAction *ok = [UIAlertAction
+ actionWithTitle:@"OK"
+ style:UIAlertActionStyleDefault
+ handler:nil];
+
+ [alert addAction:ok];
+
+ UIViewController *rootViewController = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
+ [rootViewController presentViewController:alert animated:YES completion:nil];
+ }
+
+ @end
+ ```
+
+2. **Create a Native Module for Android (Java):**
+
+ To do the same thing in Android, create a native module to show an alert dialog.
+
+ ```java
+ // AlertModule.java
+ import com.facebook.react.bridge.ReactApplicationContext;
+ import com.facebook.react.bridge.ReactContextBaseJavaModule;
+ import com.facebook.react.bridge.ReactMethod;
+
+ public class AlertModule extends ReactContextBaseJavaModule {
+ public AlertModule(ReactApplicationContext reactContext) {
+ super(reactContext);
+ }
+
+ @Override
+ public String getName() {
+ return "AlertModule";
+ }
+
+ @ReactMethod
+ public void showAlert(String title, String message) {
+ AlertDialog.Builder builder = new AlertDialog.Builder(getCurrentActivity());
+ builder.setTitle(title);
+ builder.setMessage(message);
+ builder.setPositiveButton("OK", null);
+ builder.show();
+ }
+ }
+ ```
+
+3. **Using Native Modules in JavaScript:**
+
+ In your JavaScript code, you can now use the native module you created:
+
+ ```javascript
+ import { NativeModules } from 'react-native';
+
+ // For iOS
+ NativeModules.AlertModule.showAlert('Hello', 'This is an alert!');
+
+ // For Android
+ NativeModules.AlertModule.showAlert('Hello', 'This is an alert!');
+ ```
+
+### Native Bridges
+
+Bridges in React Native are responsible for connecting JavaScript and native code. React Native's native modules use bridges to enable communication between the two sides. In the examples above, the React Native framework handles the bridge for you.
+
+Behind the scenes, React Native's bridge system serializes and deserializes data and manages the communication between JavaScript and native modules. It abstracts away many of the complexities, making it easier for developers to work with native modules in a JavaScript-friendly way.
+
+By using native modules and bridges, you can incorporate platform-specific functionality into your React Native app while maintaining a unified JavaScript codebase. This is particularly helpful when you need to integrate with device-specific features, third-party libraries, or optimize performance.
+
+ Here are some tutorials that dive super in depth for creating a calender native module for [Android](https://reactnative.dev/docs/native-modules-android) or [IOS](https://reactnative.dev/docs/native-modules-ios).
+
+## State Management:
+let's dive into more detail on state management in React Native and provide examples. State management is crucial for handling the data and UI state in your mobile applications. There are various options for managing state in React Native, similar to React for the web, including React's built-in state management, the Context API, and external libraries like Redux or MobX. Below, we'll cover these options and provide examples for better understanding:
+
+### 1. **React's Built-in State Management:**
+
+React Native, like React, allows you to manage state locally within a component using the `useState` hook.
+
+**Example:**
+
+```jsx
+import React, { useState } from 'react';
+import { View, Text, Button } from 'react-native';
+
+function Counter() {
+ const [count, setCount] = useState(0);
+
+ const increment = () => setCount(count + 1);
+ const decrement = () => setCount(count - 1);
+
+ return (
+
+ Count: {count}
+
+
+
+ );
+}
+```
+
+In this example, the `useState` hook is used to manage the `count` state variable within the `Counter` component.
+
+### 2. **Context API:**
+
+The Context API allows you to manage global state that can be accessed by multiple components without having to pass props down through the component tree.
+
+**Example:**
+
+```jsx
+import React, { createContext, useContext, useState } from 'react';
+import { View, Text, Button } from 'react-native';
+
+const CountContext = createContext();
+
+function Counter() {
+ const [count, setCount] = useContext(CountContext);
+
+ const increment = () => setCount(count + 1);
+ const decrement = () => setCount(count - 1);
+
+ return (
+
+ Count: {count}
+
+
+
+ );
+}
+
+function App() {
+ const [count, setCount] = useState(0);
+
+ return (
+
+
+ My App
+
+
+
+ );
+}
+```
+
+In this example, the `CountContext` is created and used to share the `count` state between the `Counter` component and the `App` component.
+
+### 3. **Redux:**
+
+Redux is a popular external state management library for React Native. It provides a central store for managing application state and allows for predictable state updates using actions and reducers.
+
+**Example:**
+
+To use Redux in React Native, you need to set up a store, actions, and reducers. Here's a simplified example:
+
+```javascript
+// Define actions
+const increment = () => ({ type: 'INCREMENT' });
+const decrement = () => ({ type: 'DECREMENT' });
+
+// Define a reducer
+const counterReducer = (state = 0, action) => {
+ switch (action.type) {
+ case 'INCREMENT':
+ return state + 1;
+ case 'DECREMENT':
+ return state - 1;
+ default:
+ return state;
+ }
+};
+
+// Create the Redux store
+import { createStore } from 'redux';
+const store = createStore(counterReducer);
+
+// Connect components to the store
+import { connect } from 'react-redux';
+
+function Counter({ count, increment, decrement }) {
+ return (
+
+ Count: {count}
+
+
+
+ );
+}
+
+const mapStateToProps = (state) => ({ count: state });
+const mapDispatchToProps = { increment, decrement };
+
+const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);
+```
+
+This example demonstrates a basic setup of Redux in React Native. It involves defining actions, a reducer, creating the store, and connecting a component to the store.
+
+The choice of state management in your React Native project depends on the complexity and scalability of your application. React's built-in state management and the Context API are great for simple state needs, while Redux or MobX are more suitable for larger, complex applications with extensive state management requirements.
+
+## Async Storage:
+AsyncStorage is a crucial concept in React Native, allowing you to store data locally on the user's device. It's similar to the `localStorage` in web development but tailored for mobile applications. AsyncStorage is often used to store user preferences, app settings, or any data that needs to persist across app sessions. Here, I'll dive into more detail about AsyncStorage and provide some examples.
+
+### Using AsyncStorage in React Native
+
+1. **Importing AsyncStorage:**
+ To use AsyncStorage, you need to import it from 'react-native':
+
+ ```javascript
+ import { AsyncStorage } from 'react-native';
+ ```
+
+2. **Storing Data:**
+ You can store data in AsyncStorage by using the `setItem` method. Here's an example of how to store a simple string:
+
+ ```javascript
+ AsyncStorage.setItem('username', 'JohnDoe')
+ .then(() => {
+ console.log('Data stored successfully');
+ })
+ .catch((error) => {
+ console.error('Error storing data: ', error);
+ });
+ ```
+
+3. **Retrieving Data:**
+ To retrieve data, you can use the `getItem` method:
+
+ ```javascript
+ AsyncStorage.getItem('username')
+ .then((value) => {
+ if (value !== null) {
+ console.log('Retrieved data: ', value);
+ } else {
+ console.log('Data not found');
+ }
+ })
+ .catch((error) => {
+ console.error('Error retrieving data: ', error);
+ });
+ ```
+
+4. **Updating Data:**
+ You can update stored data by simply setting a new value for the same key:
+
+ ```javascript
+ AsyncStorage.setItem('username', 'NewUsername')
+ .then(() => {
+ console.log('Data updated successfully');
+ })
+ .catch((error) => {
+ console.error('Error updating data: ', error);
+ });
+ ```
+
+5. **Deleting Data:**
+ To remove data from AsyncStorage, use the `removeItem` method:
+
+ ```javascript
+ AsyncStorage.removeItem('username')
+ .then(() => {
+ console.log('Data removed successfully');
+ })
+ .catch((error) => {
+ console.error('Error removing data: ', error);
+ });
+ ```
+
+6. **Handling Errors:**
+ It's essential to handle errors, as reading from or writing to AsyncStorage may fail due to various reasons, such as storage limitations or permissions. Always use `try...catch` or promise-based error handling to ensure your app gracefully handles errors.
+
+7. **Working with JSON Data:**
+ AsyncStorage stores data as strings, so if you need to store complex data structures like objects or arrays, you should serialize them to JSON when storing and parse them when retrieving:
+
+ ```javascript
+ const user = {
+ name: 'John Doe',
+ email: 'john@example.com',
+ };
+
+ AsyncStorage.setItem('user', JSON.stringify(user))
+ .then(() => {
+ console.log('User data stored successfully');
+ })
+ .catch((error) => {
+ console.error('Error storing user data: ', error);
+ });
+
+ // Retrieving and parsing the user data
+ AsyncStorage.getItem('user')
+ .then((value) => {
+ if (value !== null) {
+ const userData = JSON.parse(value);
+ console.log('Retrieved user data: ', userData);
+ } else {
+ console.log('User data not found');
+ }
+ })
+ .catch((error) => {
+ console.error('Error retrieving user data: ', error);
+ });
+ ```
+
+Remember that AsyncStorage is a simple key-value store and should be used for relatively small amounts of data. For larger datasets, consider using a more robust storage solution or a database. Additionally, be mindful of security considerations when storing sensitive information and ensure that you have the necessary permissions to access AsyncStorage on the user's device.
+
+## Network Requests:
+Making network requests in React Native is a common task when you need to fetch data from an API or send data to a server. You can use libraries like Axios or the built-in `fetch` API to perform these requests. Here, I'll dive into more detail about how to make network requests in React Native using both Axios and `fetch`, and provide examples for each:
+
+### Using Axios
+
+[Axios](https://github.com/axios/axios) is a popular library for making HTTP requests. You can use it in your React Native project by following these steps:
+
+1. **Installation**:
+
+ First, you need to install Axios in your project. You can do this with npm or yarn:
+
+ ```bash
+ npm install axios
+ # or
+ yarn add axios
+ ```
+
+2. **Making a GET Request**:
+
+ Here's an example of making a GET request to a remote API using Axios:
+
+ ```javascript
+ import axios from 'axios';
+
+ const fetchUserData = async () => {
+ try {
+ const response = await axios.get('https://api.example.com/users');
+ const userData = response.data;
+ console.log(userData);
+ } catch (error) {
+ console.error('Error fetching user data:', error);
+ }
+ };
+
+ // Call the function to fetch user data
+ fetchUserData();
+ ```
+
+3. **Making a POST Request**:
+
+ To make a POST request with Axios, you can do the following:
+
+ ```javascript
+ import axios from 'axios';
+
+ const sendDataToServer = async (data) => {
+ try {
+ const response = await axios.post('https://api.example.com/postData', data);
+ console.log('Data sent successfully:', response.data);
+ } catch (error) {
+ console.error('Error sending data:', error);
+ }
+ };
+
+ const dataToSend = {
+ key1: 'value1',
+ key2: 'value2',
+ };
+
+ // Call the function to send data to the server
+ sendDataToServer(dataToSend);
+ ```
+
+### Using the `fetch` API
+
+The `fetch` API is a built-in way to make network requests in JavaScript and is available in React Native:
+
+1. **Making a GET Request**:
+
+ Here's an example of making a GET request using the `fetch` API:
+
+ ```javascript
+ const fetchUserData = () => {
+ fetch('https://api.example.com/users')
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .then((userData) => {
+ console.log(userData);
+ })
+ .catch((error) => {
+ console.error('Error fetching user data:', error);
+ });
+ };
+
+ // Call the function to fetch user data
+ fetchUserData();
+ ```
+
+2. **Making a POST Request**:
+
+ Making a POST request with `fetch` involves a similar structure:
+
+ ```javascript
+ const sendDataToServer = (data) => {
+ fetch('https://api.example.com/postData', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error('Network response was not ok');
+ }
+ return response.json();
+ })
+ .then((responseData) => {
+ console.log('Data sent successfully:', responseData);
+ })
+ .catch((error) => {
+ console.error('Error sending data:', error);
+ });
+ };
+
+ const dataToSend = {
+ key1: 'value1',
+ key2: 'value2',
+ };
+
+ // Call the function to send data to the server
+ sendDataToServer(dataToSend);
+ ```
+
+Both Axios and the `fetch` API allow you to make various types of requests (GET, POST, PUT, DELETE, etc.) and handle responses. The choice between the two often comes down to personal preference and specific project requirements. Axios is a popular choice due to its simplicity and ease of use for handling requests and responses.
+
+# Advanced Topics
+
+## Debugging and Troubleshooting:
+- Familiarize yourself with debugging tools, error messages, and common troubleshooting techniques specific to React Native.
+- RESOURCE: https://reactnative.dev/docs/debugging
+
+## Testing:
+- Learn how to write unit tests and integration tests for your React Native components using testing frameworks like Jest.
+- RESOURCE: https://reactnative.dev/docs/testing-overview
+
+## Performance Optimization:
+ - Explore techniques for optimizing the performance of your app, including reducing renders and optimizing images.
+ - RESOURCE: https://reactnative.dev/docs/performance
+
+## Publishing and Deployment:
+- Understand how to build, sign, and deploy your app to the Google Play Store and Apple App Store.
+- IOS RESOURCE: https://reactnative.dev/docs/publishing-to-app-store
+- ANDROID RESOURCE: https://reactnative.dev/docs/signed-apk-android
+
+
+# Third-Party Integrations:
+Third-party integrations in React Native are crucial for adding functionality and features to your app without having to build everything from scratch. Here, I'll provide more detail on some common third-party integrations in React Native along with links to the relevant libraries:
+
+1. **Push Notifications:**
+ - Implementing push notifications is essential for engaging users. Libraries like `react-native-firebase` or `react-native-push-notification` provide the tools to send and receive push notifications on both iOS and Android.
+ - [react-native-firebase](https://rnfirebase.io/)
+ - [react-native-push-notification](https://github.com/zo0r/react-native-push-notification)
+
+2. **Analytics:**
+ - Tracking user behavior and app performance is essential. Libraries like `react-native-firebase/analytics`, `react-native-google-analytics`, and `react-native-flurry-analytics` enable integration with analytics platforms like Firebase Analytics, Google Analytics, and Flurry.
+ - [react-native-firebase/analytics](https://rnfirebase.io/analytics/usage)
+ - [react-native-google-analytics](https://github.com/idehub/react-native-google-analytics)
+ - [react-native-flurry-analytics](https://github.com/juspay/react-native-flurry-analytics)
+
+3. **Maps and Location:**
+ - If your app requires mapping or location-based features, libraries like `react-native-maps` and `react-native-geolocation-service` provide access to Google Maps and geolocation services.
+ - [react-native-maps](https://github.com/react-native-maps/react-native-maps)
+ - [react-native-geolocation-service](https://github.com/Agontuk/react-native-geolocation-service)
+
+4. **Camera and Image Capture:**
+ - For camera and image-related functionality, libraries like `react-native-camera` and `react-native-image-picker` allow you to access the device's camera and image gallery.
+ - [react-native-camera](https://github.com/react-native-camera/react-native-camera)
+ - [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker)
+
+5. **Social Media Sharing:**
+ - To enable users to share content on social media platforms, libraries like `react-native-share` provide sharing functionality with support for various services.
+ - [react-native-share](https://github.com/react-native-share/react-native-share)
+
+6. **Payment Gateways:**
+ - If your app involves in-app purchases or payment processing, libraries like `react-native-in-app-utils` or specific SDKs for payment gateways like Stripe can be integrated.
+ - [react-native-in-app-utils](https://github.com/chirag04/react-native-in-app-utils)
+ - [Stripe for React Native](https://stripe.com/docs/stripe-react-native)
+
+7. **Authentication:**
+ - Implementing user authentication is a common requirement. Libraries like `react-native-firebase/auth` and `react-native-auth0` offer easy integration with Firebase Authentication and Auth0, respectively.
+ - [react-native-firebase/auth](https://rnfirebase.io/auth/usage)
+ - [react-native-auth0](https://github.com/auth0/react-native-auth0)
+
+8. **In-App Messaging:**
+ - If your app needs real-time chat or messaging features, libraries like `react-native-gifted-chat` can be used to quickly add chat functionality.
+ - [react-native-gifted-chat](https://github.com/FaridSafi/react-native-gifted-chat)
+
+9. **Audio and Video Playback:**
+ - Libraries like `react-native-video` and `react-native-sound` provide support for playing audio and video files within your app.
+ - [react-native-video](https://github.com/react-native-video/react-native-video)
+ - [react-native-sound](https://github.com/zmxv/react-native-sound)
+
+10. **AR/VR Integration:**
+ - If your app involves augmented reality (AR) or virtual reality (VR), libraries like `react-native-arkit` or `react-viro` offer AR and VR capabilities.
+ - [react-native-arkit](https://github.com/react-native-ar/react-native-arkit)
+ - [ViroReact (formerly react-viro)](https://github.com/viromedia/viro)
+
+When integrating third-party libraries, make sure to check their documentation for installation and usage instructions, as well as any specific requirements or configurations. Carefully consider your app's requirements and select the libraries that best meet your needs while ensuring they are well-maintained and compatible with your React Native version.
+
+## Security Best Practices:
+
+Security is a critical aspect of any mobile app, including those built with React Native. Here are some security best practices in React Native, along with examples:
+
+1. **Secure Storage:**
+ - Use secure storage mechanisms to store sensitive data, such as user authentication tokens and API keys. Avoid storing them in plain text or insecure locations.
+
+ **Example:**
+
+ ```javascript
+ // Insecure storage
+ const apiKey = 'my-insecure-api-key';
+
+ // Secure storage using a library like react-native-secure-storage
+ import SecureStorage from 'react-native-secure-storage';
+
+ SecureStorage.set('api_key', 'my-secure-api-key');
+ ```
+
+2. **API Key Management:**
+ - Avoid hardcoding API keys directly in your source code. Instead, use environment variables or configuration files that are excluded from source control.
+
+ **Example:**
+
+ ```javascript
+ // Insecure API key storage
+ const apiKey = 'my-insecure-api-key';
+
+ // Secure API key storage using environment variables
+ const apiKey = process.env.REACT_NATIVE_API_KEY;
+ ```
+
+3. **Authentication and Authorization:**
+ - Implement secure authentication and authorization mechanisms to protect user data and control access to sensitive parts of your app.
+
+ **Example:**
+
+ ```javascript
+ // Use a secure authentication library like Firebase Authentication or Auth0
+ import { Firebase } from 'react-native-firebase';
+
+ // Ensure that only authenticated users can access certain features
+ if (user.isAuthenticated) {
+ // Display sensitive data or allow certain actions
+ }
+ ```
+
+4. **Network Security:**
+ - Use HTTPS for all network requests to encrypt data in transit. Avoid sending sensitive information via unencrypted HTTP.
+
+ **Example:**
+
+ ```javascript
+ // Use HTTPS for network requests
+ fetch('https://api.example.com/data', {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Bearer ' + user.token,
+ },
+ })
+ ```
+
+5. **Code Obfuscation:**
+ - Obfuscate your JavaScript code to make it more difficult for malicious actors to reverse engineer your app. Obfuscation is typically done using third-party tools, and the specific steps and tools used may vary depending on the project.
+
+6. **Secure Communication with Native Modules:**
+ - When communicating with native modules, validate and sanitize data to prevent injection attacks.
+
+ **Example:**
+
+ ```javascript
+ import { NativeModules } from 'react-native';
+
+ // Ensure the data passed to a native module is properly sanitized
+ const userInput = 'user-input-data';
+ NativeModules.MyModule.someMethod(validateInput(userInput));
+ ```
+
+7. **Input Validation:**
+ - Validate user input to prevent common security issues like SQL injection and cross-site scripting (XSS).
+
+ **Example:**
+
+ ```javascript
+ // Validate and sanitize user input to prevent XSS
+ const userInput = '';
+ const sanitizedInput = sanitizeInput(userInput);
+ ```
+
+8. **Error Handling:**
+ - Implement proper error handling to prevent sensitive information from being exposed to users in error messages.
+
+ **Example:**
+
+ ```javascript
+ // Handle errors gracefully and do not expose sensitive information to the user
+ try {
+ // Code that may throw an error
+ } catch (error) {
+ console.error('An error occurred. Please try again later.');
+ }
+ ```
+
+These are essential security best practices for React Native apps, but it's important to note that the specific implementation details may vary depending on your project and the libraries you use. Regularly staying informed about security developments in the React Native ecosystem and taking proactive measures to address vulnerabilities will help ensure the security of your app.
+
+
+# Conclusion:
+This guide was meant to be a starting/middle point for learning React Native across its many topics, ranging from front-end to back-end(mainly backe-end because that is what really matters, am I right!). Jokes aside, as you progress through these topics, you'll find that your React experience serves as a strong foundation for learning React Native. React Native allows you to leverage your JavaScript skills to build mobile apps for both iOS and Android, making it a valuable addition to your toolkit.
\ No newline at end of file
diff --git a/src/guides/Web_Dev_Guide/README.md b/src/guides/Web_Dev_Guide/README.md
index 0cbb978..5f2a535 100644
--- a/src/guides/Web_Dev_Guide/README.md
+++ b/src/guides/Web_Dev_Guide/README.md
@@ -157,6 +157,8 @@ TypeScript Basics by JavaBrains: (also includes small project incl. API usage)
# Part 4 - React
+NOTE: here is a more indepth [React Guide](../React_Guide/README.md), the better version!!
+
HTML, CSS, and JS are great and all, but what if you want to make a modern, reactive website? Several frontend frameworks exist to empower dynamic, reactive sites, and as of 2021 React is by far the most popular among them. It's a great way to get an introduction into the world of web frameworks and it's a fun tool to use.
diff --git a/src/installation/installfest/README.md b/src/installation/installfest/README.md
index c67bd9c..76336c1 100644
--- a/src/installation/installfest/README.md
+++ b/src/installation/installfest/README.md
@@ -8,22 +8,27 @@ We understand that setting up your computer for development can be a daunting ta
This guide will help you install all the tools you need to start coding. It will also help you configure your computer so that you can easily switch between different versions of Node.js and Python. Your don't need to install everything in this guide, only the tools you need for your project. If you are not sure what tools you need, ask your project lead or one of the exec members.
#### Table of Contents
- - [Windows Users](#windows-users)
- - [Installing Homebrew](#installing-homebrew)
- - [Installing Git](#installing-git)
- - [Installing bash-completion](#installing-bash-completion)
- - [Installing Node](#installing-node)
- - [Installing Nvm](#installing-nvm)
- - [Installing Python](#installing-python)
- - [Installing Pip](#installing-pip)
- - [Installing Pyenv](#installing-pyenv)
- - [Downloading Xcode](#downloading-xcode)
- - [That's it!](#thats-it)
-
-#### Windows Users
+- [Installfest: From zero to hero](#installfest-from-zero-to-hero)
+ - [Introduction](#introduction)
+ - [Table of Contents](#table-of-contents)
+ - [Windows Users](#windows-users)
+ - [Installing Homebrew](#installing-homebrew)
+ - [Installing VSCode: MacOS](#installing-vscode-macos)
+ - [Installing VSCode: Windows WSFL2](#installing-vscode-windows-wsfl2)
+ - [Installing Git](#installing-git)
+ - [Installing bash-completion](#installing-bash-completion)
+ - [Installing Node](#installing-node)
+ - [Installing Nvm](#installing-nvm)
+ - [Installing Python](#installing-python)
+ - [Installing Pip](#installing-pip)
+ - [Installing Pyenv](#installing-pyenv)
+ - [Downloading Xcode](#downloading-xcode)
+ - [That's it!](#thats-it)
+
+#### Windows Users
If you are using Windows, we recommend that you install WSL2 and Ubuntu as your development environment. You can find instructions on how to do so here: [WSL2 Installation](https://docs.techstartucalgary.com/installation/wsl2/index.html) Once you have installed WSL2 and Ubuntu, you can continue with this guide.
-#### Installing Homebrew
+#### Installing Homebrew
Homebrew is a package manager for macOS (or Linux) that allows you to easily install and manage software packages and libraries. It simplifies the installation process by automating the installation of dependencies and providing a consistent interface for installing software. To install Homebrew, run the following command:
```bash
@@ -52,7 +57,7 @@ Homebrew 3.2.0
Homebrew/homebrew-core (git revision 3b6; last commit 2021-07-26)
```
-#### Installing VSCode: MacOS
+#### Installing VSCode: MacOS
Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. To install VSCode, run the following command:
```bash
@@ -65,7 +70,7 @@ To check if VSCode is installed, run the following command:
code --version
```
-#### Installing VSCode: Windows WSFL2
+#### Installing VSCode: Windows WSFL2
To install VSCode, download it from the following link: [VSCode Installer](https://code.visualstudio.com/) Once downloaded, open VScode in Windows.
@@ -81,7 +86,7 @@ To check if WSL2 is connected with VSCode, go to the WSFL2 terminal and run the
code .
```
-#### Installing Git
+#### Installing Git
Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. It is the most widely used modern version control system in the world today. To start using Git, you need to run the following command:
```bash
@@ -122,7 +127,7 @@ to check if it worked:
gh auth status
```
-#### Installing bash-completion
+#### Installing bash-completion
bash-completion is a collection of shell functions that take advantage of the programmable completion feature of bash. It provides completions for various commands, including git, npm, and others. To install bash-completion, run the following command:
```bash
@@ -143,7 +148,7 @@ if [ -f $(brew --prefix)/etc/bash_completion ]; then
fi
```
-#### Installing Node
+#### Installing Node
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. It allows developers to use JavaScript to write command-line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. To install Node, run the following command:
```bash
@@ -156,7 +161,7 @@ To check if Node is installed, run the following command:
node --version
```
-#### Installing Nvm
+#### Installing Nvm
nvm stands for Node Version Manager. It is a tool that allows you to easily install and manage multiple versions of Node.js on a single machine. This is useful for developers who need to work with different versions of Node.js for different projects. To install nvm, run the following command:
```bash
@@ -208,7 +213,7 @@ nvm ls-remote
make sure you team is using the same version of node for consistency and to avoid errors.
-#### Installing Python
+#### Installing Python
Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991, Python's design philosophy emphasizes code readability with its notable use of significant whitespace. To install Python, run the following command:
```bash
@@ -221,7 +226,7 @@ By default, Homebrew installs Python 3.x. To check if Python is installed, run t
python3 --version
```
-#### Installing Pip
+#### Installing Pip
pip is a package management system used to install and manage software packages written in Python. Many packages can be found in the Python Package Index (PyPI).
```bash
@@ -234,7 +239,7 @@ To check if pip is installed, run the following command:
pip --version
```
-#### Installing Pyenv
+#### Installing Pyenv
pyenv is a simple yet powerful tool that allows you to easily install and manage multiple versions of Python on a single machine. This is useful for developers who need to work with different versions of Python for different projects. Using pyenv will also allow you to group your project dependencies into a single virtual environments, which will make dependency management much easier. To install pyenv, run the following command:
```bash
@@ -249,10 +254,10 @@ pyenv --version
pyenv will be useful for those who are working with Django or Flask.
-#### Downloading Xcode
+#### Downloading Xcode
Recommended for those who are working with React Native. Xcode is an integrated development environment (IDE) for macOS containing a suite of software development tools developed by Apple for developing software for macOS, iOS, iPadOS, watchOS, and tvOS. To download Xcode, go to the App Store and search for [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12).
-#### That's it!
+#### That's it!
Now that you have installed all the tools you need, you are ready to start coding like a PRO. If you have any questions, feel free to ask your project lead or one of the exec members.
![Typing Kermit](./typing-kermit.gif)
\ No newline at end of file