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.

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.

React.js

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 .

React.js Github Repo
Recibe mi Newsletter semanal
Recibirás un email semanal (los domingos por la mañana) con el mejor contenido que vaya encontrado por la red.


Yo también odio el spam solo contenido de valor a través de mi newsletter

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.

Crear página de inicio del sitio web de la aplicación React.js

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 .

Generador de guías de estilo de React.js

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 .


Design thinking

Belle no es la única biblioteca de componentes que existe, puedes encontrar otras geniales en Github, como los widgets o Elemental .

React.js

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 Storybook

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 .

React.js

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 .

React.js DevTools para Chrome

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.

React.js

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.

Video de la guía de React.js Beginner

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.

Video tutorial de Redux

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.

Aprenda el video de StoryBook

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.

Recibe mi Newsletter semanal
Recibirás un email semanal (los domingos por la mañana) con el mejor contenido que vaya encontrado por la red.


Yo también odio el spam solo contenido de valor a través de mi newsletter
Pedro De la nube

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.Ver
Privacidad