React Icon

React

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

React github.com

Remix is now open source

The much-anticipated (and admittedly much-hyped) full stack web framework for React has opened its source (MIT license) to the public. What’s interesting about Remix? Here’s some marketing copy from the homepage:

Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. Built on the Web Fetch API (instead of Node) it can run anywhere. It already runs natively on Cloudflare Workers, and of course supports serverless and traditional Node.js environments, so you can come as you are.

Okay that is pretty sales-y (hit up the homepage for more like that), so you might prefer jumping straight over to the docs instead and check out the example Jokes app to see what’s what.

Windows win11.blueedge.me

Windows 11 in React

This open source project is made in the hope to replicate the Windows 11 desktop experience on web, using standard web technologies like React, CSS (SCSS), and JS.

The project description says “in React”, but the source code is comprised of 93.5% CSS. I love this portion of the README that addresses why the author built it (I assume they get this question a lot).

WHY NOT? Why not just waste a week of your life creating a react project just to coverup your insecurities of how incompetent you are. Just Why not!

Windows 11 in React

Benny Powers DEV.to

What's NOT new in React 18

Benny Powers is NOT pleased with what he believes is missing from the latest React release:

For five years now, there’s been a concerted, multilateral push to bring React into line with every other major framework on custom elements, enshrined in the HTML and DOM specs for years now. Much effort was spent both in public and behind the scenes to encourage the React core team to implement real support for the standards.

But then the PRs were closed, or ignored without public comment. And the issues languished. And the hopeful indications of a willingness to play ball with the rest of the web community grew stale and limp.

We, developers that want to write components that work in any frontend stack, were really hopeful that React 17 would deliver, but React is still the mobile iOS of front-end frameworks.

My spidey sense tells me that “the mobile iOS of front-end frameworks” isn’t a compliment…

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.

0:00 / 0:00