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.