How to start with React-native application development?

About react native

1)What is React Native ?

->The java script library for building user interface is called React.
->Typically used for web development.
->It is a collection of special react components.
->Componenet compiled to Native widgets.
->Native platform APIs exposed to javascript.
->Connect javascript and native platform code.

2)react-native eg:

const App = props =>{
  return(
       <View>
      <Text>Hay bot</Text>
   </View>
  )
} 

3)Create a new react native app

  a)expo cli/tool(using this approach for this tutorial)

  ->third party service
  ->free
  ->managed app development workflow
  ->lots of convenience and utility features: simplifies development

  b)react native cli

  ->managed by reactnative team
  ->bare bone development
  ->almost no convenience or utility feature
  ->full flaxibility: integrate with any native code

4.1)how expo works?

->goto expo.io
->install Node.js in your PC if not
->get the command line tool(eg:Anaconda powershell prompt)
   npm install expo-cli --global
->Create your first project(navigate to the project directory folder)
    expo init my-new-project
    cd my-new-project
    expo start
->use expo-client app in android mobile and scan qr code yields to app lunch which your going to building.

->this should give up and running output app.
->open the app folder in any text editor to further code.

4.2)how react native cli work?

  (in one cmd)
->npm install -g react-native-cli
->npm install -g yarn
->react-native init myapp
->cd myapp
->react-native start
  (in another cmd and goto myapp folder)
->react-native run-android

a)reactnatibe basics

->core components
  i)built into react native
  ->"translation" to Native UI widgets provided by React Native

  ->eg:
    <View>
<Text>
<Button>/<Touchable...>
<TextInput>
<Image>

   ii)Your UIs/Custom Components

   ->Composed of these "Core" Components and other build-in Components

   ->eg:
     const MyTitle = props=>{
   return(
     <View>
   <Text>{props.title}</Text>
</View>
    );
}

iii)styling

->inline style
->styleSheet objects(prefered)
->written in javascript
->Based on CSS syntax, influenced by CSS

<===============lets build an simple app ======================>

1)initially app.js code :

import React from 'react';
import { StyleSheet, Text, View} from 'react-native';


export default function App() {
  return (
    <View style={styles.container}>
      <Text>hi dude</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

2)After making app, app.js code:

import React, {useState} from 'react';
import { StyleSheet, Text, View, Button, TextInput} from 'react-native';


export default function App() {
  const [enteredGoal, setEnteredGoal] = useState(' ');
  const [courseGoals, setCourseGoals] = useState([]);



  const goalInputHandler = (enteredText) => {
     setEnteredGoal(enteredText);
  };

  const addGoalHandler= ()=>{
     setCourseGoals(currentGoals =>[...currentGoals, enteredGoal]);
     console.log(enteredGoal);

  };





  return (
    <View style={styles.mainView}>
        <View style={styles.inputContainer}>
           <TextInput 
           placeholder={"Goal to achive"} 
           placeholderTextColor ={"green"}
           style={styles.inputField} 
           onChangeText = {goalInputHandler}
           />
           <Button 
           title={"Add me!"}  
           color={"coral"}
           onPress={addGoalHandler}
           />
        </View> 
        <View style={styles.showdataview}>
          {courseGoals.map((goal) => <Text>{goal}</Text>)}
        </View>
    </View>
  
  );
}




const styles = StyleSheet.create({
  mainView:{
    paddingTop:30,
    padding:5,
    
  },

  inputContainer:{
    flexDirection:"row",
    justifyContent:"space-evenly",
    },

  inputField:{
    backgroundColor:"lime",
    paddingStart:20,
    width:"75%",
    borderColor:"cornflowerblue",
    borderWidth: 2,
    },

  showdataview:{
    backgroundColor:"pink",
    height: "100%",
    borderColor: "black",
    borderWidth:2,
  },

});