¿Cuál es el mejor editor para escribir código React y React-Native?

En general, mi respuesta se basa en mi experiencia, ya que dirijo una empresa de desarrollo de software ReactJS / React-Native y utilizamos diferentes editores de texto para poder darle una idea más amplia de cómo funciona en nuestra empresa de desarrollo de aplicaciones We Are Developing Mobile Apps 🙂

Contestaré las preguntas en dos partes : ReactJS one y luego React Native related one.

*** Detalles de configuración de ReactJS ***

Mi primera pregunta: ¿estás usando un editor de texto con otras tecnologías? Solo manténgase, probablemente ya tenga los complementos de resaltador de sintaxis ES6 y JSX.

Qué y por qué usamos en nuestra empresa:

1) Sublime Text 2/3 y Babel-sublime plugin

Lo usamos principalmente porque es un hábito. Una buena alternativa es el Atom IDE (descrito más adelante). Para una sintaxis adecuada en Sublime Text, debe instalar un complemento: babel / babel-sublime: así es como la sintaxis JSX y ES6 se resaltará en Sublime Text + Babel Plugin:

2) Tormenta web

WebStorm es probablemente el segundo editor de texto de elección. En primer lugar, puede probar ese editor de texto con su período de prueba de prueba gratuito, pero después de eso cuesta lo siguiente (precios desde septiembre de 2016):

– € 129.00 / 1er año

– € 103.00 / 2do año

– € 77.00 / 3er año en adelante

Como puede ver arriba, tienen un esquema de descuento de lealtad para sus usuarios pagos 🙂 … la principal ventaja sobre el texto sublime es que Webstorm es mucho más personalizable … el inconveniente es que debe tener una mejor CPU / RAM a medida que la personalización aumenta. requisitos (creo que WebStorm se ha creado en Java, por lo que es una de las razones por las que la CPU es tan intensa).

3) átomo

¿Estás abierto a nuevas opciones para tu IDE? Luego elija Atom: es gratis y ese IDE se ha escrito en JavaScript (se ha creado en Electron).

¿Qué ventajas hay detrás de Atom? De forma predeterminada, está conectado a su cuenta de GitHub (integración de Git), puede modificarlo en CSS (porque es el IDE de JS) y el Administrador de paquetes es un poco más fácil de instalar que en Sublime Text.

Para ES6 y JSX sintaxis resaltador todavía necesita instalar el complemento llamado “language-babel”. Este es el ejemplo del código React resaltado en el IDE de Atom:

Una característica interesante del Atom IDE es que puede abrir una consola de desarrollo (como en Chrome, por ejemplo) donde puede depurar y cambiar los estilos CSS del IDE (el acceso directo que abre la consola de desarrollo es Ctrl + Alt + I). Puede ser útil si hay algo molesto para que pueda cambiarlo utilizando sus conjuntos de habilidades JS + CSS para mejorar el Atom para sus necesidades personales.

4) SOLO PARA React Native: Deco IDE ( Deco – React Native IDE)

Como afirman en su sitio web, es “el mejor IDE para crear aplicaciones React Native ahora es gratuito y de código abierto”. Tiene algunas características agradables, pero por ahora solo es compatible con los usuarios de OS X (sin versión de Linux o Windows, hasta ahora en septiembre de 2016). Aquí está la captura de pantalla:

Como puede ver en el menú del lado derecho con el título “PHOTO GRID”, puede cambiar los accesorios con algunos “botones de radio”. Le brinda información inmediata sobre qué componentes React Native tienen qué propiedades. Hay una demostración animada en su sitio web ( Deco – React Native IDE).

*** Reaccionar configuración nativa ***

Para ambos, la sintaxis React (RN y ReactJS) es exactamente la misma, por lo que todo lo que se ha escrito anteriormente también funciona para React-Native. Le daré un ejemplo basado en la Guía Tutorial Gratuita React Native Amazing … Esta es la aplicación “tablero” que se ha hecho funcionalmente tanto en:

NOTA: los ejemplos de una aplicación de panel de control muestran cuán similar es el desarrollo de ReactJS y React Native, pero esta es una historia más larga para otra respuesta.

1) Aplicación ReactJS Dashboard (haga clic en reproducir para iniciar la demostración de animación web de la aplicación de tablero):

2) Reaccionar la aplicación Native Dashboard (haga clic en reproducir para iniciar la demostración de animación de la aplicación móvil del tablero):

Nota: La animación anterior se realizó grabando el Simulador de iOS proporcionado por xCode en el OS X.

AMBOS ejemplos de aplicaciones de “tablero” se han hecho con el mismo IDE que se enumera en la parte ReactJS.

Lo adicional que necesita además del IDE son las herramientas:

para el desarrollo de iOS necesita un OS X y el xCode (con el simulador de iOS – Xcode 8 – Novedades – Apple Developer)
para el desarrollo de Android React Native necesita un Android Studio (Descargar Android Studio)

CÓMO EJECUTAR EL proyecto React Native es otra historia, así que si está interesado en esa parte, visite la Guía de tutoría gratuita React Native Amazing para los tutoriales de texto y video

RESUMEN: como puede encontrar las partes IDE no es tan importante en el desarrollo ReactJS y React Native. Si tiene su favorito, simplemente manténgalo. Lo más complicado para los nuevos desarrolladores de React Native es ejecutar su primer kit de inicio React Native, ya que el resto del trabajo es casi exactamente el mismo que en el desarrollo web ReactJS con Hot Reload, Webpack, etc.

PD: no olvides seguirme en Quora 😉