React

There are 9 posts tagged React ().

Dynamically Hide/Show or Add/Remove component in react native

In react or react native the way component hide/show or add/remove does not work like in android or iOS. Most of us think there would be the similar stratedgy like

View.hide = true or parentView.addSubView(childView

But the way react native work is completely different. The only way to acheive this kind of functionality is to include your component in your DOM or remove from DOM.

 

Here in this example I am going set the visibility of text view based on the button click.


The idea behind this task is the create a state variable called state having the initial value set to false  when the button click event happens then it value toggles. Now we will use this state variable during the creation of component.

 

Continue reading →

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 →

context

Context is similar to props in react , the only difference is that context lets you pass some data through all nodes in component tree. But at the time of writing this post  this feature is still in development phase and its api may change in next version of react. Let’s explain the concept of context this with following diagram.

Continue reading →

refs to Components

After building your component, you may find yourself wanting to “reach out” and invoke methods on component instances returned from render().  This can be achieve from refs  in react based project. Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state.

refs can be  as string attribute or callback method. Here’s how we can use it in both cases.

ezgif.com-video-to-gif

Continue reading →

React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere. Facebook uses React Native in multiple production apps and will continue investing in React Native. 

This is a framework that lets you build native iOS and Android application by using javascript backed by native iOS and Android component.  So react native utilize both the advantages of Native app  and Hybrid app functionality.

Continue reading →