React Native development environment on Ubuntu 16.04

By Hans C. Poo, hans@welinux.cl

Having a good development enviroment: styling, syntax validation, hot code reloading, etc. is very important for joy and productivity of programmers, but configuring one is very specific and not easy. If you follow this tutorial you should end up with a nice Atom and Ubuntu Linux environment for working with React Native, it’s mostly free software for Linux Ubuntu 16.04 and is dedicated to the Android part of React Native development.

This tutorial cover three different timed tasks:

  1. Once for the machine.
  2. Once per Project.
  3. Every time you want to program.

Once for the machine

Android Studio and emulator

1.- Download and Install Android Studio and then Create an Emulator (Android Virtual Device AVD) in: Tools > Android > AVD Manager. This may take some time, do it with a good internet connection and 8GB of space on disk al least, note that the folder
~/Android is created after this process, we’ll use it further.

Ref: https://developer.android.com/studio/index.html?hl=es-419

Emulator Name

From the console take note of the name of the created emulator, we’ll need it later.

cd ~/Android/Sdk
./tools/bin/avdmanager list avd | awk '/Name:/ {print $2}'

Start up the emulator from command line

In our case the emulator created was Nexus_5X_API_26.

cd ~/Android/Sdk
./emulator/emulator -avd Nexus_5X_API_26

Activate live reloading in the emulator

The next instruction will send a control key to the emulator opening and advanced menu, here you must enable live reloading and hot realoading for better developer experience.

adb shell input keyevent KEYCODE_MENU

Ref: https://stackoverflow.com/questions/36933287/how-to-enable-live-reload-in-react-native-on-android

Install nodejs 8, npm y yarn

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

Ref: http://nodesource.com/blog/installing-node-js-8-tutorial-linux-via-package-manager/

Yarn

yarn is the recommended package manager much faster than npm, they are compatible you can use both.

sudo npm install -g yarn

Install command CLI to create react native projects

npm install -g create-react-native-app

Ref: https://github.com/react-community/create-react-native-app

Atom

wget https://atom.io/download/deb
sudo dpkg -i atom-amd64.deb

Ref: https://atom.io

Validating java script code while you type

With Atom Package Manager install linter, enabling code style validation while you write.

apm install linter linter-eslint

Once per project

Ready, let’s create a project in ~ (my home directory)

cd ~
react-native init MyProject

Confiig eslint in the project

cd ~/MyProject

Install a module with javascript rules for eslint.

npm install --save-dev eslint-config-rallycoding

Create eslint configuration file .eslintrc enabling those rules

cat<<EOF>.eslintrc
{
"extends": "rallycoding"
}
EOF

Every time you want to program

Boot up the emulator

cd ~/Android/Sdk
./emulator/emulator -avd Nexus_5X_API_26

Boot up the project

cd ~/MyProject
react-native start
&& react-native run-android

Start up Atom and begin to program

cd ~/MyProject
atom .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>