Bookmarks (1339)

Flume: Model Your Business Logic with a JSON Graph — Flume takes yet another crack at the ‘draw what you’re going to build’ paradigm. But it seems to have real promise based on the live, online demo. Take it for a test drive.

Build Scalable React Apps by Sharing UIs and Hooks — Use the Bit ‘component collaboration platform’ to build a consistent UI that’s more maintainable, more scalable and can be delivered more quickly.

The React + GraphQL 2020 Crash Course — Given the ever-increasing pervasiveness of the React/GraphQL combination, there can never be enough ways of learning the necessary skills for working with them. Here’s another.

Top Component Libraries for React in Comparison — Often the problem is too many libraries as opposed to not enough. This article examines five of the top component libraries and takes a unique approach to their comparison: code a login screen with each. You can see for yourself how well each addresses the basic requirement and choose the one which fits the best.

Introducing React Wednesdays on Twitch — Every week on Twitch, we bring React experts to chat and sometimes do a bit of coding. Join us for React Wednesdays.

Build Your First React Native App — We don’t assume our readers are all expert React developers. As such, we like to reserve some space for those just starting out and this concise article will bootstrap your React Native journey.

Comparing Vue and React — This is a subject which comes up quite often: how does your favourite framework (React, of course) compare to Vue. If you could do it all over again which should you choose? The short answer: it depends.

Chrome Extension Development Kit — Is a Chrome extension in your future? This paid development kit comes complete with project files (built using React) enabling you to leverage your current skills into a new domain.

React Fast Charts: The Name Says It All — The charts may be beautiful but does anybody ever talk about how long it takes them to load? This component promises 50ms which sounds good to us.

react-autocomplete-hint: A Concise, Focused Implementation — I've a love-hate relationship with autocomplete. That said, if you’re a fan, here’s a component which will allow you to quickly and easily add it to your app. Try it for yourself and see what you think.

Papercups: A New Entrant in the Customer Chat Space — There are solid incumbents already (like Intercom and Drift) but a new offering, which can either be self-hosted or outsourced, is a welcome addition to the field. Their gif demo illustrates the ease with which Papercups can be integrated with Slack.

React 17.0 Release Candidate: No New Features but Still Lots That's Interesting — When a new major release comes along after two-and-a-half years the absence of new features is going to disappoint many. However, the ability to incrementally upgrade React sites both now and in the future is welcome news. There's still lots about which to be excited, so definitely have a skim at the least.

Create a React Native App with a Serverless Headless CMS — Follow this guide and use Webiny's Serverless Headless CMS and React Native to build a mobile application.

A Practical Guide To Product Tours In React Apps — Why write extensive user documentation nobody reads? The ‘Product Tour’ offers a refreshing alternative (for both the developer and the user) where a new feature is introduced through a short-form, online tutorial which is tightly integrated with the app. They provide what you need to know at the exact moment you need to know it.

How to Build a Sketch Plugin with TypeScript and React — The engineering team at Overlay started developing a plug-in for Sketch two years ago. In the first part of a multi-part series they impart the details of the project for anybody about to take on a similar challenge.

How Recoil Got Me Excited About the Future of State Management — Excited about the future of state management in React? Sure, why not. However, the now open source (but still experimental) Recoil came out of the same ‘kitchen’ as React itself. Which is to say Facebook and in Recoil’s case, Dave McCabe. Hey, that is exciting.

Want to Change Hiring? Full Stack Engineer (Remote) @ VC-Backed Startup — We’re building the first platform built for the human side of hiring. Work with the CEO & Head of Eng, shipping code daily. Competitive salary, paid health coverage.

React Sortable Tree: Maintain Your Trees Intuitively — Dragging-and-dropping is what many users expect of apps these days. Why not give them what they want? The gif demo illlustrates the promise of this hierarchy maintenance component.

BoostNote: A Notes App with GitHub Flavored Markdown — We wouldn’t have thought there was room in the market for yet another means of editing text. We were wrong. This new offering looks good.

Building Greater Accessibility Into Facebook.com with React — The Facebook engineering team has taken advantage of recent React improvements to build better accessibility into the social network’s foundations, and here’s how. This is a subject which never gets as much attention as it deserves.

I Created The Exact Same App in React and Vue And.. — Two years ago, the author built the same app in React and Vue to see the differences between the two. Since then, both have changed, so he’s back with a 2020 edition bringing hooks and Vue 3 into play.

The Definitive Introduction to Svelte with Rich Harris — Learn how the Svelte framework works, write svelte components, and take a tour through the entire Svelte API in this detailed video course.

Setting Up Redux For Use in a Real-World Application — For state management there’s Redux in theory and then there is Redux in practice. This is the tutorial you need to get over the hump from one to the other.

Ant Design Pro: An Out-of-the-Box UI Solution for Enterprise Applications — This popular and mature library could be all you need to get your project off the ground.

TinaCMS: Inline Content Editing for React — Would it not be best for your app’s users to manage their content directly rather than running all of it through you? Here’s an introduction to TinaCMS.

How I Built My First Search Component in React — We like tutorials which are anchored in the first-hand experience of addressing a common programming requirement. This is must reading if you’re about to add a search to your app.

Flutter and React Native Performance Overview — An objective, data-driven comparison of React Native to Flutter, Google’s competing cross-platform development tool. You may find the results surprising.

Getting Started with React Native in 2020 — From time-to-time we like to circle back to those who may be just joining us. Here’s how to bootstrap your mobile app development project using React Native.

Understanding Client-Side GraphQL With Apollo Client in React Apps — For those of us who are still slightly baffled by GraphQL despite its popularity and pervasiveness, Apollo Client can make it much easier to understand and put to use, as this detailed article explains.

Ink 3: Yep, You Can Build CLI Apps with React Too — If you love CLIs and you love React, you’ll love Ink – it lets you get the same component-based UI approach but at the command line. If you’re already familiar with Ink, v3.0 takes some nice steps forward.

Reactivate: Automatically Scan Your JS Dependencies and Generate Dashboards — You may dread periodic reviews to update your app’s dependencies. How about having it done for you, automatically, every four hours? Check out the demo.

SQLectron: A Simple and Lightweight SQL Client — SQL is still the cornerstore of a plethora of applications. There's a lot to like about this new client, as illustrated in their demo video.

react-error-boundary: Simple, Reusable React Error Boundary Component — Remember back when you first learned error handling and could finally catch all those ugly error messages before your users saw them? This is similar, except for React components. Comes complete with a tutorial by Kent C. Dodds to get you started.

Zeit UI: Modern, Minimalist React UI Library Originating from Vercel's Design — If Ant Design Pro (just to name one example) seems like overkill, this UI may be a better fit for you.

react-google-maps-api: Use the Google Maps API in React Components — While it has been around in one form or another since 2005, there’s still a lot that is pretty amazing about Google Maps. Now you can incorporate all that glorious functionality into your React components.

Hexapod: An Arachnoid Robot Simulator — Sometimes it’s the techniques employed in the code and sometimes it’s the end result. In this case, we’re intrigued with both: robotics with React.

🎸 React Guitar: A Flexible 'Guitar Neck' Component for React — You’d use this to render things like chord positions, say. But, even better, you can ‘play’ it too 😁

use-click-away: Make That Modal Go Away...Naturally — Just can’t seem to make that modal box go away as easily as it should? This React Hook detects clicks, taps, and touches outside the bound element and should finally get those modals working the way you and your users expect.

use-screen-size: Conditional Code Based on Screen Size — It’s a base line expectation (realistic or not) that your shiny new app will behave well on the plethora of screen sizes found out there in the wild. Here’s the code you need to do it right.

re-frame: User Interfaces Using this ClojureScript Framework that Leveages React — You have to respect the code (and the coder) where the README leads off with a quote from The Fifth Elephant. All kidding aside, this well-regarded library has a distinctly different concept to building UIs as compared to other, more predictable approaches.

How to Build a Clone of GitHub's File Search Functionality — Here’s another one of those tutorials which begins with the end in mind: in this case, one with a pretty high likelihood GitHub users have used a lot already. This tutorial covers off all the details.

Asynchronous Testing with Enzyme and React in Jest — Asynchronous testing can be a challenge: how can you properly execute the test when assertions can run before the call to the API even resolves. This tutorial tackles this tricky subject through the use of Enzyme combined with Jest.

Faster CI/CD for All Your Software Projects - Try Buildkite ✅ — See how Shopify scaled from 300 to 1800 engineers while keeping their build times under 5 minutes.

How to Set Up and Use Navigators in React Native — You may be surprised to find React Native doesn’t handle the history stack the way you expect: that is, similar to the way a browser does. But it can, using React Navigation.

Frustrated by Formik? Here's a Simpler Way to do Forms in React — If Formik seems to require too much work to achieve a basic data entry form there is a simpler way: React Hook Form promises flexible, extensible and easily-validated forms with less work.

Generating TypeScript Types and React Hooks Based on a GraphQL Endpoint — GraphQL is at the core of many React apps but did you know you can also use it to automatically generate at least some of your code? This tutorial walks you through the use of the GraphQL Code Generator and demonstrates how.

Mid-Level Frontend Developer - React/Redux | Huckberry (Columbus, Ohio) — We're striving to build the most beloved men's retail site on the planet, with client-side rendering, modular code & excellent UX.

Polaris React: Enabling an Enhanced Experience for Shopify Merchants — One of the more underreported stories was Shopify’s recent hookup with Walmart. Toronto-based Shopify has quietly become a dominant force in online retailing and is spinning off lots of integration opportunities with their in-house component library.

A Complete Guide to Testing React Hooks — How much testing is enough? The short answer is “more”. But with the broad array of options available, this tutorial provides a comprehensive overview of React Hooks testing to get you started in the right direction.