Scribd
Upload
24 views20 pages

Lecture 4 B

Uploaded by

eshaasif005
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views20 pages

Lecture 4 B

Uploaded by

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

MOBILE APPLICATION

DEVELOPMENT
BCS/BSE – 6
Instructor Name:Aatiqa Bint e Ghazali
REACT FUNDAMENTALS
NOTE
• We are learning step by step moving towards becoming a better react
native developer
• We can’t just show funky beautiful screens in one go
• Instead focus on basics of JS and all things you need to know about react
native app dev first
• Then make big things
• React Native runs on React
• a popular open source library for building user interfaces with JavaScript.
• To make the most of React Native, it helps to understand React itself.
CORE CONCEPTS BEHIND
REACT
• components
• JSX
• props
• State
• There are other concepts also we will study them later on
YOUR FIRST COMPONENT

• Components are building blocks of react


• Let’s make a cat component
• To define your Cat component, first use JavaScript’s import to
import React and React Native’s Text Core Component:
• Your component starts as a function:

import React from 'react'; const Cat = () => {};


import {Text} from 'react-native';
• Whatever a function component returns is rendered as a React
element.
• React elements let you describe what you want to see on the
screen.
• Here the Cat component will render a <Text> element
• You can export your function component with JavaScript’s
export default
const Cat for use throughout your app
= () =>
const Cat = () => {
{
return <Text>Hello, I am your cat!
return <Text>Hello, I am your cat!
</Text>; };
</Text>;
export default Cat;
};
TWO WAYS TO WRITE A
COMPONENT
JSX
• React and React Native use JSX, a syntax that lets you write elements
inside JavaScript like so: <Text>Hello, I am your cat!</Text>
• Because JSX is JavaScript, you can use variables inside it.
• Here you are declaring a name for the cat, name, and embedding it
with curly braces inside <Text>.

const Cat = () =>


{
OUTPUT:
const name = ‘Aatiqa';
Hello, I am
return <Text>Hello, I am {name}!</Text>;
Aatiqa!
};
export default Cat;
NOTE
• Any JavaScript expression will work between curly braces, including
function calls like
• Here getFullName is the name of function
• And next are arguments passed to function

{getFullName(“Aatiqa", “Bint e", “Ghazali")}:


PARENT AND CHILD
COMPONENTS
• Any component that renders other components is a parent component.
• Here, App is the parent component and each Cat is a child component.
• You can put as many cats in your App as you like.
• Each <Cat> renders a unique element—which you can customize
with props.
PROPS

• Props is short for “properties”.


• Props let you customize React components.
• For example, here you pass each <Dog> a different name for Dog to
render:
EXAMPLE
PROPS IN CORE COMPONENTS
• Most of React Native’s Core Components can be customized with props,
too.
• For example, when using Image, you pass it a prop named source to
define what image it shows
STATE
• state is like a component’s personal data storage.
• State is useful for handling data that changes over time or that comes
from user interaction.
• State gives your components memory!
• You can add state to a component by calling React’s useState Hook
.
• A Hook is a kind of function that lets you “hook into” React features
• First, you will want to import useState from React like so:

• Then you declare the component’s state by calling useState inside


its function.
• In this example, useState creates an isHungry state variable:
• Calling useState does two things:
1. it creates a “state variable” with an initial value—in this case
the state variable is isHungry and its initial value is true
2. it creates a function to set that state variable’s value—
setIsHungry
• It doesn’t matter what names you use.
• But it can be handy to think of the pattern as [<getter>,
<setter>] = useState(<initialValue>).
• Now create a button and onPress pass the state function and set the
variables value to false
• In the same button add functionality inside the title so that when the
varibales value is false than button should be disabled
• Also add title dynamically
FRAGMENTS
• Adjacent JSX elements must be wrapped in an enclosing tag.
• Fragments let you do that without nesting an extra, unnecessary
wrapping element like View.
• <> </>
ASSIGNMENT 1

You might also like