Understanding #ReactNative

1. Understanding React Native As the name suggests, React Native a JavaScript based framework created to develop Native Mobile Apps for platforms like Android and iOS. React Native framework was designed to address the two basic needs of the Mobile App Development community viz – building apps that gives better user experience and are faster to develop and run on multiple platforms. Using React Native framework, developers can leverage the advantage of reusing most of the code amongst these platforms. Development in React Native is free of side effects as the components developed are pure and independent. Hence, the framework also updates the app view when the state of the app is changed. Unlike other mobile app development frameworks, React Native renders the actual native view to optimize the end user experience. Some of the top Fortune 500 companies that uses React Native Framework for their mobile app development: 1.Facebook 2.Walmart 3.Bloomberg 4.Instagram 5.Pintrest 6.Skype 7.Tesla 8.Uber and many more…

2. Difference between and React Native and ReactJS React Native 1.It’s a Cross Platform Native Mobile App Development framework. 2.In addition to native support components, it also has all the benefits of React JS. 3.Empowers the developers design the native apps in web-style. 4.Ease of development for the front end developer. Sample React Native code import React, { Component } from 'react'; import { Text, View } from 'react-native'; class ReactNative extends Component { render() { return ( // it is a container, layout support with flexbox think // of it like a div with a container class. <View> <Text>// A react component for displaying text. If you like React on the web, you'll like React Native. </Text> <Text> You just use native components like 'View' and 'Text', instead of web components like 'div' and 'span'. </Text> </View> ); } }

3. ReactJS 1.It is used to Develop Web Apps, SPAs, developing websites etc. 2.It was designed to create UI hierarchy. 3.Liable for rendering of UI components and hence, is considered as V part of MVC framework. 4.React’s virtual DOM refreshes only part of the page, thus reduces the page refresh time and is considered to be the faster than conventional full refresh model. 5.Simple and easy to learn. Sample React JS code import React, { Component } from 'react'; import ReactDOM from 'react-dom'; // every component is created by // extending the React Component class. class Clock extends React.Component { constructor(props) { super(props); // constructor creates an instance of this class. this.state = {date: new Date()}; } componentDidMount() { // this function is called immediately // after component is mounted on DOM. this.timerID = setInterval( () => this.tick(),

4. 1000 ); } componentWillUnmount() { // called before component will unmount from DOM. clearInterval(this.timerID); } tick() { // this function is used to update the // state of Clock component. this.setState({ date: new Date() }); } render() { return ( <div> <h1>Today Date and Time</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } // code will not run needs specific environment setup ReactDOM.render( <Clock />, document.getElementById('root') ); Overall, the user experience created by developing the app in React Native is real and delightful, and its support for both Android and iOS both makes this the first choice of the Mobile App Developers. It has a huge community base and is also considered as a good alternative to Angular JS.