React: su guía completa para principiantes sobre el uso de ReactJS

¿Has oído hablar de ReactJS pero no sabes por dónde empezar? ¿Has empezado a jugar con ReactJS pero no sabes cómo usarlo en tu día a día? Este artículo será su guía para aprender y dominar la biblioteca React JavaScript, la biblioteca más popular utilizada por los desarrolladores en la actualidad. Le mostraré exactamente cómo comenzar con ReactJS y cómo integrarlo en su flujo de trabajo para que pueda crear interfaces de usuario más dinámicas sin tener que desviarse innecesariamente a través de otro marco o biblioteca. ¡Empecemos!

¿Qué es ReactJS?

React es una biblioteca de desarrollo front-end que lo alienta a crear componentes reutilizables. Si está buscando una forma eficiente de crear interfaces de usuario, React podría ser justo lo que necesita. Al crear interfaces de usuario con Vanilla JavaScript o jQuery, su código puede volverse muy complicado y difícil de manejar muy rápidamente. Al usar React y su método preferido de desarrollo basado en componentes, su código será mucho más fácil de reutilizar y mantener.

De hecho, una vez que haya creado algunos componentes, es relativamente fácil para otros desarrolladores de su equipo participar y contribuir con el código sin tener ninguna experiencia (o conocimiento) de React.

Recomendado para usted: 5 consejos valiosos para optimizar el rendimiento de la aplicación React Native.

¿Por qué usar ReactJS?

En primer lugar, tiene una opción frente a usted cuando se trata de marcos de JavaScript. Entonces, ¿por qué elegirías React? Bueno, para empezar, cuando se trata de ayudar a los desarrolladores a crear aplicaciones grandes que los usuarios finales puedan comprender y utilizar fácilmente.

Para los desarrolladores que hasta ahora solo han trabajado con jQuery o Vanilla JavaScript, aprender a trabajar con nuevas tecnologías puede ser frustrante. En algunos casos, los desarrolladores pueden necesitar cientos de líneas de código solo para crear un cuadro modal simple o una barra de navegación. Debido a que React usa DOM virtual en lugar de escribir y reescribir elementos DOM reales cada vez que hay un cambio de estado (como se hace a menudo en Angular), usar React puede ahorrar un tiempo valioso al permitir menos líneas de código y al mismo tiempo hacer que sus aplicaciones sean más rápidas de lo que eran. antes.

Instalarlo en un navegador

Antes de poder usar React en un navegador, debe instalarlo. Afortunadamente, es un proceso simple gracias a npm y Browserify. ¿Usando Node u otro entorno del lado del servidor? También puede usar npm y Browserify para eso también. Una vez que tenga todo instalado, cree un archivo HTML con su editor de texto favorito. De lo contrario, use un generador repetitivo como Create-React-App que crea un proyecto de inicio básico para usted que ya tiene todas estas cosas configuradas.

Convertir App.js para usar ReactJS

Todo nuestro código se encuentra actualmente en un solo archivo llamado App.js. Pero eso hace que sea difícil de probar. Entonces, dividámoslo en varios archivos. Comenzaremos por convertir un componente de escrito en ES6 a escrito en JSX. Es más fácil si mantenemos todos nuestros componentes de React en un solo directorio (lo cual deberías hacer). Entonces, vamos a crear un directorio src/components vacío y mover App.js a él: mv app/App.js src/components/app-react.js. Luego cámbiele el nombre a app-react.js.

Para usar React en lugar de solo ES6, cambie el uso estricto; en la parte superior de su archivo para usar babel; También deberá instalar Babel a través de npm install –save babel-CLI babel-preset-es2015 babel-preset-react, lo que hará que Babel compile su nueva sintaxis JSX.

Comience a construir con nuestra aplicación de muestra

Hay muchas maneras de comenzar con React, pero una de nuestras favoritas es crear una aplicación simple de lista de tareas pendientes. Para que pueda moverse rápidamente y evitar muchos errores comunes, creamos una aplicación de muestra en la que todo lo que tiene que hacer es intercambiar el código de back-end y los componentes de front-end. Viene equipado con todo lo que necesita, incluidas las imágenes, para asegurarse de que se vea tan bien como funciona.

¿No tienes ganas de codificarte tú mismo? ¡Ningún problema! De hecho, puede copiar todos nuestros componentes siguiendo estos sencillos pasos. Una vez que los haya copiado en su proyecto, ¡simplemente modifíquelos para adaptarlos a sus propósitos! ¡La decisión es tuya! Echa un vistazo a las tres opciones de inicio aquí.

Ejemplo básico usando componentes

Si observa cualquier aplicación web, una de las primeras cosas que notará es que cada elemento está separado. En una página típica, hay diferentes encabezados, pies de página, logotipos y botones. Sin embargo, cuando trabaja con React.js, en lugar de usar varios elementos HTML para cada componente de su página, puede usar un solo elemento HTML para representarlos a todos. Esto puede parecer contradictorio; después de todo, ¿no es eso lo que hemos estado haciendo durante años?

Te puede gustar: Facebook JavaScript Engine (Hermes) mejora React Native en Android.

Introducción a la sintaxis JSX

JSX no es un lenguaje de programación como JavaScript o TypeScript, sino una sintaxis diseñada como una extensión de JavaScript. Por eso, es importante que los nuevos desarrolladores entiendan cómo funciona y dónde pueden usarlo. El código JSX está escrito de una manera que se parece mucho a HTML, lo que hace que el código JSX sea un excelente primer paso para los nuevos desarrolladores que están aprendiendo ambos lenguajes a la vez. Para obtener más información sobre lo que hace que JSX sea único y cómo puede dominarlo fácilmente, lea nuestro tutorial completo de ReactJS.

Para comenzar a construir su primer proyecto React, cree un nuevo directorio escribiendo mkdir react_tutorial dentro de su terminal. Una vez que termine de ejecutarse, navegue a su directorio recién creado escribiendo cd react_tutorial. Luego abra su terminal e inicie Node.js escribiendo node -v.

Debería ver v10.x en la lista junto a Node si tiene Node instalado correctamente. De lo contrario, intente usar nvm install 10 si está usando macOS o Linux. Si eso tampoco funciona, ¡entonces Google debería poder ayudar a descubrir qué está mal allí! Una vez que Node esté instalado correctamente con la versión 10+, ¡estaremos listos para continuar con la creación de nuestro proyecto desde cero!

Estático vs Dinámico vs PureComponent

Al crear aplicaciones web con JavaScript moderno, tiene tres opciones principales para crear componentes de interfaz de usuario. Estos incluyen HTML estático (react-markup), solicitudes dinámicas de AJAX (react-data) y mediante la reutilización de elementos DOM existentes (react-pure). Cada método tiene sus propios méritos y se puede aplicar de manera diferente según su caso de uso específico.

Por ejemplo, si sabe que ciertos elementos siempre estarán disponibles, puede colocarlos en etiquetas HTML estáticas. Sin embargo, si necesita obtener contenido de bases de datos que quizás aún no existan, el uso de datos de reacción es una mejor opción. Al decidir qué método de creación de componentes se adapta mejor a su proyecto, es importante pensar en qué tan estable y permanente será cada parte de su aplicación.

Métodos de ciclo de vida en componentes ReactJS

Hay un puñado de métodos de ciclo de vida que puede usar dentro de sus componentes para controlar diferentes partes de su ciclo de vida. El método componentWillMount() se llama inmediatamente antes de que se represente un componente por primera vez. Dentro de él, puede agregar cualquier inicialización que necesite para su componente, como guardar información usando localStorage. El método componentDidMount() también se llama inmediatamente después de montar y renderizar un componente. Aquí, puede agregar código que debería ejecutarse una vez que un componente se haya inicializado por completo (por ejemplo, creando nuevas solicitudes de red).

Estado de manejo en componentes

La forma en que Reacts aborda la gestión del estado es algo única. Para entender por qué, primero debemos considerar cómo la mayoría de los marcos manejan los estados.

Tradicionalmente, un desarrollador pensaría que el estado de un componente está almacenado dentro de sí mismo. Esto conduce a muchos problemas. Si un componente quiere actualizar el estado de otro componente, necesita una referencia (accesorios) a ese otro componente para poder hacerlo. Y si desea que sus matrices o objetos de estado permanezcan sincronizados entre los componentes, necesita algún tipo de almacén de datos centralizado o emisor de eventos al que puedan acceder todos los componentes.

Y si bien puede ser lo suficientemente simple para los componentes de una aplicación pequeña con solo dos o tres estados diferentes, ¿qué sucede cuando su aplicación tiene docenas de estados diferentes? ¿Cómo los gestionas todos?

Pasar datos del componente principal al componente secundario

Hay dos formas de pasar datos de un componente principal a un componente secundario: a través de accesorios o el estado. Pasar datos a través de accesorios puede ser útil para definir variables para sus componentes, como definir cuántos elementos hay en una matriz. Por otro lado, pasar datos a través del estado puede ser útil si desea pasar objetos grandes (lo que podría ralentizar potencialmente su aplicación) o definir funciones a las que desea llamar desde su componente secundario. ¡Repasemos ambos enfoques y veamos cuándo es apropiado usarlos en nuestro código!

También te puede interesar: ¿ Cuáles son las mejoras que ofrece React JS en Headless WordPress?

Conclusión

Cuando contrate a un desarrollador de ReactJS, asegúrese de elegir un profesional independiente que tenga experiencia en el trabajo con JavaScript, CSS, HTML y Node.js durante más de 5 años. Es importante que su desarrollador pueda demostrar su experiencia proporcionando proyectos de muestra y diseñando proyectos que sean relevantes para sus requisitos específicos. Esto les ayudará a comprender fácilmente sus metas y objetivos comerciales.

Cualquier experto siempre comenzará haciendo preguntas antes de comenzar cualquier trabajo. Por lo tanto, contratar a un experto que haga preguntas en los momentos apropiados es imprescindible al crear un sitio web utilizando el marco de reacción. El costo promedio de contratación de los desarrolladores de ReactJS sería de entre $40 y $100 por hora. Pero los expertos cobran más de lo normal. Por lo tanto, tenga esto en cuenta cuando haga un presupuesto para configurar un sitio web utilizando el marco de desarrollo de ReactJS.

 Este artículo está escrito por Rahul Kalsariya de Tagline Infotech LLP.