JavaScript Fundamentals & Fetch API

Lecture 2: Introduction to Components and JavaScript

• Lecture introduces components and Javascript and provides a link for further reading.
• Link provided: https://www.reactnative.express/

Overview for today

• The lecture covers components, let and cosntant, state and props, creating a component and events

Imports and Exports

• import keyword loads values from other Javascript files via relative path
• export keyword exposes values for importing

let and const

• Use let and const to declare variables and constants.
• Avoid variable declarations with var unless maintaining legacy code.
• Example: let myVariable = 42,const myConstant = 42

Component API: Handling App Changes and Defining Props and State

• Key question addressed: how to make an app respond to changes like button clicks or network requests

Component API: Props

• Properties passed to the constructor of a component are called props.
• Parents can pass props down to children, but not the other way.
• JSX attributes become parameters called props of the React element.
• Value of an attribute can be any JavaScript expression when wrapped in curly braces.
• Example: bar={baz} which would set the value of bar prop to baz.

Component API: State

• State: An object with details about how a Component should render.
• Name of the object is literally state

Component API: Children

• Any children element should go between the opening View tag, e.g <View> and closing View tag, e.g </View>.

Components

• React components are reusable building blocks to create the user interface.
• Components are the type of the React element.
• Build-in components are View and Text.
• Custom Component can also be defined

Defining Components

• Two ways to define a React component: Function components and Class components.
• Function components take parameters (called props) as input, and return a React element e.g.

function MyComponent({ title }) {
    return (
        <View>
            <Button title={title} color="#1ACDA5" />
        </View>
    );
}

• Class components are a class that extends React.Component and implements a render method

class Mycomponent extends React.Component{
    render(){
        return (<View/>)
    }
}

Defining Function Components

• Function component is a function that returns a React element.

import React from 'react' 
import { Button, View } from 'react-native'
export default function MyComponent() { 
    return ( 
        <View> 
            <Button title="Press me!" color="#1ACDA5" /> 
        </View> 
    )
}

Defining Class Components

• Can create components by subclassing React.Component and overriding the render() method
• Props are accessible as this.props

Composing Components

• Custom Components like MyComponentcan be used as built-in ones like View.
• Use props to communicate between components.

Events

• Some components trigger events/callbacks in response to user input.
• To add an event handler, pass a function as a prop to a React element.

Networking

• Many mobile apps need to load resources from a remote URL.
• Make a POST request to a REST API or fetch static content from another server

Using Fetch

• React Native provides Fetch API for any networking needs.
• Fetch will seem familiar if you have used XMLHttpRequest or other networking APIs before.

Making Requests

• To fetch content from an arbitrary URL, pass the URL
• Example: fetch('https://mywebsite.com/mydata.json');

Using the Fetch API

• Fetch API provides a JavaScript interface for accessing and manipulating parts such as requests and responses.
• Fetch API provides a global fetch() method for fetching resources asynchronously across networks, and it provides an easy, logical way of doing so.
• Fetch is promise-based alternative whereas XMLHttpRequest is callback based.
• Fetch integrates advanced HTTP concepts like CORS and other extensions to HTTP are integrated.

Basic Fetch Request

• The simplest use of fetch() takes one argument path to the resource you want to fetch.
• fetch() does not directly return the JSON response body but instead returns a promise that resolves with a Response object.

async function logMovies() {
  const response = await fetch("http://example.com/movies.json");
  const movies = await response.json();
  console.log(movies);
}

The Response Object

• Response object does not directly contain the actual JSON response body and instead is a representation of the entire HTTP response
• json() method is used to extract the JSON body content from the Response object; it returns a second promise that resolves with the result of parsing the response body text as JSON.

Making an HTTP Request

• Fetch takes an optional second argument to customize the HTTP request.
  • It may specify additional headers or make a POST request.

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  });
});

Handling the Response

• Networking is asynchronous operation so Fetch method will return a Promise to make straightforward to work with.

const getMoviesFromApi = () => {
  return fetch('https://reactnative.dev/movies.json')
    .then(response => response.json())
    .then(json => {
      return json.movies;
    })
    .catch(error => {
      console.error(error);
    });
};

• Also use the async / await syntax in a React Native app
• Remember to catch any errors that may be thrown by fetch

Basic Fetch Request

• Example of using Fetch for web requests

import React, {useEffect, useState} from 'react'; // for managing state
import {ActivityIndicator, FlatList, Text, View} from 'react-native'; // to display our objects for our data 
const App = () => { 
    const [isLoading, setLoading] = useState(true); // initially set to true 
    const [data, setData] = useState([]); // in this way is gonna be an empty array 
    const getMovies = async () => { 
        try { 
            const response = await fetch('https://reactnative.dev/movies.json'); 
            const json = await response.json(); //put the response in Jason format 
            setData(json.movies); // we gonna set our data with json.moviw(movie inside Jason file in the website)
        } catch (error) { // catch the error 
            console.error(error); 
        } finally {     
            setLoading(false); // if the loading is false we can display our flat list 
        } 
    }; 
    useEffect(() => { // to use use effect that hook that we import 
        getMovies(); 
    }, []);

Security

Topics for storing sensitive information, authentication, network security, and tools the you secure your app

Storing Sensitive Info

• Never store sensitive API keys in your app code
  • Tools to use in place: react-native-dotenv and react-native-config
• If there needs to be an API build an orchestration layer using: AWS Lambda or Google Cloud Functions

Storing Sensitive Info (Best Practices)

• Choose the right type of stoage based on sensitively
• Persistent vs Unpersisted

Async Storage

• Community maintained module for React Native asynchronous, uencrypted, key value store
• Not dshared between apps = sandbox environment
• DO use: for persisting non-sensitive data

Secure Storage

• There are pre-existing solutions for Android and iOS platforms because React Native doesn't come bundled with any way of storing sensitive data
  • Keychain Services
  • Secure Shared Preferences

Lecture3A(Lists and TextInputs)

• This lecture will introduce text inputs, as well as covering HOOKS,Scrollview, Flatlists and sectionlist

useState

• useState is the first hook learnt
• It can be used to intialize the state at the tope of your function component
• Example*:

import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");

• We destructute the returned values from useState()
• The first value is used for current states
• The second value is used for updating the state

useEffect

• useEffect is the second hook and lets you synchronize
• useEffect react hook lets your synchronize component from external states
• Syntax : useEffect(setup，dependencies？)
• Call useEffect at the top level of your component to delcare an effect -setup: The function wit your Effect's logic -optional dependencies: The list of all reactive values referenced inside of the setUp cord
• There are a variety of useEffect examples such as; no dependency passed, an empty array, or props or state values

ScrollView

• Native React Component Library
• Has multi-child options
• Can scroll vertically or horizintally
• It scrolls vetically, and to mention horizontal scroll we state horizontal: true

ScrollView Attributes

• showsHorizontalScrollIndicator: Show an indicator for horizontal scrolling
• ScrollEnabled: If we don't want to scroll our content, to define it false
• horizontal: In case if we want to have horizontal scrolling, set the attribulte as true, horizontal = true

Flatlist

• Like a listview, is used to hold items in a list -Provides important features like scolling horinzontally and verically -Designed to handle large datasets that might not fit on the device screen
  • Renders only current displaying items on a screen

Syntax for basic Flatlist

import {Flatlist } from 'react-native';
<FlatList
data={
// data to be rendered in flatlist
}
Separator Component={
// A separator to separate data items
}
renderData= {({ singledata})
// Single data view
}
/>

-Can rendered using 2 props. The flatlist

• Other optional ones include Separator,Header,

RefeshControl

• Provides and indivdual refeshControl
• Implment pull-to-refresh to add the functions use RefreshingControl -when you initiate a pull to refresh gesture refershControl triggers
  • executes new data from the sever to add to on screen

TextInput

• Fundatmental component for inputted text
• Provides conficguaribility for functions; autocorrection,capitalation.

Lecture - Firebase Database

• This lecture will cover local data / over network data + the set up for firebase
• Local vs Over Network Data Table

Is Firebase?

• Firebase is a backend-as-a-service

Firebase Realtime Database

-Syncing with real time for JSON data, a could hosted, NoSQL database

• Stores , syncs with and cloud database that remians -The SDK's share one Realtime Database interace with the newest data on the JSON's every connected client -Follow set up instructions at https://console.firebase.google.com/u/0/

Initialize SDK Into Project

import { initializeApp } from 'firebase/app';
// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
 apiKey: 'api-key',
 authDomain: 'project-id.firebaseapp.com',
 databaseURL: 'https://project-id.firebaseio.com',
 projectId: 'project-id',
 storageBucket: 'project-id.appspot.com',
 messagingSenderId: 'sender-id',
 appId: 'app-id'
};
const app = initializeApp(firebaseConfig);

• Follow set up instructions at https://console.firebase.google.com/u/0/

Realtime Database Refernces

• Reference your JSON data like this users /users: phone-number

API

• Ref imports ref to correspond return database, it contains root of database
• set Writes data to location and overwrites it
  • Ex: set(ref(Db, id)
• remove Imports the process of removing from the database Ex: remove(Ref)

onValue

• Primary way for reading database. Callback will trigger from initial changes.
• Invoke the returned callback to stop receiving updates

Test your knowledge of JavaScript fundamentals including variable declarations, React Native, and the Fetch API. Explore concepts like state in React Native, exporting modules, element attributes, and customizing HTTP requests. Understand the advantages of Fetch API and its integration with HTTP.