This week we talk with Kent C. Dodds, one of the greatest React teachers in the industry, all about React! Why choose React over another framework? What are the hardest parts about learning React? You’ll find out this week!
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!
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…
Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It’s early software, but you can try it today, look at an example project, or read about it on our blog!
Tanner joins Nick to talk about his projects, react-query and react table, and discuss scratching your own itch in a maintainable way with open source.
Cool, but it’d be even cooler if it detached from React so we could all use it. It’d also be nice if you could opt to having the initials overlay the gradient.
For far too long React has encouraged to people to cram their data layer into their view layer. If you learn anything from the Clojure community, this is a flawed approach. I argue that we can do better, and need a data-first frontend revolution, which relegates React to what it does best: diff and render DOM nodes.
Jack Franklin rebuilt his (p)React-based pomodoro app in Svelte and wrote up a nice comparison of his experiences with both:
This is not a post declaring Svelte to be better than React, or vice-versa. This is a post where I’ll tell you about my preferences, and what I find easier or harder with either framework. I’m not here to pick a fight!
In this post, I’d like to share alternative approaches for dealing with conditional rendering in React. I will try to list out the pros and cons of 3 different approaches (doesn’t mean couldn’t be more!) and hopefully this can be useful for you someday.
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! 🎁
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.
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
At this point, we may need to adjust Atwood’s Law, which states:
I think a
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 ✨
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.
Ron Perris from Snyk this checklist of React security best practices to help you and your team find and fix security issues in your React applications. I’ll show you how to automatically test your React code for security-related errors and automatically fix them.
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.
Timelines are hard to get right and React-Chrono looks really well done. It has 3 modes (vertical, horizontal, and vertical alternating where cards alternate between left and right side of timeline), lets you include images & videos, and is highly customizable.
I am a huge proponent of a couple of specific ideas. One is that you should always try to understand what problems a specific tool is trying to solve… And another is that you need to understand exactly what problems you are trying to solve in your own application right now, and pick the tools that solve your problem best.
Ben Ilegbodu joins Divya, Suz, & Amal to talk about introducing TypeScript at Stitch Fix, why TypeScript and React work well together, building component libraries, and more.
Trends come and go and sometimes we forget to look at the value of tools for what they are. In an exploration of how to write React in a way that felt more pleasant, I rediscovered an old front-end tool, and thought it was worth sharing it.
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.
Redux maintainer Mark Erikson joins Jerod and Amal for an in-depth conversation around the React community’s fav state management solution. We learn how Mark came to be maintainer of Redux, why and how Redux Toolkit came about, when to go with Redux vs other options, and much more.
ALSO: prop drilling, the grep factor, & lasagna mode (oh my)
If you plan on using Tailwind and building with React or Vue (or Alpine coming soon), it’s a no-brainer to start with these free UI components by the Tailwind team.
Many of these “vs” style articles are too shallow or narrowly-focused to be of much use. Not this one. It even has a table of contents. Dive in deep for the full analysis or jump straight to the end for the
if/then framework selection advice.