Scribd
Upload
7 views

Module 2 App Dev

The document provides an overview of React Native components, including core, custom, and community components, which serve as the building blocks for applications. It explains JSX syntax, the Virtual DOM, state management, and the use of props for data passing between components. Key features such as the use of hooks, lifecycle methods, and styling in JSX are also highlighted.

Uploaded by

Jojo Bugarin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Module 2 App Dev

The document provides an overview of React Native components, including core, custom, and community components, which serve as the building blocks for applications. It explains JSX syntax, the Virtual DOM, state management, and the use of props for data passing between components. Key features such as the use of hooks, lifecycle methods, and styling in JSX are also highlighted.

Uploaded by

Jojo Bugarin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

MODULE 2

React Native components are


the building blocks of a React
Native application. They
define the UI and behavior of
the app, similar to how HTML
elements work in a web
application.
Core components are the fundamental,
built-in components provided by the
React Native framework itself. They
are the most basic units of UI in a
React Native application.
View ScrollView:
The basic container for all other
UI elements. Like a <div> in Enables scrolling for
web development, it controls content that exceeds
layout (position, size).
the screen height.

Text: TextInput:
Displays text, similar to Allows text input, like an
<p> or <span>. Style <input> field. Handle input
font, size, color, etc. events and store text.

Image: Button:
Shows images from local A clickable button.
files or URLs. Control Define its action when
size and display. pressed.
Custom components are components
that you create to encapsulate
specific UI logic and presentation.
They are reusable pieces of UI that you
define within your application.
Community components are
components that are created and
shared by the React Native
developer community. They are
often distributed as npm packages.
These are essentially JavaScript
functions that accept props (properties)
as arguments and return JSX to describe
the UI. They are stateless (initially, but
this changed with Hooks) and do not
have access to lifecycle methods.
These are JavaScript classes that
extend the React.Component class.
They can hold and manage their own
state, have access to lifecycle, and
receive props from parent
components.
JSX stands for JavaScript
XML. It's a syntax extension
that allows you to write
HTML-like code within your
JavaScript.
A JSX expression must have a
single top-level element. If you
want to return multiple elements,
you must wrap them in a single
parent element, like a View in
React Native.
In JSX, HTML attributes are
written in camelCase.
You can embed This allows you to
JavaScript dynamically generate
content, access
expressions
variables, and
within JSX using perform calculations
curly braces {}. within your JSX.
JSX itself is an expression that
evaluates to a JavaScript object.
This means you can assign JSX to
variables, pass it as arguments to
functions, and return it from
functions.
You can add comments within
JSX using {/* comment */}.
JSX is case-sensitive. <div> is different
from <Div>. In React Native, you'll be some HTML attributes have
using components, which start with a different names in JSX (e.g.,
capital letter (e.g., View, Text, Image). className instead of class).

In JSX, elements must be either closed with The style attribute in JSX accepts a
a closing tag (e.g., <div></div>) or self- JavaScript object containing CSS-like
closing (e.g., <Image source={...} />). Self- styles. This is different from HTML's style
closing tags must have a forward slash at attribute, which accepts a string of CSS
the end. rules.
The Virtual DOM is a lightweight in-memory
representation of the actual DOM (Document Object
Model) of the mobile app.
When your React Native components render or update,
React Native first updates the Virtual DOM. Then, React
Native compares the updated Virtual DOM with the
previous version. This process is called "diffing." React
Native identifies the minimal changes required in the
actual DOM and only updates those specific parts. This
is called "patching."
State is a JavaScript object that holds
data relevant to a component. It's
internal to the component and can
change over time. When the state of a
component changes, React Native
automatically re-renders the component
to reflect those changes in the UI.
In functional components 1.The current state
(the preferred way to write
value.
components in modern
React), you manage state 2.A function to
using the useState Hook. update the state
useState is a function that
value.
returns an array containing
two elements:
• Props (short for properties) are a way to pass
data from a parent component to a child
component.
• They are like arguments passed to a function.
• Props are read-only from the child component's
perspective; the child component cannot
directly modify the props it receives.
• Props are used to customize the child
component's appearance and behavior.
Managed within the Passed from parent to
component. Can be child component. Read-
changed by the only from the child's
component itself. Changes perspective. Changes
trigger re-renders. are controlled by the
parent.

You might also like