2 Steps to Setup Visual Studio Code Editor for React Native Development

Here are the 2 Steps to Setup Visual Studio Code Editor for React Native Development. To know more about the code editor for React Native Development please visit Choosing Code Editor for React Native Development.

Visual Studio Code is a source code editor developed by Microsoft. It is free and open-source also includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.

  • Platform: Windows, Mac, Linux.
  • Features:
    • Git commands built-in.
    • Extensible and customizable.
    • Code debugging right from the editor

2 Steps to Setup VS Code Editor

Here are the 2 steps to Setup VS Code Editor for React Native development

1. Installation of Visual Studio Code Editor

To start working with Visual Studio Code go to https://code.visualstudio.com/Download and download the Visual Studio Code setup as per your OS.

1.1. Windows user:

To install VS code editor in Windows you can download the executable file and follow the installer instructions to install the editor.

1.2. Linux users:

To install VS code editor in Linux operating system you can download the .deb file (code_1.XXX.deb) and can run the following command on the terminal to install it in your Linux machine.

For Example, my .deb file is in the Downloads directory so the command will become

After running the above command run the following command

This will install the Visual Studio Code on your machine. Now you can search for it from the search menu or in your program files.

Click on the icon and here we go.

We are almost ready to open the integrated terminal of Visual Studio Code use ctrl+` or just go to “View” and then “Integrated terminal” click on it and you will get terminal right below your code.

2. Installation of Additional Extensions

You will also need to install some of the extensions that don’t get installed at the time of Visual Studio installation to work in react environment.

You can search and install as many extensions as you can but here are the must-have packages which will help you a lot:

  • ReactNative Tools – This extension provides a development environment for React Native projects. You can debug your code, quickly run react-native commands from the command palette and use IntelliSense to browse objects, functions, and parameters for React Native APIs.
  • Babel JavaScript Which is fundamental for proper styling, since we’ll use “future-JS” (ES6+).
  • ESLint (which requires ESLint, obviously) A Linter is conceptually a tool that runs through your code and tells you what you can do to write it “better”.
  • Prettier — JavaScript formatter Which is helpful to format your code.

If you have any doubt or you want to share something about the topic you can comment below or contact us here.

Hope you liked it. 🙂

 

3 Steps to Setup ATOM Code Editor for React Native Development

Here are the 3 Steps to Setup ATOM Code Editor for React Native Development. To know more about the code editors for React Native Development please visit Choosing Code Editor for React Native Development.

ATOM code editor is a modern, approachable, yet hackable editor made for the 21st century. Atom is widely used by developers for all major technologies. It has a huge active community hence there are always enhancements/plugins available for everything.

  • Platform: Windows, Mac, Linux.
  • Features:
    • Cross-platform editing
    • Built-in package manager
    • Smart auto-completion
    • File system browser
    • Multiple panes
    • Find and replace

3 Steps to Setup ATOM Code Editor

Here are the 3 steps to Setup ATOM Code Editor for React Native development

1. Installation of ATOM Code Editor

To start working with ATOM go to https://atom.io and download the ATOM setup as per your OS.

1.1. Windows User:

To install ATOM code editor in Windows you can download the executable file and follow the installer instructions to install the editor.

1.2. Linux Users:

To install ATOM code editor in Linux operating system you can download the .deb file (atom-amd64.deb) and can run the following command on the terminal to install it in your Linux machine.

For Example, my .deb file is in the Downloads directory so the command will become

After running the above command run the following command

This will install the Atom code editor in your machine. Now you can search for the Atom from the search menu or in your program files.

Click on the icon and here we go.

2. Installation of Packages in ATOM Code Editor

ATOM IDE is a set of optional packages (You can find them here) to bring IDE like functionality to ATOM and improve language integrations.

Let’s see how to install a package in ATOM.

2. 1. Installation of Packages (From Code Editor’s Setting)

In order to install a new package, you can use the Install tab in the now familiar Settings View. Open up the Settings View using Ctrl+, click on the “Install” tab and type your search query into the box under Install Packages.

You can also find other options here like basic editor settings, theme, updates, shortcut etc.

All of the packages will come up with an “Install” button. Clicking that will download the package and install it. Your editor will now have the functionality that the package provides.

Once a package is installed in Atom, it will show up in the Settings View under the “Packages” tab, along with all the preinstalled packages that come with Atom. To filter the list in order to find one, you can type into search box directly under the “Installed Packages” heading.

Clicking on the “Settings” button for a package will give you the settings screen for that package specifically. Here you have the option of changing some of the default variables for the package, seeing what all the command keybindings are, disabling the package temporarily, looking at the source code, seeing the current version of the package, reporting issues and uninstalling the package.

If a new version of any of your packages is released, Atom will automatically detect it and you can upgrade the package from either this screen or from the “Updates” tab. This helps you easily keep all your installed packages up to date.

2.2. Installation of Packages (From Command Line Interface)

You can also install packages or themes from the command line using apm(atom package manager).

Check that you have apm installed by running the following command in your terminal:

You can also install packages by using the apm install command:

You can also use apm to find new packages to install. If you run apm search, you can search the package registry for a search term.

You can use apm view to see more information about a specific package.

You can search and install as many packages as you can but here are the must-have packages which will help you a lot:

  • React React.js (JSX) language support, indentation, snippets, autocomplete, reformatting
  • atom-react-native-autocomplete package – It is a package for React-Native autocomplete for Atom text editor.
  • atom-react-native-css – It is a package to style React-Native components with built-in support for SASS/SCSS. React-native-css turns valid CSS/SASS into the Facebook subset of CSS.
  • react-native-snippets – It is a package for React Native snippets for Atom and Nuclide.
  • zenchat-snippets – It is a collection of snippets for react-native, redux and ES6.
  • atom-xcode – This package bridges the gap between Mac Xcode and atom. Once installed, the iOS simulator can be controlled from within the atom itself.
  • language-babel – This package includes Language grammar for all versions of JavaScript including ES2016 and ESNext, JSX syntax as used by Facebook React, Atom’s etch and others.

3. Installation of Nuclide Plugin in ATOM Code Editor

Nuclide is a plugin of Atom text editor, made by Facebook. It is very useful to develop React Native apps. (Update on Feb 26, 2018: Nuclide dropped the support of debugging Node.js and React Native in June 2017 and brought it back in early 2018.)

Nuclide has built-in support for the React Native framework. It is a very useful ATOM package with features like Built-in Debugging and Remote Development.

To install nuclide you can search for nuclide in the packages and can install or can run the following command to install view command line.

After the successful installation, you can see nuclide in the Atom’s menubar.

After installing it you can connect to the device which you want to debug and can use the following options

For Android Debugging

You can see Nuclide > ADB Logcat > start/stop/restart

For iOS Debugging

You can see Nuclide > iOS Simulator Logs > start/stop/restart

It will open a terminal below which will show all your console.log and other logs.

We will see the further installations and the usefulness of all this stuff in the upcoming post. If you have any doubt about the topic you can comment below or contact us here.

Hope you liked it. 🙂

Top 2 Code Editors For React Native Mobile App Development

After setting up the development environment we have to decide which Code Editor we can use to develop our React Native Application. Here are the Top 2 Code Editors For React Native Mobile App Development. You can use any of the Code Editors to start development.

Basically, React development don’t need any specific code editor, you can use any code editor which will help you to work with JavaScript but a Choosing Code Editor for React Native Development which is customizable and rich in the feature can increase your development speed.

There are so many editors which are available for the React Native development but here we want to introduce only two of them, which are good in performance and best for the React Native App debugging but that doesn’t mean rest are not good.

We are just filtering out the simple to install and easy to operate code editors for the beginners and for those who are confused about what to choose. Due to the support of a very large community both are mostly used code editors.

We just want to mention that we are not in the big fans of both the editors and also don’t want to promote them.
We just want to introduce them because we found both the code editors are very developer friendly.

  1. Atom + Nuclide (Nuclide is an additional package of Atom which can be added in Atom after installation)
  2. Visual Studio Code.

1. Atom

Atom is a text editor that is modern, approachable, yet hackable editor made for the 21st century. Hence developers from all major technologies love to use Atom. It has a huge active community above all there are always enhancements/plugins available for everything.

  • Platform: Windows, Mac, Linux.
  • Features:
    • Cross-platform editing
    • Built-in package manager
    • Smart auto-completion
    • File system browser
    • Multiple panes
    • Find and replace

You can find the installation guide for Atom code editor here.

2. Visual Studio Code

Microsoft developed  Visual Studio Code is a source code editor. It is free and open-source and includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring.

  • Platform: Windows, Mac, Linux
  • Features:
    • Git commands built-in
    • Extensible and customizable
    • Code debugging right from the editor

You can find the installation guide for Visual Studio Code editor here.

You can choose any of the above code editors for the React Native Development in our upcoming tutorials.

If you have any doubt about the topic you can comment below or contact us here.

Hope you liked it. 🙂