This dynamic and powerful framework is enabling a host of opportunities for organisations that want to consolidate down their application architectures, and take a ‘write once deploy anywhere’ approach to application development for devices.
To begin building apps with React Native we need to understand
Let’s see if we can look at these areas!
In a SPA we have two things that are loaded by the browser
1 2 3
<html> <script src=/path/to/js/> </html>
The final output is a rendered web page with all the things we expect (e.g. input controls, dynamic behaviour, validation etc).
In reality we end up with something like this…
We can see that each React Native control will interact with a native counterpart component.
Now we understand that React Native will communicate over the bridge we can consider; how does all this get set up?
The very first thing to happen is that the developer will build the React Native project using a command such as
React Native will then do two things.
Below we see a screenshot of a React Native project. The project itself actually has an IOS and an Android project embedded into it. These are the projects that React Native uses to pull down the payload.
The diagram below shows the two steps; the webserver with our payload, and the project delivered to the phone.
We should now have a sound understanding of how React Native builds our projects and creates the environment for them to run on a device.
Whether you are using a real device or an emulator they will both access the payload in the same way.
So we now understand how the application is build and delivered. But how is it developed?
This means we can change and modify a React Native project very fast.
This ability to re-load is called ‘Hot Reloading’. Later down the line when we have actually packaged and deployed our apps to the App store we can even publish code fixes to React Native apps using something called ‘Code Push’ which takes advantage of React Natives ability to ‘hot-reload’. This can mean you can avoid entire app store releases (you just update the script on your servers).
When I first learned React Native I couldn’t work out how debugging worked. No one actually explained how the project was built, and it wasn’t clear that it behaves in much the same way as a Single Page Application.
When you understand React Native only does these two things (1 package the app and 2 download the payload) you can see that debugging isnt’ that complicated.
In order to run a debugger we need two things.
Although there is a lot on this above screenshot we can see 4 main points for consideration.
Both of these can be browsed to, from the machine which has built React Native using a browser
NOTE : the default port for React Native is 8081 but I changed it to 8089 because of a port conflict. I changed the port using the
In this article we have discussed :
Knowing this makes it more simple and will give you the confidence to start using this brilliant framework. I hope you enjoyed this article!
Request a call back and let's see if we are a good fit...