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 鈥淏utton鈥, 鈥淐ard鈥, 鈥淪pinner鈥, 鈥淭oggle鈥, 鈥淩ating鈥, componentes de diferentes formas, y otros. Los componentes funcionan tanto en dispositivos m贸viles como en escritorio , y tambi茅n son personalizables .


Herramientas y recursos React.js para desarrolladores 2021 1
Descarga la Gu铆a de Design Thinking 2022 gratis

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

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada.

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.

Ir arriba