Scribd
Upload
2 views

Module 5 & 6 App Dev

The document discusses state management in React, differentiating between local and global state, and introduces hooks like useState, useEffect, and useReducer for managing state in functional components. It also covers the concept of APIs, particularly RESTful APIs, and their communication methods, including JSON as a data format. Additionally, it highlights tools like Fetch API and Axios for making HTTP requests in React Native applications.

Uploaded by

Jojo Bugarin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Module 5 & 6 App Dev

The document discusses state management in React, differentiating between local and global state, and introduces hooks like useState, useEffect, and useReducer for managing state in functional components. It also covers the concept of APIs, particularly RESTful APIs, and their communication methods, including JSON as a data format. Additionally, it highlights tools like Fetch API and Axios for making HTTP requests in React Native applications.

Uploaded by

Jojo Bugarin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

ITC06

Application Development
and Emerging Technologies
state is an object that stores
component-specific data that
can change over time. Unlike
props, which are immutable
and passed from a parent
component, state is managed
within the component itself and
can be updated dynamically,
triggering a re-render.
Local state refers to state
variables that exist within a
specific component and
affect only that
component. It is not shared
with other components
unless explicitly passed as
props.
Global state refers to a state that
is shared across multiple
components, making it accessible
from anywhere in the app.

global state is useful for managing


data that needs to be accessed and
updated by multiple components
• state: The
current state
value.
• setState: A
The useState hook is a built-in
React Hook that allows functional function that
components to manage state. It updates the
enables components to store, state.
update, and track state changes • initialValue: The
without using class components.
initial value of
the state.
Syntax of useState
• Runs after the
component
The useEffect hook is used to renders.
handle side effects in functional • The dependency
components array ([])
• Fetching data from an API controls when
• Updating the UI after a state
useEffect
change
• Managing timers or intervals executes.

Syntax of
useEffect
It is commonly used
when:
• The state involves
multiple sub-
values.
The useReducer hook is an
• The next state
alternative to useState, depends on the
useful for managing previous state.
complex state logic in React • Actions need to be
Native applications. explicitly defined
(like Redux but
inside a
component).
• state: The current state value.
• dispatch(action): Function used to update state.
• reducer(state, action): A function that takes the current state
and an action, then returns the new state.
• initialState: The starting state value
Redux is a state
management library that
helps manage global state
in large applications. It
provides a centralized store,
making it easier to manage
and share data across
multiple components.
Store
Holds the entire application state.

Actions
Describe what should happen

Reducers
Specify how the state should change

Dispatch
Sends actions to update the state
The Context API is a
built-in feature in
React that enables
state sharing across
multiple components
without prop drilling.
ITC06
Application Development
and Emerging Technologies
API (Application Programming
Interface) is a set of rules and
protocols that allows different
software applications to
communicate with each other.

It defines the methods and data


formats that applications can
use to request and exchange
information.
Request and Endpoints Methods Formats Authentication
Response
GET (Retrieve data)
APIs work through APIs typically APIs often require
requests sent by a
Specific URLs POST (Send new data)
authentication
PUT (Update existing exchange
client (e.g., a web or where the API methods like API
mobile app) to a data) data in
server, which then
can be DELETE (Remove
keys, OAuth, or
formats like tokens for
processes the accessed data)
request and sends JSON or XML security.
back a response.
Web APIs
Used for communication over the
internet

Library/API Frameworks
Used within a programming
language

Operating System APIs


Allow apps to interact with OS
features
A RESTful API (or REST API) is an
application programming interface (API)
that follows the principles of
Representational State Transfer (REST),
a software architectural style, to enable
communication between clients and
servers,

commonly using HTTP methods


like GET, POST, PUT, and DELETE.
JSON is a lightweight data
format used for exchanging
data between a client and a
server. It is easy to read,
write, and parse, making it a
widely used format in RESTful
APIs.
JSON consists of key-value pairs, similar
to a JavaScript object.
JSON supports:
• String: "Hello World"
• Number: 123, 45.6
• Boolean: true, false
• Null: null
• Array: [1, 2, 3]
• Object: { "key": "value" }
The Fetch API is a built-in
JavaScript method for making
HTTP requests. It is available in
React Native without requiring
any additional installation.

However, it requires extra


handling for error management,
timeouts, and response parsing.
Axios is a popular JavaScript
library for making HTTP
requests. Unlike Fetch API, Axios
has built-in features for
automatic JSON parsing,
request cancellation, error
handling, and timeouts. It is
widely used in React Native for
handling API calls efficiently.
React Native allows us to
make HTTP requests using
built-in fetch or third-party
libraries like Axios. Here's
how to perform GET and
POST requests efficiently.
Once we fetch JSON
data from an API, we
need to parse and
display it in a React
Native application.
AsyncStorage is a simple,
key-value storage system for
React Native. It allows you to
store small amounts of data
persistently on the device,
even after the app is closed
and reopened.
Small key- Persistent Simple Low
value data across offline read/write
storage sessions storage frequency
user
dark mode caching small
preferences, not frequently
settings, last
authentication API responses updated data
visited screen
tokens

You might also like