Skip to content

Instantly share code, notes, and snippets.

@isumizumi

isumizumi/Preps-RN.md

Last active May 5, 2023 05:10
Show Gist options
  • Save isumizumi/4a99b814a7eadd6a5bf59c548b7cac93 to your computer and use it in GitHub Desktop.
Save isumizumi/4a99b814a7eadd6a5bf59c548b7cac93 to your computer and use it in GitHub Desktop.
Download ZIP
Preps - React Native
Raw
Preps-RN.md

Binar Academy

RN Class Preparation

In RN class, you need these stuff to be installed:

  • Linux --> Debian Based
    • Linux Mint
    • Ubuntu 18.04 LTS (recommended)
    • Elementary OS
    • Zorin OS
    • Lubuntu
    • Kubuntu
    • Etc
  • For MacOS: Mojave (10.14)
  • Node.js: 8 or newer (13.13.0)
  • NPM: 5 or newer (6.14.4)
  • Yarn: 1.22.4
  • Java or OpenJDK: 8 or newer (openjdk version "1.8.0_242")
  • Android Studio: 3.5 or newer (3.6)
  • Android SDK API: 16 or newer (28)
  • Visual Studio Code
  • React-native: 0.62
  • Xcode: 10.13 (only for MacOS)

Beside that, I recommend that you prepare the hardware specifications with this following conditions:

  • Processor >= Core i5
  • RAM >= 8Gb
  • Free Disk space >= 40Gb (SSD is better than HDD)

(Notice: if your hardware spec doesn't meet the above conditions, you must be very patient. I mean it.. lol..)

Table of Content

Node.JS Installation

We need node.js to run Javascript in our machine.

What is Node.JS?

Node.JS is a runtime environment that will let you run Javascript directly in your machine. It means that allows you to write server-side applications in Javascript.

You might wonder, we are able to run Javascript without Node, then why do we need Node.JS? Natively, Javascript only runs on web browser, that was why we need Node.JS. Node.js was built by using V8 Engine of Chrome Browser (The fastest Javascript Engine)

Why do we need Node.JS in React?

Discussion on Stackoverflow

There are four types of JavaScript you'll write in todays environments:

  1. Client side browser JavaScript: That's what gets sent to web browsers when they visit your webpage, it then gets executed in the browser at the client side. As you want the JS to load fast and run on all kinds of browsers, you usually use transpilers to turn the modern JS you write into a minified version with better support.

  2. Client side native JavaScript: Most devices do have a native JS runtime, therefore you can ship JS files with your Android / iOS / Desktop application and then start them there. These engines also support adding hooks from JavaScript into your native code, that's how React Native does provide it's APIs.

  3. Server side NodeJS JavaScript: NodeJS is a runtime you'll use to run servers.

  4. Buildscripts running on NodeJS: You can use JavaScript to generate JavaScript files. That's how you bundle the files for (1) and (2) (maybe also (3)).

Now metro is a server side buildscript (on NodeJS) that you can use to either: a) start a server that serves your JS as a webpage (1 & 3), or b) that bundles your JS in a native App that you can install on your device (2).

You might wonder, so the role of Node.js in RN is to only access npm and manage the packages? No. metro is itself a package that you then run on NodeJS.

Discussion on Quora

React is has 2 things:

  1. Client side rendering
  • You need only webpack here to bundle, compile, transpile the code.
  • You would need npm to download the packages. But to initialise the npm we need the Nodejs.
  • Although you can download the packages and add to your library (we can use yarn). So, Nodejs is not compulsory, but I recommend you to use it.
  • Lastly answering actual question: React is a open source library to create reusable views. So, you need just a library and to test it you need browser thats all.

2.Server Side Rendering:

  • As Single Page Applications are not so friendly with SEO.
  • People now a days prefer to render pages from server side.
  • In this scenario you are advised to use Nodejs as a server side Platform as it has modules to work for you.

5 Reasons to use Nodejs with React for Web Development

Here are the top 5 reasons to use Nodejs and Reactjs together to make your code highly efficient and scalable:

  1. High server load: Using Nodejs with React makes sense when your web application needs handling of multiple requests and maintaining server load balance.

  2. Real-time data: If your application’s core is based on Real-time Data-Intensive management or Data Streaming, using Nodejs is highly advisable for continued server connection.

  3. JSON APIs: Building JSON APIs for your application is very efficient with Nodejs due to high code reusability and easy code sharing in Reactjs.

  4. Single Page Applications (SPA): Developing Single Page Applications in React while using Node to build a lightweight backend model for asynchronous data loading through callback functions.

  5. MERN stack: Nodejs can also be used with React with MERN (MongoDB, Express, React, and Nodejs) stack.

How to install Node.JS?

Since, node.js is constantly updating its version, that mean we can't do the convential installation like this.

sudo apt install nodejs

Use NVM (Node Version Manager)

To install using this method, we need to install NVM first in our machine. How to do that?

Install NVM

First, we'll install curl, then we install the NVM.

sudo apt update
sudo apt install curl -y
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

Install Node.Js Using NVM

Ah, now you have NVM installed in your machine, it's time to install the node.js on the specific version. We're going to install the 12.13 version, because it's LTS (Long Term Support).

nvm install 12.13

After installation close and reopen terminal and check nvm version:

nvm --version

You can check version of node and npm:

node -v
npm -

Test if its really installed in your machine

To test if node really running in your machine, copy this command and paste it to your terminal

node -e "console.log('Hello World')"

It should print hello world inside terminal.

Install Node.Js without NVM

Install NodeJS (13.12.0) & npm (6.14.4):

curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
sudo apt install -y nodejs

You can check version of node and npm:

nodejs -v
npm -v
npm list -g

Yarn Installation

Yarn is a package manager for your code. It allows you to use and share (e.g. JavaScript) code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Install yarn on terminal:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install yarn

You can check version of yarn:

yarn -v

Android Studio Installation

Android Studio provides the fastest tools for building apps on every type of Android device. Android studio needs to be installed for working with React Native development.

How to install Android Studio

Usually, Native Android apps build in Java. So, Java Development Kit is required.

On Terminal, run this command:

sudo apt install openjdk-8-jre openjdk-8-jdk

You can check version of java and javac:

java -version
javac -version

Install Android Studio

You can easily download it from this link: Download Android Studio

After download Android Studio. To launch Android Studio, open a terminal, navigate to the android-studio/bin/ directory, and execute studio.sh.

cd android-studio/bin
./studio.sh

Or another way... Btw, in ubuntu 18.04, snap command is provided which is containerised software packages that are simple to create and install on all linux distributions.

Snapcraft

So, actually you can download Android Studio easily using snap, but you have to install snap first.

sudo apt install snapd
sudo snap install android-studio --classic

You can select whether you want to import your previous Android Studio settings or not, then click OK.

Setup Android Studio

And then, you must configure build path in your .bash_profile or .zshrc.

If the .bash_profile file doesn't exist, you have to create it:

touch ~/.bash_profile

Then, you will edit the .bash_profile file:

sudo gedit ~/.bash_profile

Set the ANDROID_HOME environment variable to the location of your Android SDK installation: (copy-paste on .bash_profile)

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Reload bash_profile or .zshrc:

source ~/.bash_profile

or if you're using zsh:

source ~/.zshrc

Install SDK Platform

You need to install an SDK before you can jump into building Android apps. Click on Configure -> SDK Manager to open Android SDK Manager. Select the latest API in order to test against target build, e.g. API 28 ((Android 9.0 Pie), and the Android Support Library and Android Support Repository packages in Extras. Then install the selected packages.

Create AVD

You have to install and set KVM:

sudo apt install qemu-kvm 

sudo adduser isumi kvm

ls -al /dev/kvm

Restart your computer/laptop then re-open AVD Android Studio.

Create your own Virtual Device, for example:

My phone resolution (Samsung J6+): 720x1480, API 28 ((Android 9.0 Pie)

React Native Installation

Install react-native-cli using npm:

npm install -g react-native-cli

Or you can install using Yarn (recommended):

yarn global add react-native-cli

Create react-native project via react-native-cli:

react-native init AwesomeProject

Finally run your react-native project:

// Move to created project dir.

cd AwesomeProject

// Start react-native packager

npm start
or
yarn start

// open up another terminal and run android

react-native run-android

Visual Studio Code Installation

VS Code is a free code editor, which runs on the macOS, Linux, and Windows operating systems. Getting up and running with Visual Studio Code is quick and easy. It is a small download so you can install in a matter of minutes and give VS Code a try.

Follow this link: Setting up Visual Studio Code

VS Code Extension

VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. This topic explains how to find, install, and manage VS Code extensions from the Visual Studio Code MarketPlace.

You can browse and install extensions from within VS Code. Bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of VS Code or the View: Extensions command (Ctrl+Shift+X).

Follow this link: Managing Extensions in VS Code

You can use the following extensions that I installed in VS Code:

  1. HTML Boilerplate
  2. Live Server
  3. ES7 React/Redux/GraphQL/React-Native snippets
  4. Prettier
  5. ESLint
  6. Bracket Pair Colorizer
  7. Color Highlight
  8. Path Intellisense
  9. Code Time
  10. GitLens

Setup ESLint

You can follow this video tutorial: Setup Eslint in Javascript, ReactJS dan React Native

Or follow this article: Linting and Formatting with ESLint in VS Code

Or follow my steps:

  1. We will need to install it globally on our machine by running:
npm install -g eslint

Or install the ESLint extension on VS Code

  1. In VS Code, click Menu File -> Preferences -> Settings -> Click icon Open Settings (JSON) in tab menu

  2. Copy-paste this code in settings.json:

{
  "workbench.startupEditor": "newUntitledFile",
  "window.zoomLevel": 2,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": true
  },
  "prettier.disableLanguages": ["javascript", "javascriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

Notice Error

Don’t delete .bashrc, if deleted:

cp /etc/skel/.bashrc ~/.bashrc
source ~/.bashrc

Error ENOSPC:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Error EADDRINUSE:

ps aux | grep node 

#kill -9 {process_number}
Kill -9 12413

Deprecated Gradle:

  • Try these steps:
  1. Clear watchman watches: watchman watch-del-all (optional)
  2. Delete node_modules: rm -rf node_modules
  3. Run: yarn install
  4. Remove the cache: rm -rf /tmp/metro-*.
  5. Reset Metro's cache: yarn start --reset-cache
  • Or try these steps:

  1. Run (1st terminal): rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && yarn cache clean && yarn install && yarn start -- --reset-cache

  2. Run (2nd terminal): cd android/ && rm -rf .gradle/ && cd app/ && rm -rf build

    cd ../.. && react-native run-android

  • Or try these steps:
  1. Edit this file: cd android/app/build.gradle
defaultConfig {
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
multiDexEnabled true =====> (add this statement)
}
  1. Delete node_modules: rm -rf node_modules
  2. Run: yarn install
  3. Delete your .gradle folder and android/app/build folder
  4. Run: react-native run-android
  • Or try this:
sudo apt install gradle
gradle build --warning-mode all
  • Or try this:
cd android && ./gradlew clean && ./gradlew :app:bundleRelease
  • Or you can edit file in your RN project /android/build.gradle:
classpath("com.android.tools.build:gradle:3.6.3")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment