The basics of React Native: Lessons from an Open Brackets Meetup


They wanted to help students. The topics at most tech meetups were too advanced. This was the purpose of the Open Brackets meetups said Devon Wijesinghe – President of the Mozilla Campus Club of IIT. The first such meetup touched on the topic of serverless technology. The second meetup, which took place recently touched on the topic of React Native.

What is React Native?

In case you’re not a software developer, React is a JavaScript library for building user interfaces. Originally created by Jordan Walke – a software engineer at Facebook, it’s now maintained by Facebook and a community of developers after being open sourced. “Before you can understand React Native you need to understand React,” said Faizul Hasan – Senior Technical Lead at Sysco Labs.

Faizul Hasan speaking at the second Open Brackets meetup
Faizul Hasan speaking at the second Open Brackets meetup (Image credits: Mozilla Campus Club of IIT)

This was how Faizul opened his talk at the Open Brackets meetup. He went onto explain that React is merely a library that only provides elements for the view layers in the MVC architecture. In other words, it only allows developers to create the buttons, text fields, and other elements you see in an app. Everything else would need to be built from something else.

He then explained how the DOM or Document Object Model works. This is what modern web browsers use as an interface to modify web pages. Afterward, Faizul shared that React adopts a Virtual DOM. This is where a representation of the user interface is kept in memory. All modifications are set in this representation before the real interface is updated.

This process allows React to update the user interface much faster. Faizul then shared a demo with us to show how it works first hand. Following his demo, Faizul shared a few best practices. One being developers should make every element of websites operate as a single component. This means any changes would be specific and would an overall increase in performance.

Okay, so what is React Native actually?

React Native, is another JavaScript framework based on React. It’s designed for creating native mobile apps for Android and iOS. Unlike other frameworks such as Cordova, it doesn’t create a web view. Rather it creates a real native mobile app. Faizul explained that was using the JavaScript Core framework.

So when you write a React Native application, you do so with JavaScript. The Core framework then takes it and packages it inside a C application. In doing so, React Native creates a direct bridge between the application and the hardware. Having given this explanation, Faizul continued his demos to show React Native in action.

Harshana Abeyratne speaking at the second Open Brackets meetup
Harshana Abeyratne speaking at the second Open Brackets meetup (Image credits: Mozilla Campus Club of IIT)

Afterward, we saw Harshana Abeyratne – Senior Software Engineer shared a series of tools you can use alongside React Native. He opened by sharing a few libraries for navigation because “Every app needs navigation but React Native doesn’t offer it.” Afterward, he shared the examples of redux that developers can use to store the state of an application.

He later listed Async Storage, SQLite, and CouchDB as libraries that offer storage capabilities. Meanwhile, there are other libraries such as GraphCool, AWS Mobile Hub, and Firebase that offer backend capabilities as a service. Afterward, Harshana listed a few other libraries related to debugging and testing applications. He concluded by sharing a list of libraries that developers can use for analytics and crash reporting.

Developing with React Native and its alternatives
Developing with React Native and its alternatives

With the end of Harshana’s session, the second Open Brackets meetup came to an end. It gave everyone attending a basic introduction to React Native. Yet both speakers stated that this was a basic introduction and if you want to truly understand the framework, “You’ll need to research and learn more about it yourself.” The official documentation is a good place to start.


Please enter your comment!
Please enter your name here