You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In case of Android, React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the Hello World application of RN would take around 3 to 4 megabytes for Android.
33
+
34
+
In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc. 😎
32
35
33
-
In case of Android, React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the Hello World application of RN would take around 3 to 4 megabytes for Android.
34
-
35
-
In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc. 😎
36
-
37
-
3.**React Native Bridge** :
36
+
3.**React Native Bridge**:
38
37
React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread.
In most cases, a developer would write the entire React Native application in Javascript. To run the application one of the following commands are issued via the cli - `react-native run-ios` or `react-native run-android`. At this point, React Native cli would spawn a node packager/bundler that would bundle the JS code into a single `main.bundle.js` file. The packager can be considered as being similar to webpack. Now, whenever the React Native app is launched, the first item to be loaded is the native entry point. The Native thread spawns the JS VM thread which runs the bundled JS code. The JS code has all the business logic of the application. The Native thread now sends messages via the RN Bridge to start the JS application. Now, the spawned Javascript thread starts issuing instructions to the native thread via the RN Bridge. The instructions include what views to load, what information is to be retrieved from the hardware, etc. For example, if the JS thread wants a view and text to be created it will batch the request into a single message and send it across to the Native thread to render them.
44
+
In most cases, a developer would write the entire React Native application in Javascript. To run the application one of the following commands are issued via the CLI - `react-native run-ios` or `react-native run-android`. At this point, React Native CLI would spawn a node packager/bundler that would bundle the JS code into a single `main.bundle.js` file. The packager can be considered as being similar to Webpack. Now, whenever the React Native app is launched, the first item to be loaded is the native entry point. The Native thread spawns the JS VM thread which runs the bundled JS code. The JS code has all the business logic of the application. The Native thread now sends messages via the RN Bridge to start the JS application. Now, the spawned Javascript thread starts issuing instructions to the native thread via the RN Bridge. The instructions include what views to load, what information is to be retrieved from the hardware, etc. For example, if the JS thread wants a view and text to be created it will batch the request into a single message and send it across to the Native thread to render them.
When a React Native application is launched, it spawns up the following threading queues.
60
59
61
60
1.**Main thread**_(Native Queue)_ - This is the main thread which gets spawned as soon as the application launches.
62
-
It loads the app and starts the JS thread to execute the Javascript code. The native thread also listens to the UI events like 'press', 'touch', etc. These events are then passed onto the JS thread via the RN Bridge. Once the Javascript loads, the JS thread sends the information on what needs to be rendered onto the screen. This information is used by a **shadow node thread** to compute the layouts. The shadow thread is basically like a mathematical engine which finally decides on how to compute the view positions. These instructions are then passed back to the main thread to render the view.
61
+
It loads the app and starts the JS thread to execute the Javascript code. The native thread also listens to the UI events like 'press', 'touch', etc. These events are then passed to the JS thread via the RN Bridge. Once the Javascript loads, the JS thread sends the information on what needs to be rendered onto the screen. This information is used by a **shadow node thread** to compute the layouts. The shadow thread is basically like a mathematical engine which finally decides on how to compute the view positions. These instructions are then passed back to the main thread to render the view.
63
62
64
63
2.**Javascript thread**_(JS Queue)_ - The Javascript Queue is the thread queue where main bundled JS thread runs.
65
64
The JS thread runs all the business logic, i.e., the code we write in React Native.
@@ -108,10 +107,10 @@ View Managers are basically classes extended from `ViewManager` class in Android
108
107
109
108
### Development mode 🔨
110
109
111
-
When the app is run on`DEV` mode ,the Javascript thread is spawned on the development machine. Even though the JS code is running on a more powerful machine as compared to a phone, you will soon notice that the performance is considerably lower as compared to when run in bundled mode or production mode. This is unavoidable because a lot more work is done in DEV mode at runtime to provide good warnings and error messages, such as validating propTypes and various other assertions. Furthermore, latency of communication between the device and the JS thread also comes into play.
110
+
When the app is run in`DEV` mode, the Javascript thread is spawned on the development machine. Even though the JS code is running on a more powerful machine as compared to a phone, you will soon notice that the performance is considerably lower as compared to when running in bundled mode or production mode. This is unavoidable because a lot more work is done in DEV mode at runtime to provide good warnings and error messages, such as validating propTypes and various other assertions. Furthermore, the latency of communication between the device and the JS thread also comes into play.
This section covers the basic boilerplate setup of a sample project that we will be using to learn. We believe that one should setup his/her project from scratch or use a minimal boilerplate instead of using a readymade feature rich boilerplate. The reason being , when a developer/team sets up its own boiler plate , they know what exactly is going into the app. A lot of boiler plates have features/libraries which the team will be unaware of and would contribute to the clutter.
3
+
This section covers the basic boilerplate setup of a sample project that we will be using to learn React Native. We believe that one should set up his/her project from scratch or use a minimal boilerplate instead of using a ready-made, feature rich boilerplate. The reason behind this is that when a developer/team sets up its own boilerplate, they know exactly what is going into the app. A lot of boilerplates have features/libraries which the team will be unaware of and it would only contribute to code clutter.
4
4
5
-
### Popular boilerplates review
5
+
### Popular boilerplates' review
6
6
7
7
- create-react-native-app `OR`
8
8
- Expo `OR`
9
9
- react-native init
10
10
11
-
React-native has a bunch of options to setup the project. `create-react-native-app`, `react-native init` and `EXPO` are among most popular ones and interestingly all three of them are mentioned in the official website of react-native. It might create a lot of confusion for someone who is starting to know which one to use.
11
+
React-native has a bunch of options to set up a project. `create-react-native-app`, `react-native init` and `Expo` are among the most popular ones and interestingly, all three of them are mentioned on the official website of react-native. It might create a lot of confusion for someone who is starting with RN to decide which one to use.
12
12
13
-
Here is short desciption for each of them:
13
+
Here is a short description of each of them:
14
14
15
-
*__create-react-native-app:__ It is similar to the `creat-react-app`. It has all the necessary tasks to run your application. All the necessary setup has been taken care and you can start hacking around react-native. This is very useful if you are starting to learn react-native and you don't want to worry about anything else. It uses Exponent's open source tools to debug the application. To run the app, all you need to do is install expo client app and scan a QR code. Although its very quick to setup, everything seems like a black-box. Due to this, it can get pretty messy when you want to change a lot of configurations. Hence we do not recommend it for a longterm production application.
15
+
*__create-react-native-app:__ It is similar to `create-react-app`. It has all the necessary tasks to run your application. All the necessary setup has been taken care of and you can start hacking around react-native. This is very useful if you are starting with react-native and don't want to worry about anything else. It uses Exponent's open source tools to debug the application. To run the app, all you need to do is install the Expo Client app and scan a QR code. Although it is very quick to setup, everything seems like a black-box. Due to this, it can get pretty messy when you want to change a lot of configurations. Hence we do not recommend it for a long-term production application.
16
16
17
-
*__Expo__: It is a thirdparty framework which provides you with a lot of cool features like: sharing your app with anyone while your are developing it, live code changes on your real device by just scanning a QR, generating IPA/APK files for you. We do not recommend using this if your app uses a lot of third party native modules or you wish to hack around the native code since you don't get access to native code out of the box. Refer to this page to know more: [Why not Expo?](https://docs.expo.io/versions/latest/introduction/why-not-expo.html) Also, It supports only **android 4.4 and up.** which can be a big turn off if you user base has a large number of ** android 4.1 - 4.3** users.
17
+
*__Expo__: It is a third-party framework which provides you with a lot of cool features like sharing your app with anyone while you are developing it and showing live code changes on a real device by just scanning a QR code. We do not recommend using this if your app uses a lot of third party native modules or you wish to hack around the native code since you don't get access to native code out of the box. Refer to this page to know more: [Why not Expo?](https://docs.expo.io/versions/latest/introduction/why-not-expo.html) Also, it supports only **Android 4.4 and above**, which can be a big turn off if your user base has a large number of **Android 4.1 - 4.3** users.
18
18
19
-
*__react-native init:__ This provides you with the very basic setup of the application including native `ios` and `android` folders. This allows you to change native code if required. You would use native android/ios simulators or devices to run your application.You have 2 separate files which defines entry points for android and ios. You can run the dev version of the application by`react-native run-ios`\(It will open the ios emulator and run your app on it\). Here we will need to setup everything from scratch. But on the contrary we get full access to native code and have control over almost everything that is going on with our application. Another factor is, it is easier to upgrade `react-native` and other core libraries using this boilerplate as compared to others. Hence any critical updates can be integrated much easily. **Thus, we recommend this boilerplate for any long term production application**.
19
+
*__react-native init:__ This provides you with a very basic setup of the application including native `ios` and `android` folders. This allows you to change the native code if required. You would use native Android/iOS simulators or devices to run your application.You can run the dev version of the application with`react-native run-ios`\(it will open the iOS simulator and run your app on it\). Here we will need to setup everything from scratch. But on the contrary, we get full access to native code and have control over almost everything that is going on in our application. Also, it is easier to upgrade `react-native` and other core libraries using this boilerplate as compared to others. Hence any critical updates can be integrated much more easily. **Thus, we recommend this boilerplate for any long term production application**.
20
20
21
-
22
-
Setup instructions for **react-native init** can be found at https://facebook.github.io/react-native/docs/getting-started.html. Open up the page in a browser and select the second tab, **Building Projects with Native Code** and follow the instructions.
21
+
Setup instructions for **react-native init** can be found at https://facebook.github.io/react-native/docs/getting-started.html. You can find them at the **Building Projects with Native Code** section.
Copy file name to clipboardExpand all lines: 5-project-structure-and-start-building-some-app/5.0-intro.md
+11-9Lines changed: 11 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,11 @@
1
1
# Project structure
2
2
3
-
We will be creating a Note Taking App in React Native.Lets call it `NoteTaker`. By the end of this book we will be able to build and deploy the NoteTaker to the Android play store and the Apple app store for users to download.
4
-
We will begin with the standard react native boiler plate and as we progress through the concepts we will keep updating the app. Also, at the end of the book we will also show how to extend our app originally written in Android and IOS to any other platforms, for example: Web (because we just love web). So, Lets begin.
3
+
We will be creating a note-taking App in React Native. Let's call it `NoteTaker`. By the end of this book, we will be able to build and deploy the NoteTaker to the Android Play Store and the Apple App Store for users to download.
4
+
We will begin with the standard React Native boilerplate and as we progress through the concepts we will keep updating it. Also, at the end of the book, we will show how to extend our app originally written in Android and iOS to any other platforms, for example, web (because we just love web). So, let us begin.
5
5
6
6
### Boilerplate
7
7
To create a new project run `react-native init <project-name>`. Example: `react-native init notetaker`.
8
-
We will use this project as our base in this book.
8
+
We will use this as our base project in this book.
9
9
Once the project setup is complete you should have a project structure similar to this.
10
10
```
11
11
.
@@ -29,19 +29,19 @@ Once the project setup is complete you should have a project structure similar t
29
29
```
30
30
31
31
### Run the app
32
-
Firsty, lets run the project to see how it looks.
32
+
First, let's run the project to see how it looks.
33
33
34
34
Type the command
35
35
36
36
`react-native run-ios` - for running the app on iOS simulator
37
37
38
38
or
39
39
40
-
`react-native run-android` - for running the app on a connected android phone/emulator.
40
+
`react-native run-android` - for running the app on a connected Android phone/emulator.
41
41
42
-
Note that for `react-native run-android` to work, you should have an open android emulator or an android device with USB Debugging enabled connected to your laptop via a USB cable.
42
+
Note that for `react-native run-android` to work, you should have an open Android emulator or an Android device with USB Debugging enabled connected to your system via a USB cable.
43
43
44
-
If all goes well you should see the following screen on iOS or android emulator.
44
+
If all goes well you should see the following screen on your iOS or Android emulator.
45
45
46
46
<br>
47
47
<divstyle="text-align:center">
@@ -51,9 +51,11 @@ If all goes well you should see the following screen on iOS or android emulator.
51
51
<br>
52
52
53
53
If you noticed there are two entry point files `index.ios.js` and `index.android.js`.
54
-
Hence, when we run the command `react-native run-ios` the file `index.ios.js` serves as our entry point.
54
+
Hence, when we run the command `react-native run-ios`, the file `index.ios.js` serves as our entry point.
55
55
56
-
Under the hood, when we run the command `react-native run-ios`, first the iOS native project inside `ios` directory is compiled. Along with the native project react-native packager kicks in on another terminal window and runs on port `8081` by default. The packager is responsible for compilation of javascript code to a js bundle file. When the native project is successfully launched on the simulator, it asks the packager for the bundle file to load. Then all the instructions inside the js code is run to successfully launch the app.
56
+
_**Note: The above is applicable only to React Native 0.49 and below. Later versions have only one entry point `index.js`**_
57
+
58
+
Under the hood, when we run the command `react-native run-ios`, the iOS native project inside `ios` directory starts compiling. Along with the native project, react-native packager kicks in on another terminal window and runs on port `8081` by default. The packager is responsible for the compilation of JavaScript code to a js bundle file. When the native project is successfully launched on the simulator, it asks the packager for the bundle file to load. Then all the instructions inside the js code are run to successfully launch the app.
0 commit comments