React Icon

React

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

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. 😉

Ember pzuraq.com

Comparing Ember Octane and React

This is a very detailed article on:

directly comparing Ember and React, using the latest idioms and best practices from both frameworks.

It goes really deep into the differences and the developer experiences of both frameworks and is a really good read for someone who is curious about what modern Ember looks like, especially if they have some previous React knowledge.

Slack github.com

"If you know React, you know how to make a Slack app"

Phelia transforms React components into Slack messages by use of a custom React reconciler. Components (with their internal state and props) are serialized into a custom storage. When a user interacts with a posted message Phelia retrieves the component, re-hydrates it’s state and props, and performs any actions which may result in a new state.

It’s crazy interesting to me how many of these “Use React for X” projects keep popping up. People are making CLIs with React, games with React, desktop apps with React. What else?

Josh Comeau joshwcomeau.com

A static future

Why is static the future? How do you define “static”? Read this deep dive from Josh Comeau to find out…

The term “static” can be a little overloaded, and occasionally a little misleading. Here’s how I’d define it:

“A static website is a website where the initial HTML is prepared ahead of time, not dynamically generated by a server on request.”

When you make a request to this website, for example, Netlify serves pre-generated HTML to you. I don’t have a Node server dynamically rendering HTML documents on-the-fly.

Brandon Bayer github.com

Blitz.js — a Rails-like framework for full-stack React apps without an API

Brandon Bayer:

The central thesis is that most apps don’t need a REST or GraphQL API. Blitz brings back the simplicity of server rendered frameworks like Ruby on Rails while preserving everything we love about React.

Additionally, Blitz is bringing other Rails goodness that’s missing in the React ecosystem like file structure and routing conventions, a really nice console REPL, intelligent code-scaffolding, and a fine-tuned out-of-the-box setup with Prettier, Typescript, ESlint, Jest, Cypress, etc.

The framework ‘wars’ continue right alongside the monolith-vs-microservices debate. For more on the principles behind Blitz, check out the manifesto.

React github.com

A simplified Jira clone built with React and Node

This looks like an excellent read for anyone looking to level up their fullstack JS chops:

I do React consulting and this is a showcase product I’ve built in my spare time. It’s a very good example of modern, real-world React codebase.

There are many showcase/example React projects out there but most of them are way too simple. I like to think that this codebase contains enough complexity to offer valuable insights to React developers of all skill levels while still being relatively easy to understand.

A simplified Jira clone built with React and Node
0:00 / 0:00