Introduction

React Native Workshop

rangle.io

Who is this material for?

This material is for those who are familiar with ReactJS and are willing to dive into developing mobile apps with React Native. For this course we assume that our audience has solid knowledge of JavaScript, ES6 syntax, Redux, CSS, and Flexbox for layouts.

What is React Native?

React Native is a framework for building mobile applications with JavaScript and ReactJS by leveraging native UI components.

In ReactJS we have a virtual DOM which reflects the real DOM.

Each element corresponds to a node in the Virtual DOM and when an element changes, that change is reflected onto the real DOM. In React Native we are not using the DOM but Native Components which are provided by specific platforms. Instead of dealing with WebViews, we use actual platform specific native components.

For example, instead of using HTML elements such as <div> & <span> we use the native components such as <View> & <Text>. This course we will introduce other, more complex, native components and some platform specific components which look and behave differently on each platform.

React Native embraces the Learn Once And Apply Everywhere paradigm, which is quite different from Write Once Use Everywhere. With React Native we can use the concepts learned from React to build separate apps for Android and iOS reusing most of the business logic code for both platforms.

How does it work?

React Native has an embedded instance of JavaScriptCore. When your app starts, the JavaScript code is loaded and executed in this engine.

Using the RCTBridgeModule it bridges native code to JavaScript. This allows the JSX components to have bindings to native UI components.