Understanding React Component Lifecycle

Introduction

React enables to create components by invoking the React.createClass() method which expects a render method and triggers a lifecycle that can be hooked into via a number of so called lifecycle methods.

This short article should shed light into all the applicable functions.

Understanding the component lifecycle will enable you to perform certain actions when a component is created or destroyed. Further more it gives you the opportunity to decide if a component should be updated in the first place and to react to props or state changes accordingly.

Continue reading

Hello React Native Router Flux.

One of the easiest way to implement flux with react-native is to use react-native-router-flux which provide a very easy way to use flux architect.

This is one of the simplest example for react-native-router-flux. Here we will see how we can navigate from one view to another view. Let’s get started with following step.

super_simple.gif

Create hello react-native application


In terminal / command window

react-native init HelloFlux

Navigate to HelloFlux directory and install react-native-router-flux npm package


First navigate to the directory that contain package.json inside HelloFlux directory from terminal and run following command. This will install react-native-router-flux node package into the project.

npm install –save react-native-router-flux

 

Diving into coding


In index.android.js for android and  index.ios.js for iOS type in the following code.