Okay! I'm into React Native!

"With React Native, you don't build a mobile web app, an HTML5 app, or a hybrid app. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React." https://facebook.github.io/react-native/

Understanding React VS React Native

• React Native components looks almost exactly the same as a React component

Look at the above numbering sequence with below explanation

1. Still import React at base component.
2. Still define class for a component and it extend from react component.
3. Still define render function and return some JSX from it and can export the component.
4. Only difference that image is the View and Text components rely on in your JSX which come from react native

React Native Docs list down more components which you can find there.

E.g. Fat List component.

Fat List wants minimum of two properties

1. data : Which need to pass an array containing objects that you need to bind to.
2. renderItem : This function will call each element in the data prop and enable display items. Above example return a <Text> element with return function object with name attribute.

State management

• Basic idea about react is separate your app into different components.
• We can create two type of component in react.

1. class component

2. functional component(state less component)

1. class component - class is maintain it's own state.

i. In the constructor we can initialize the state.

ii. When ever you create a constructor you need to pass super after that.

iii. set the state.

2. functional component(state less component) - can not maintain own state and do not have access to the life cycle methods. This is how you can write functional components.

How to export functional component to a class component.

above example CustomButtom is presentation component it has no idea what the state is? and it can't change state directly inside its own component. We can change state inside the parent component using props.

This Example shows how to pass values,events from parent component and bind events to the child component.

prop and state

There is two ways that data get handle in react data, handle through state and props.

State

In React if a state change on a component the will be automatically re-render and update the DOM, if there are any changes because react manage virtual DOM for you. Like the browser code in React is rendered through Virtual DOM while React Native uses Native API's to render components on mobile.

1. Specify default States.
2. componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
3. setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
4. keyExtractor prop added to remove warning message because FlatList each item must populate with unique key value.

Prop

Props help to passing states from parent to child components.

1. Setting up prop values from parent component then you will able to pass values to child component.
2. Destructuring the props and only taking the name and age. 

Prop type checking (prop validation)

This is making sure that we are passing right type of data into our props

1. Import the prop-types to the file.
2. Do the property validation.
3. (Additional - Import method directly from api.js)

React life-cycle methods

The lifecycle methods are various methods which are invoked at different phases of the lifecycle of a component. To get a clear idea of the lifecycle we will need to differentiate between the initial creation phase. We will discuss about this topic in up coming article.?