Mobile Development - Lecture 11

 

Mobile Development- Using React Native - Lecture 11

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Introduction to React Native

# Lecture 11

ReactJS ?
    REact  === ReactJs 
    Framework for WEb app development using 
    Reactive Programming with JS
React Native was build with help of ReactJS and it was to build UI for mobile.

## React How Know?
-> Components
-> Functional Component vs Class Component
-> StyleSheet is used to make and reUse Design values for the compoents in react.
-> Flex
    => [width, heigth === sizing of components]



## TAGS ##

### NISHAN DAHI ##
=>    <Text>  <!-- Tag started !-->
=>    </Text>  <!-- Tag closed !-->
    => e.g  <Text> Erozgaar </Text>

### WE CALL IT ☝️ "CONTAINER TAGGING"

=> <Text/> <!-- Self Closing Tags !-->


### Properties === props

<Title value = "my Title" />
<Title 
value = "my Title2"
style = {"style Value"}
 />

<!-- we have aself closign tag called title along side a prop of value !-->

<!--  Tag Props can be written in two ways?
    propName = "value of prop"
    propName = {"value of prop"}
!-->


<!-- HOW TO DESIGN !-->
 
 INLINE DESIGNING
 <!-- you write a style inside a prop of a tag !-->
  e.g  <Tag
        style = {{color:"purple", width:100,
        height:100,
        }}
        />

 EXTERNAL DESIGNING




NOTE:
 VYSOR is an app to control phone from laptop screen (contains ads)



 IMPORTING AND EXPORTING 
 (NODE JS WORKFLOW is based on it ☝️)

App.js

import {View,Button} from "react-native";

export default function App() {

  return (
    <View style={{
      flex:1,
      backgroundColor:'red',
      justifyContent:"center",
      paddingRight:10,
      paddingLeft:10,
      }}>
     <Button
      title="My Button 1"
      color="yellow"
     />
    </View>
  );
}