Interview Questions.

Q1. Difference Between React Native And Nativescript, Which One Do You Prefer And Why?

React JS for the web is notable. But in terms of React Native - i felt i was boxed or caged to Reacts manner of making the perspectives and building the screen there after.

With NativeScript that's now not the case. The UI definition follows XML syntax. I understand XML so easy to observe. When it comes to application common sense - it permits ES5, TypeScript - once more which i already recognise so i can reuse my ability. You use a subset of CSS to style your app. Again big plus factor right here - in case you recognise CSS3, NS lets in you to use most of the primary rule units to style your app. Basically NS is all approximately open requirements - you do not must examine something new. You use what you all ready realize.

Q2. Are There Any Disadvantages To Using React Native For Mobile Development?

Having played around with it for some weeks, I've located React Native to be fairly buggy. I don't think it's everywhere close to production geared up. A lot of features are presently nevertheless missing, for instance, pin annotations for maps. Being that it is open supply, there may be not anything stopping you from building the feature yourself, but in case you're seeking to get some thing created speedy / for production, you are higher off using growing without delay for iOS or Android.

Q3. What Is The Difference Between React And React Native?

ReactJs is a JavaScript Library used for developing apps in HTML5 the usage of JavaScript as the developing language and React Native is used to broaden local cellular apps using JavaScript as the development language.

Q4. Can We Use React Native Code Alongside With React Native?

Yes, we are able to use Native code alongside JavaScript to get our obligations executed, so the limitations in preceding such systems inclusive of Titanium will be no more.

Q5. What Is React Native?

React Native is the subsequent technology of React - a Javascript code library advanced by using Facebook and Instagram, which turned into launched on Github in 201@Native app advent method writing apps for a specific running machine.

React Native helps developers reuse code across the net and on mobile. Engineers won't need to build the identical app for iOS and for Android from scratch - reusing the code across every running gadget.

Android and iOS have very distinct codebases and startups and groups frequently war to hire - or have the funds for- engineers for both. Now simply one developer can write throughout unique cellular working structures.

Q6. How To Handling Multiple Platforms?

React Native gracefully handles a couple of structures. The giant majority of the React Native APIs are pass-platform, so you just need to write down one React Native aspect, and it will work seamlessly on each iOS and Android. Facebook claims that their Ad Manager application has 87% code reuse across the 2 platforms, and I wrote a flashcard app without any platform-particular code in any respect.

If you do need to put in writing platform-unique code -- because of special interplay suggestions on iOS and Android, as an instance, or because you want to take advantage of a platform-unique API -- it really is smooth, too. React Native permits you to specify platform-precise versions of every component, which you may then combine into the relaxation of your React Native software.

Q7. What Is A Prop?

A properly analogy to outline "what is a prop?" has been likened to the real existence state of affairs of while someone movements from one home to another. A transferring van pulls up and all the contents of the home are loaded within the van and it drives off to be unloaded into the new residence. The house is the scenery. The surroundings includes the actual partitions, floors, ceilings, doorways- the architecture of the house. This does not move. It is desk bound and everlasting. The objects boxed up, covered in pads, and accomplished to the transferring van when someone is converting residences could all be taken into consideration the props.

Q8. React Native - Differences Between Android And Ios?

The base setup for building with Android and iOS are the equal, however after you begin entering into the development of your app, there are a few variations. From what I've experienced, we can likely bet on the usage of approximately eighty% of our code pass platform. I've heard of others the usage of as much as ninety%, and I've normally heard the number being around 85%.

To use the code cross platform, you will simply replica the code from your .Ios.Js or .Android.Js report, and duplicate it into the other. As lengthy as there are not platform precise additives, it ought to work.

Also:

There are a few modules that were build mainly for iOS, and there are some that had been specially built for Android, and a number of them paintings cross platform. For example, ActivityIndicatorIOS is an iOS styled element, but if you look within the issue itself, you'll see each ActivityIndicatorIOS.Android.Js and ActivityIndicatorIOS.Ios.Js, so it ought to as a minimum work cross platform, however UI will in all likelihood no longer be what you would be looking for in Android.

If you put in any plugins that need to get admission to any native capability, as an example using a custom font, you may need to do a piece of work one at a time (on each platform) to get them operating for each platform and it'll now not paintings cross platform.

Bridging will be completely unique for each platform, although this could not be something you will even need to fear approximately until you needed to do some thing that React Native does no longer aid out of the container. To construct in IOS, you will want a Mac and Xcode. To construct in Android, you may want the android SDK and some sort of emulator (I use Genymotion). But remember the fact that as of now, you can't develop iOS on a Windows device unless you use something like ExponentJS, however when you have a Mac, you could increase go platform.

Q9. What Happens When You Call Setstate?

The first element React will do when setState is known as is merge the object you surpassed into setState into the contemporary country of the element. This will kick off a technique known as reconciliation. The stop intention of reconciliation is to, inside the most efficient way possible, update the UI based totally on this new kingdom.

To do that, React will construct a brand new tree of React elements (which you can consider as an item illustration of your UI). Once it has this tree, with a view to discern out how the UI have to trade in response to the new kingdom, React will diff this new tree towards the preceding element tree. By doing this, React will then recognise the exact adjustments which befell, and by way of understanding exactly what changes happened, will able to decrease its footprint at the UI by most effective making updates wherein certainly essential.

Q10. Why Open Source?

"If we paintings collectively within the open, we are able to develop the kingdom of era together," Facebook said in a blog publish the day before today nighttime.

Altruism apart, opting to open supply code is a complicated choice. Keeping a groups infrastructure underneath-wraps has commercial benefits, specially while your technology is your business version.

But the developer network is loyal to those who open up. Web engineers the world over are brief to point out a worm within the code at no cost.

Developing open supply tasks allows maintain Facebook one of the maximum coveted agencies to paintings for. Developers need a challenge, and a experience of giving back - and Facebook wants a large pool of gifted engineers to select its employees from.

Plus, it saves on training. If each engineer Facebook hires already knows the way to write in React Native, they've a jogging begin.

Facebook has a tradition of maturing its improvement. Over ten years' it has scaled to serve 1000000000 customers, hundreds of developers and three foremost platforms - iOS, Android and Web.

It's a large improvement from while the fledgling startup copied Facebook code on Harvard University's server for releases and,"poke on it to see if it become still operating every day at 10am," cellular engineering manager Bryan O'Sullivan joked in advance this year.

Q11. When Would You Use A Class Component Over A Functional Component?

If your factor has country or a lifecycle technique(s), use a Class component. Otherwise, use a Functional component.

Q12. What Are Refs In React And Why Are They Important?

Refs are an get away hatch which permit you to get direct get right of entry to to a DOM detail or an example of a issue. In order to use them you add a ref characteristic for your thing whose price is a callback function with the intention to get hold of the underlying DOM element or the installed example of the thing as its first argument.

Magnificence UnControlledForm extends Component 

  handleSubmit = () => 

    console.Log("Input Value: ", this.Enter.Value)

  

  render () 

    go back (

      <form onSubmit=this.HandleSubmit>

        <input

          type='text'

          ref=(input) => this.Input = input />

        <button type='submit'>Submit</button>

      </form>

    )

  

 

Above observe that our enter discipline has a ref attribute whose fee is a characteristic. That characteristic gets the actual DOM element of enter which we then put on the instance with a purpose to have access to it inside of the handleSubmit characteristic.

It’s often misconstrued that you need to apply a category element in an effort to use refs, however refs can also be used with purposeful additives by leveraging closures in JavaScript.

Function CustomForm (handleSubmit) 

  permit inputElement

  go back (

    <form onSubmit=() => handleSubmit(inputElement.Cost)>

      <input

        type='text'

        ref=(input) => inputElement = enter />

      <button type='submit'>Submit</button>

    </form>

  )

 

Q13. Is React Native Like Other Hybrid Apps Which Are Actually Slower Than Native Mobile Apps?

React Native compiles a actual mobile and is engineered for excessive overall performance, a good example of a high performance app is Facebook IOS app; it makes use of React Native and IOS customers have a quite appropriate idea of the way smoothly the Facebook app works on IOS devices.

Q14. How Do You Tell React To Build In Production Mode And What Will That Do?

Typically you’d use Webpack’s DefinePlugin method to set NODE_ENV to production. This will strip out things like propType validation and further warnings. On top of that, it’s additionally an amazing concept to minify your code due to the fact React uses Uglify’s dead-code removal to strip out improvement best code and remarks, so that you can drastically lessen the scale of your bundle.

Q15. Advantages Of React Native?

The fact that React Native absolutely renders the usage of its host platform's popular rendering APIs allows it to stand out frommost present strategies of cross-platform application developement ,like Cordova or Ionic. Existing methods of writing mobile packages using combos of JavaScript,HTML,and CSS typically render the use of webviews.While this method can paintings, it additionally comes with drawbacks,specifically around performance.

Additionally,they do not normally have access to the host platform's set of native UI elements.When those body works do try to mimic native UI elements,the results commonly "experience" only a little off; reverse-engineering all the pleasant information of factors like animations takes an tremendous quantity of effort,and they can quick grow to be out of date.

In comparison, Reactive Native genuinely translates your markup to actual,local UI elements,leveraging existing means of rendering views of whatever platform you are working with. Additionally,React works one after the other from the principle UI thread,so your application can maintain excessive overall performance without sacrificing capability.The update cycle in React Native is the same as in React :while props or nation change,React Native re-renders the views.The fundamental differnce between React Native and React within the browser is that React Native does this through leveraging the UI libraries of its host platform, in preference to the use of HTML and CSS markup.

For developers conversant in working at the Web with React,this indicates you may write mobile apps with overall performance and appearance and sense of anative software,even as the usage of acquainted equipment. React Native additionally represents an improvement over normal cellular development in two other regions:the developer revel in and go-platform development potential.

Q16. What Is The Difference Between Createelement And Cloneelement?

CreateElement is what JSX gets transpiled to and is what React uses to create React Elements (item representations of some UI). CloneElement is used in order to clone an element and pass it new props.

Q17. How Did Facebook Write React Native For Android?

The first go-platform React Native app - advertisements supervisor - become evolved with the aid of the London-based totally dev crew, who have been in the US to announce the Android release the previous day evening. Ads manager shall we groups that advertise on the social community control their debts and create new advertisements.

React Native has only recently been proven in manufacturing and building a new app based on the framework carried a few danger.

Three product engineers acquainted with React set approximately to create an app for Android and expected troubles with the logic necessary to recognize differing time zones, date formats, currencies and advert formats across the world.

This enterprise common sense became already written in JavaScript, and the group knew it would not be efficient to construct all of it once more in Objective-C to do it once more in Java for Android.

Now this mission has been released on Github, developers can use a single workflow to expand for iOS and Android. This way you can use the identical editor and propagate it to both the iOS simulator and Android emulator at the same time.

Q18. What Are Keys In React And Why Are They Important?

Keys are what assist React keep tune of what objects have modified, been introduced, or been removed from a listing.

Render () 

  go back (

    <ul>

      this.Nation.TodoItems.Map((project, uid) => 

        go back <li key=uid>project</li>

      )

    </ul>

  )

 

It’s vital that every key be unique among siblings. We’ve talked some instances already approximately reconciliation and a part of this reconciliation process is acting a diff of a new element tree with the maximum previous one. Keys make this technique extra efficient while dealing with lists because React can use the key on a infant element to fast know if an detail is new or if it became simply moved whilst comparing timber. And not simplest do keys make this technique extra efficient, however with out keys, React can’t realize which nearby state corresponds to which item on flow. So in no way forget keys whilst mapping.

Q19. Describe How Events Are Handled In React?

In order to resolve pass browser compatibility problems, your occasion handlers in React might be surpassed times of SyntheticEvent, that's React’s cross-browser wrapper across the browser’s local event. These artificial events have the equal interface as native activities you’re used to, except they work identically throughout all browsers.

What’s mildly interesting is that React doesn’t clearly connect activities to the child nodes themselves. React will pay attention to all activities at the top stage using a unmarried occasion listener. This is ideal for performance and it also manner that React doesn’t want to worry about preserving tune of occasion listeners whilst updating the DOM.

Q20. What Is The Difference Between A Controlled Component And An Uncontrolled Component?

A large part of React is that this concept of getting components manage and manage their personal nation. What happens whilst we throw local HTML shape factors (enter, select, textarea, and so on) into the mix? Should we've got React be the “unmarried supply of reality” like we’re used to doing with React or should we allow that form records to stay in the DOM like we’re used to normally doing with HTML shape factors? These two questions are at the coronary heart of controlled vs out of control additives.

A managed thing is a component where React is in control and is the single supply of fact for the shape records. As you could see beneath, usernamedoesn’t live within the DOM but as an alternative lives in our thing state. Whenever we need to replace username, we name setState as we’re used to.

Magnificence ControlledForm extends Component 

  country = 

    username: ''

  

  updateUsername = (e) => 

    this.SetState(

      username: e.Target.Cost,

    )

  

  handleSubmit = () => 

  render () 

    return (

      <form onSubmit=this.HandleSubmit>

        <input

          type='text'

          value=this.State.Username

          onChange=this.UpdateUsername />

        <button type='submit'>Submit</button>

      </form>

    )

  

 

An out of control issue is in which your shape statistics is handled via the DOM, in place of interior your React aspect.

You use refs to perform this.

Magnificence UnControlledForm extends Component 

  handleSubmit = () => 

    console.Log("Input Value: ", this.Input.Price)

  

  render () 

    go back (

      <form onSubmit=this.HandleSubmit>

        <input

          type='text'

          ref=(input) => this.Input = input />

        <button type='submit'>Submit</button>

      </form>

    )

  

 

Though out of control components are commonly easier to implement since you just grasp the cost from the DOM using refs, it’s normally recommended that you favor managed components over uncontrolled components. The essential motives for this are that controlled additives assist immediate subject validation, will let you conditionally disable/allow buttons, put into effect input codecs, and are greater “the React manner”.

Q21. Is React Native A Native Mobile App?

Yes, React Native Compiles a local cellular app using local app additives. It’s neither a Hybrid Mobile app that makes use of WebView to run the HTML5 app or a cellular internet app. React Native builds a real cellular app that’s indistinguishable from an app built the usage of Objective-C or Java.

Q22. Do We Use The Same Code Base For Android And Ios?

Yes, we use the equal code base for Android and IOS and React take cares of the local components translations. For instance: A React Native ScrollView uses local UiScrollView on IOS and ScrollView on Android.

Q23. Re-render On Changes?

In addition to props, components can also have an internal country. The maximum distinguished instance of that behavior might be a click counter that updates its cost when a button is pressed. The number of clicks itself might be saved in the kingdom.

Q24. What Is The Difference Between Using Constructor Vs Getinitialstate In React / React Native?

The  methods are not interchangeable. You have to initialize kingdom in the constructor while the use of ES6 lessons, and outline the getInitialState approach while the use of React.CreateClass.

Class MyComponent extends React.Component 

constructor(props) 

outstanding(props);

this.Kingdom =  /* initial nation */ ;

is equivalent to

var MyComponent = React.CreateClass(

getInitialState() 

return  /* preliminary country */ ;

,

);

Q25. What's The Challenges With React Native?

Working across separate iOS and Android codebases is challenging.

"When we have been building the app, Facebook used this version, and all our build automation and developer procedures were installation around it. However, it does not paintings properly for a product that, for the maximum part, has a unmarried shared JavaScript codebase," wrote Daniel Witte and Philipp von Weitershausen, engineers at Facebook in a blog the day before today.

Developers who regularly struggle to figure out where the grasp code exists and whether or not insects were fixed in all platforms might also need to preserve out for while Facebook opens up its unified repository. It is transferring all of its code from Git to Mercurial, and could be one in every of the biggest codebases of its type.

Google is another web massive that understands the strength of open source, currently committing to OpenStack and creating an enitrely open supply container control challenge, Kubernetes. The task appears at odds with its very own Google cloud commercial enterprise, however again, it knows that the advantages outweigh any lack of Google cloud clients.

Q26. What Is The Second Argument That Can Optionally Be Passed To Setstate And What Is Its Purpose?

A callback characteristic with a purpose to be invoked whilst setState has finished and the aspect is re-rendered.

Something that’s now not spoken of plenty is that setState is asynchronous, that's why it takes in a second callback characteristic. Typically it’s satisfactory to apply another lifecycle technique as opposed to relying on this callback feature, but it’s properly to comprehend it exists.

This.SetState(

   username: 'tylermcginnis33' ,

  () => console.Log('setState has finished and the thing has re-rendered.')

)

Q27. In Which Lifecycle Event Do You Make Ajax Requests And Why?

AJAX requests must go in the componentDidMount lifecycle event.

There are a few reasons for this,

Fiber, the subsequent implementation of React’s reconciliation algorithm, will have the potential to begin and forestall rendering as wished for overall performance benefits. One of the change-offs of this is that componentWillMount, the other lifecycle event where it would make feel to make an AJAX request, will be “non-deterministic”. What this means is that React might also start calling componentWillMount at numerous times each time it feels adore it desires to. This would obviously be a awful formula for AJAX requests.

You can’t assure the AJAX request won’t solve earlier than the component mounts. If it did, that could suggest that you’d be seeking to setState on an unmounted thing, which no longer simplest gained’t paintings, but React will yell at you for. Doing AJAX in componentDidMount will assure that there’s a issue to replace.

Q28. What Does Shouldcomponentupdate Do And Why Is It Important?

Above we talked about reconciliation and what React does whilst setState is referred to as. What shouldComponentUpdate does is it’s a lifecycle technique that permits us to choose out of this reconciliation system for positive components (and their toddler additives). Why might we ever need to try this? As cited above, “The stop aim of reconciliation is to, within the maximum green way feasible, replace the UI primarily based on new kingdom”. If we know that a positive phase of our UI isn’t going to trade, there’s no motive to have React go through the hassle of seeking to discern out if it ought to. By returning fake from shouldComponentUpdate, React will count on that the cutting-edge issue, and all its toddler additives, will stay the same as they presently are.

Q29. Passing Functions Between Components In React And React Native?

I might stay away from such passing functions between components. I always use Flux architecture with ReactJs and React Native.

Keep additives just to render stuff by houses and sending new moves.

You have hard dependency among additives. This stuff does now not scale. It might be tough to maintaine such code.

What i personally do is simply write actions, shops, dispatcher and do not use any dependency on stuff like redux, due to the fact React Native is envolving hastily and you never recognise in case your dependencies will do it at same speed.

Q30. Are All React Components Usable In React Native?

Web React additives use DOM elements to show (ex. Div, h1, table, and so forth) however those are not supported with the aid of React Native. You'll want to locate libraries/components made in particular for React Native.

I doubt there are additives that supports each, therefore it should be fairly clean to figure out if it is made for React Native or not. As of now, if the creator does not specially say that they made for React Native, it likely does now not work on React Native.