La popularidad de React.js ha ido creciendo rápidamente desde Facebook lanzó la biblioteca por primera vez en 2013. Es el quinto proyecto de código abierto con más estrellas en Github, y los anuncios de empleo para los desarrolladores también están aumentando considerablemente. Es un marco de JavaScript ligero para crear interfaces de usuario ; los ejemplos más destacados son Facebook y Instagram.
Ofrece una alternativa para los marcos MVC , como Angular o Backbone, con una estructura más sencilla y un enfoque en la optimización del rendimiento. Como React seguramente definirá el panorama del desarrollo web en los próximos años, en este artículo me gustaría brindarte un kit de herramientas que te ayudará a poner un pie en el mundo del desarrollo.
Lista de contenidos
Documentos oficiales de React.js
Facebook proporciona a los desarrolladores una documentación detallada sobre los conceptos principales de React. Además de los documentos, también puedes encontrar un foro de discusión para los desarrolladores. Como los documentos son de código abierto, incluso puedes editarlos si lo deseas.
Repositorio en Github
En el Repositorio en Github, puedes consultar el código fuente de React siempre que lo necesites. Si deseas mantenerte informado sobre el estado actual del desarrollo, también puedes echar un vistazo a los problemas, los hitos y las últimas solicitudes. Si te has quedado atascado, también puede ser una buena idea estudiar un poco la Guía de resolución de problemas .
[optin-cat id=380]
Código de inicio de Hello World
Si desea probar rápidamente React, puedes comenzar con esta demostración interactiva «Hello World» en Codepen. Incluye todos los activos necesarios y también el código de inicio. Como Babel también está activado, puedes usar tanto ECMAScript 6 como la sintaxis JSX.
See the Pen Untitled by Dan Abramov (@gaearon) on CodePen.
JSFiddle Playground (con y sin JSX)
Este es un campo de entrenamiento online si deseas un lugar donde puedas empezar a practicar. Está alojado en JSFiddle y tiene dos versiones : una con JSX y otra sin JSX , elije la que le resulte más cómoda.
Create React App
La Create React App es un modelo estándar para crear una aplicación con. Está equipado con un puñado de herramientas de desarrollo web como Webpack, Babel y Browsersync. Estas herramientas estan listas para usar, por lo que puedes comenzar a trabajar de inmediato en lugar de confundirte con la configuración de las herramientas. Te proporciona el mismo stack de frontend que usa Facebook y te permite saltar al desarrollo full stack sin demasiados problemas.
React Styleguidist
React Styleguidist le permite generar rápidamente una guía de estilo para tu aplicación. Simplemente escribe el README.md del componente en MDX y el generador se encargará del resto. También funciona de inmediato con la aplicación Create React App .
Biblioteca de componentes Belle
Belle es una biblioteca de componentes que te equipa con un conjunto de componentes que quizás quieras usar en tu proyecto, como “Button”, “Card”, “Spinner”, “Toggle”, “Rating”, componentes de diferentes formas, y otros. Los componentes funcionan tanto en dispositivos móviles como en escritorio , y también son personalizables .
Belle no es la única biblioteca de componentes que existe, puedes encontrar otras geniales en Github, como los widgets o Elemental .
Storybook
Si no deseas utilizar la biblioteca de componentes de otra persona y deseas crear la suya propia vale la pena probar StoryBook, que es un entorno de desarrollo de interfaz de usuario para los componentes de React. Storybook te permite desarrollar componentes de forma interactiva . Tiene una documentación elaborada y puedes comenzar con el desarrollo en Storybook Hub .
React.js-Bootstrap
React-Bootstrap se integra con el popular framework de frontend Bootstrap. Sus desarrolladores básicamente reconstruyeron los componentes de Bootstrap con React.js. Esto da como resultado una base de código más limpia con menos repetición y un mayor rendimiento .
DevTools para Chrome
DevTools para Chrome es una extensión de Chrome Developer Tools y te permite inspeccionar la jerarquía de componentes. Fue creado por Facebook con el objetivo de ayudar a la comunidad de desarrolladores a crear nuevas aplicaciones. Simplemente puedes agregarlo como una extensión de Chrome a tu navegador. También puedes navegar por el código fuente correspondiente en Github .
El complemento DevTools también está disponible para el navegador Firefox y se puede instalar desde la página de complementos de Firefox .
También te podría interesar
Extensión para Atom
Puedes agregar soporte React a tu editor de código Atom con este paquete. Viene con resaltado de sintaxis, autocompletar, fragmentos de código, conversión de HTML a JSX y algunas otras características útiles que pueden facilitar enormemente el desarrollo.
Guía para principiantes
Hay muchos cursos excelentes en los que puedes aprender sobre el desarrollo de React.js y Egghead, uno de los cuales proporciona materiales de calidad gratuitos sobre el tema. Este curso cubre los conceptos muy básicos de React.js, aprenderás cómo crear un componente básico, JSX, Props y PropTypes, y States. Es una gran fuente si estas empezando.
Empezando con Redux
Otro gran curso gratuito de Egghead.io. Presentado por Dan Abramov, uno de los desarrolladores clave de React.js, este curso de video te enseñará cómo usar Redux para administrar el estado de tu aplicación o los datos en los componentes en tu aplicación. Este método complementa tu habilidad de React.js.
Sistemas de diseño en Storybook
Storybook te permite crear guías de estilo de tus componentes de React.js proporcionando una referencia central y documentación para usar los componentes. Si bien hemos mencionado Storybook en esta lista, este curso en video te ayudará con más detalles para usar Storybook. Egghead.io también ofrece este curso en video de forma gratuita.
Es cierto que empezar a usar React.js puede ser desafiante y confuso, pero para eso estamos, para ayudar. Contacta hoy para programar tu sesión de estrategia y dejar que comience la lluvia de ideas.
