1. Tableau Business Intelligence

Top 10 Editors For React Native Mobile App Development

Discussion in 'Mobility Solutions' started by bsdinsight, Jun 8, 2017.

  1. bsdinsight

    bsdinsight Well-Known Member

    React Native is the current trend for making high quality, native and powerful mobile applications using JavaScript. Its hardly been a year since Facebook inc. released the React Native open source project, and it is amazing to see so much movement in terms of development, support, plugins, tools, integrations etc.

    There are so many code editors out there for development and it at times becomes difficult for me to choose the right editor for a particular programming language. While working with React Native, I did some digging and found useful IDE/editors perfect for mobile app development. I have listed the editors, its plugins and packages with details specifically for React Native.

    I currently use Sublime Text and Atom mainly because I am working on different languages and these editors provide support for a lot of programming languages. However, other editors are also worth looking at. Developers can select the best editor as per their convenience and choice.

    l_top-10-editors-for-react-native.png

    1. Nuclide

    l_nuclide-package.png
    Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects.

    2. Atom

    l_atom-editor.png
    • URL: atom.io
    • Github: atom
    • Documentation:
    • Platform: Windows, Mac, Linux
    • Licence: Open-source
    • Features:
      • Cross-platform editing
      • Built-in package manager
      • Smart auto-completion
      • File system browser
      • Multiple panes
      • Find and replace
    Atom is a text editor that's modern, approachable, yet hackable editor made for 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.

    Packages
    • atom-react-native-autocomplete package - It is a package for React-Native auto-completion 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. Sublime Text

    l_sublime-react.png
    Sublime Text is a sophisticated text editor for code, markup and prose. It offers lot of community developed plugins for extending its functionality. Sublime Text has been all time favourite editor for developers.

    Packages
    4. Visual Studio Code

    l_vscode-reactnative.PNG

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

    Extensions
    • React Native Tools - This extension provides a development environment for React Native projects. You can debug your code, quickly run react-nativecommands from the command palette and use IntelliSense to browse objects, functions and parameters for React Native APIs.
    5. Vim Editor

    l_vim_image.png
    • URL: vim.org
    • Github: vim/vim
    • Documentation:
    • License: Open Source
    • Platform: Mac, Linux
    • Features:
      • Persistent, multi-level undo tree
      • Extensive plugin system
      • Support for hundreds of programming languages and file formats
      • Powerful search and replace
      • Integrates with many tools
    Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems. Vim is loved by many developers for kinds of editing. Vim is rock stable and is continuously being developed to become even better.

    Plugins
    • vim-jsx - Syntax highlighting and indenting for JSX.
    • vim-react-snippets - A set of snippets for Vim to work with Facebook's React library.
    • vim-babel - A set of snippets for Vim to work with Facebook's React library.
    6. GNU Emacs Editor

    l_emacs.png
    • URL: gnu.org/software/emacs/
    • Documentation:
    • License: Free under GPL License
    • Platform: Windows, Mac, Linux
    • Features:
      • Content-aware editing modes, including syntax coloring, for many file types.
      • Complete built-in documentation, including a tutorial for new users.
      • Full Unicode support for nearly all human scripts.
      • Highly customizable, using Emacs Lisp code or a graphical interface.
      • A packaging system for downloading and installing extensions.
    An extensible, customizable and free/libre text editor.

    Extensions
    • web-mode.el - It is an autonomous emacs major-mode for editing web templates. It is compatible with many languages including JSX (React).
    7. Spacemacs Editor

    l_spacemacs-editor.png
    • URL: spacemacs.org
    • Github: syl20bnr/spacemacs
    • Documentation:
    • License: Open Source
    • Platform: Windows, Mac, Linux
    • Features:
      • Key bindings are organized using mnemonic prefixes
      • Discoverable - Innovative real-time display of available key bindings.
      • Similar functionalities have the same key binding everywhere
      • Simple query system to quickly find available layers, packages and more.
      • Community-driven configuration provides curated packages tuned by power users and bugs are fixed quickly.
    Spacemacs is a community-driven Emacs distribution - The best editor is neither Emacs nor Vim, it's Emacs and Vim!

    Extensions
    • React layer - ES6 and JSX ready configuration layer for React. It will automatically recognize .jsx and .react.js files. One package layer for React integration.
    8. Deco IDE

    l_Deco_IDE_for_React_Native.png
    Deco is an IDE for React Native. It's an all-in-one solution for writing React Native apps that you can download and use without any environment setup. Deco improves the React Native development workflow by focusing on component reuse and enabling you to edit your UI in real time.

    9. WebStorm

    l_WebStorm_React_Native_Editor.png
    • URL: jetbrains.com/webstorm/
    • Documentation:
    • License: Paid (US $129.00 for single user/first year)
    • Platform: Windows, Mac, Linux
    • Features:
      • Intelligent Coding Assistance
      • Support for Latest Technologies
      • Version Control System
      • Seamless Tool Integration
      • Debugging, Tracing and Testing
      • Built in Terminal
    WebStorm is built on top of the open-source IntelliJ Platform, which JetBrains have been developing and perfecting for over 15 years. It offers the tight integration with VSC, Local History feature, has a vibrant plugin ecosystem, is completely configurable, and has much, much more to offer. WebStorm offers advanced support for React and JSX, and can provide you with core coding assistance for React Native apps.
     
  2. Loading...

    Similar Threads Forum Date
    Top 5 text editors to ease web development Công nghệ Jul 31, 2017
    Tổng hợp vài thứ khi chơi với ReactNative Mobility Solutions Aug 20, 2017
    6 Tips You Want to Know About React Native Performance Mobility Solutions Jun 9, 2017
    Tổng hợp các bộ công cụ bắt đầu lập trình React Native dễ dàng Mobility Solutions Jun 6, 2017
    [React-Native] Overview and Getting Started Mobility Solutions Jun 6, 2017

  3. bsdinsight

    bsdinsight Well-Known Member

    10. TextMate Editor

    l_textmate_editor.png
    • URL: macromates.com
    • Documentation:
    • License: Paid (48.75 EUR for single user licence)
    • Platform: Mac
    • Features
      • CSS-like Selectors to Pinpoint the Scope of Actions and Settings
      • Function Pop-up for Quick Overview and Navigation
      • Plug-able Through Your Favourite Scripting Language
      • Run Shell Commands from Within a Document
      • Themable Syntax Highlight Colors
      • Works Together With Xcode and Can Build Xcode Projects
    TextMate is not an IDE but by using its powerful snippets, macros, and unique scoping system, it can often provide features that even a language specific IDE lacks. React is not directly supported but with the plugin listed below, one can easily get support for JSX on which most of the React code is based.

    Plugins
    All the code editors are rich with powerful features. They are ready to adapt the React Native environment with the plugins and extensions mentioned with each editor.

    Most of the editors covered in the article are already very popular, hence while migrating to React-Native, we don't have to migrate to a different code editor. That such a big relief, isn't it?

    React and React Native have seen an overwhelming response from the developers. Many tools are community developed and hoping to see much more support for these technologies.

    Spread the word - Feel free to re-tweet and share the article. If you think there is any other editor out there that we have missed here, please tweet at @icicletech and let us know. Happy Developing !
     
: React Native

Share This Page