Skip to content

Instantly share code, notes, and snippets.

@psatler

psatler/NodeReactReactNativeSetup.md

Last active March 28, 2020 16:53
Show Gist options
  • Save psatler/a77bebc0f362ccb483874ffd5877777a to your computer and use it in GitHub Desktop.
Save psatler/a77bebc0f362ccb483874ffd5877777a to your computer and use it in GitHub Desktop.
Download ZIP
Environment setup for VSCode, Node, React and RN.md
Raw
NodeReactReactNativeSetup.md

DISCLAIMER: The steps below were done on the Ubuntu OS.

Terminal Setup

You can follow this guide (in Pt-BR). And here you can find a .zshrc file example.

Docker Setup

We are going to use the Docker CE (Community Edition). For the Ubuntu distro, follow this guide.

You might want to continue to the post installation steps for linux here such as adding Docker to the users group.

VSCode

Below some extensions

  • color highlight
  • dotenv
  • EditorConfig for VS Code
  • ESLint
  • GitLens
  • GraphQL (prisma.vscode-graphql)
  • live server
  • live share (Real-time collaborative development)
  • Material Icon Theme
  • vscode-styled-components
  • Rocketseat ReactJS
  • Rocketseat React Native

Other settings can be found at this gist, and also at this youtube video

TIPS

  • to select identical strings: ctrl + D
  • to insert the cursor where you click on the file: alt + click
  • the keyboard shortcut move line down/up: with alt + down arrow or alt + up arrow
  • on linux, the Copy Line Down shortcut I change it to Alt + Shift + Down Arrow
  • toggle line comment: Ctrl + /
  • to cut the line (on Linux): Shift + Del
  • toggle integrated terminal: Ctrl + '

Nodejs and NPM

Using NVM to install nodejs.

To install, follow these instructions. You might need to copy the shell script to the .zshrc file if you use a ZSH terminal.

You can check the installation by typing nvm -h on the terminal.

Next, you can install the node by following the usage section. You can refer to the Nodejs website to check the LTS version of Node.

To set a certain version as default for the system, you can do nvm alias default <version>

for Windows

For Windows using Chocolatey, you can follow these instructions

Yarn

On the Ubuntu distro, you can follow these steps. So, first, run the command below:

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

Then, run the following, avoiding the node installation as we've already installed it via NVM:

sudo apt update && sudo apt install --no-install-recommends yarn

Reactjs

To be done!

React Native

  1. First, follow the instruction from reactnative.dev website to install nodejs, android sdk, etc. The nodejs steps can be found above (using NVM).
  2. After installing all the necessary dependencies, if you want to run it in an actual device, you can follow the instructions here.
  • You'll need to give permissions to the phone as allowing USB Debugging for Android devices, for example.
  • If you run adb devices and see an authorized message, check your cell phone to allow USB Debugging for when attached to your computer
  • Using adb reverse command.

A good application for debugging React Native projects is Reactotron. You can download it by going to the releases page of its repository.

Another common platform used is the Expo CLI. Here are some common issues found when installing/using Expo and how to solve them.

More to come such as ESLint setup!!!

Some tools/programs used on development

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment