React Icon

React

React is an open source JavaScript library used for designing user interfaces.
130 Stories
All Topics

JS Party JS Party #163

JS is an occasionally functional language

Eric Normand (long-time FP advocate and author of Grokking Simplicity) joins Jerod and KBall for a deep conversation about Functional Programming in JavaScript. Eric teaches us what FP is all about, details the functional side of JS, and reviews the good/bad/ugly of React.

Oh, and join us in the #jsparty channel of our community slack where we’re giving away three FREE e-book copies of Eric’s new book! 🎁

Browser London Icon Browser London

React is king (and that’s not changing anytime soon)

Connor Ward:

Before React, there was Angular and before that, there was jQuery – all frameworks that have fallen by the wayside. It’s just a matter of time before something comes along and takes the mantle as the new hotness. Or so they say.

I’m not so sure. In fact, I think React will be with us for many years to come.

He sites React Native’s success as one reason React will remain relevant, amongst others. I’m not so sure.

I believe React The Idea (uni-directional data flow through declarative component trees) is here to stay, but I’m not so convinced that React The Software won’t be soon replaced like its predecessors were.

React github.com

Create videos programmatically in React

You may be wondering why this is a good idea. Thankfully, the README starts by answering that question:

  • Leverage web technologies: Use all of CSS, Canvas, SVG, WebGL, etc.
  • Leverage programming: Use variables, functions, APIs, math and algorithms to create new effects
  • Leverage React: Reusable components, Powerful composition, Fast Refresh, Package ecosystem

If you want to see it in action, the announcement video for Remotion was written in Remotion itself. (Because of course)

At this point, we may need to adjust Atwood’s Law, which states:

any application that can be written in JavaScript, will eventually be written in JavaScript.

I think a s/JavaScript/React/g would do the trick…

Josh Comeau joshwcomeau.com

The styled-components happy path

This is Josh Comeau’s personal suite of “best practices.”

If you work with styled-components, or a similar tool like Emotion, my hope is that this article will help you get the most out of it. I’ve distilled years of experimentation and practice into a few practical tips and techniques. If you apply these ideas, I genuinely believe you’ll be a happier CSS developer ✨

GitHub Blog Icon GitHub Blog

Bringing React's ideas to server-rendered Rails views

We didn’t do too much coverage of Rails 6.1 release last week, but here’s a great write-up on the GitHub blog about how they landed a couple small PRs into the framework that dramatically changed how the company is building views with ViewComponent.

This comment was particularly noteworthy, methinks:

Inspired by our experience building component-based UI with React, we set off to build a framework to bring these ideas to server-rendered Rails views.

Good ideas propagate. Regardless of what comes next in the web UI world (or React goes from here), this single idea is so profound for building frontends that it will be React’s lasting legacy.

Deno github.com

Aleph.js is a React Framework in Deno

Aleph.js doesn’t need webpack or other bundler since it uses the ESM imports syntax. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just needs to re-compile that single module, there’s no time wasted to re-bundle every changes, and instantly updates in the browser by HMR (Hot Module Replacement) with React Fast Refresh.

The “$X but for Deno” meta trend is starting to pick up steam. Expect more like this in 2021 and beyond.

React github.com

visx – airbnb's visualization components built with D3 and React

At Airbnb, we made it a goal to unify our visualization stack across the company and in the process, we created a new project that brings together the power of D3 with the joy of React.

The library boasts small bundle sizes due to package splitting, is un-opinionated about integrations like state management and animations (if that’s a feature for you), and is explicitly not a charting library.

As you start using visualization primitives, you’ll end up building your own charting library that’s optimized for your use case. You’re in control.

Marius Andra github.com

Autogenerating Kea's TypeScript support

Marius Andra added TypeScript support to his React state management library with kea-typegen:

I tried a lot of different ways to add TS support to Kea. At the end of the day what was needed was just not possible without an extra type generation step. I’ll document the failed attempts in a blog post one day. The issue boils down to the fact that each block inside a logic (e.g. reducers) gets the logic itself as a parameter (reducers: logic => (...)). That kind of loopy stuff is just not possible with TS right now. At least not to the level that it has to be for it to work in Kea (think of selectors that depend on each other). Ultimately, all of the pure-TS attempts I tried would have yielded a partial solution.

Thus kea-typegen was born. Even if it’s just a step along the way (TS compiler plugins a’la babel someday?) and still missing many features, it’s already really useful. It uses the TypeScript compiler API to analyse your source files and print out complete types (interfaces) for them.

Marius also recorded a video of the process in action.

Antoni Kepinski DEV.to

How to embed a Changelog podcast player into a React app

Antoni Kepinski, who was a guest of ours on JS Party #85:

I wrote a short tutorial on how to embed Changelog’s podcast player into a React application so that it doesn’t affect the performance and accessibility of the site.

While I do understand that Changelog isn’t interested in How-to's and tutorials, I feel like this one can be an exception, as it is related directly to Changelog and its podcasts ;)

Antoni is correct! How-to’s and tutorials aren’t something we share often. It’s not that they aren’t useful, it’s just that they aren’t really news and they are rarely noteworthy. But I’ll make an exception this time. 😉

0:00 / 0:00