React
- Reactivity and Reactive Programming [Blog Post]cosmicbyt.es Reactivity and Reactive Programming
Nearly all modern browser UI frameworks boast Reactivity as a core feature. What is Reactivity all about? Is it useful or applicable outside of frontend development? what is the hype all about anyways?
Hi all,
This is my first time posting my blog, I hope you enjoy it!
- Material UI v6 is out now 🎉mui.com Material UI v6 is out now 🎉 - MUI
Material UI v6 ships with support for CSS variables, container queries, and advanced color schemes, as well as improved runtime performance and a reduced bundle size.
- I built an AI-powered quiz app with Next.js and OpenAIdev.to Building an AI-powered quiz application with Next.js and OpenAI
In this tutorial, you'll learn how to build an AI-powered quiz application that enables users to...
- State of React 2023 survey results2023.stateofreact.com State of React 2023
The 2023 edition of the annual survey about the latest trends in the React ecosystem.
- An ESLint rule to require the sizes attribute for Next.js’s <Image>axel.leroy.sh An ESLint rule to require the sizes attribute for Next.js’s <Image>
I wrote an ESLint rule to prevent me from forgetting to set the sizes attribute on <Image>s, which results in bigger than required images to be sent to users.
The article mentions Next.js but it also applies to vanilla React as the
sizes
attribute is useful even outside Next's<Image>
component. - React Conf 2024 starts now
YouTube Video
Click to view this content.
Livestream: https://www.youtube.com/watch?v=T8TZQ6k4SLE
Agenda: https://conf.react.dev/agenda
- Latitude: The open-source analytics layer between your database and your usersdev.to Latitude: The missing analytics layer between your database and your users 🤝🏽
What is Latitude? Latitude is the open-source framework for embedded analytics. Create...
- How I built a server-side cache with ExpressJS & Reactdev.to How I keep my ExpressJS & React apps fast with server-side caching
TL;DR In this tutorial, you’ll learn how to implement server-side caching to ensure your...
Hi there,
I have written an article on implementing server-side caching that ensures your app stays fast as you scale.
I’ve used ExpressJS for the API server, and React for the frontend.
Hope this helps someone!
- Next.js App Router Training: list of various basic patterns of app router with simplified code.nextjs-app-router-training.vercel.app Next.js App Router Training
Introducing various basic patterns using Next.js' app router with simplified code.
I stumbled upon this project on GitHub and figured it might be of interest to some people here
- CSS Folding Effect in React Componentwww.joshwcomeau.com Folding the DOM
In this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that journey, we'll learn a lot about 3D transforms and CSS animation techniques!
- Tic Tac Toes v1.0.1 released: The classic game but hardergithub.com GitHub - iByteABit256/tic-tac-toes: Super Tic Tac Toe
Super Tic Tac Toe. Contribute to iByteABit256/tic-tac-toes development by creating an account on GitHub.
- How do you find the source of an infinite re-render?
I have a custom hook that I'm working on to make a fetch request to an api, and it is causing infinite re-renders. I'm struggling a bit to understand how the various parts of my application fit together -- in particular, my store (zustand) is using a middleware (immer) for immutable state, and I'm not certain why its drafting system isn't protecting me from changes in object identity. What tools can I use to try to track down what I've gotten wrong? I can't really leave the web page open very long because I'm making 1000s of requests per minute to the api I'm working against, so the Chrome dev tools are out, and the static analysis tools I set up (typescript and eslint) haven't identified any errors, like missing a dependency from the useEffect hook dependency array.
- Wedges: An open-source collection of UI components for Reactwww.lemonsqueezy.com Wedges — Open-source UI components for React • Lemon Squeezy
Build faster with Wedges. An open-source collection of UI components for React. Beautiful UI components for React, lovingly crafted with the Wedges Design System, Radix UI, and Tailwind CSS.
- React Labs: What We've Been Working Onreact.dev React Labs: What We've Been Working On – February 2024 – React
The library for web and native user interfaces
- Firereact: React hooks, components and utilities for Firebasegithub.com GitHub - erayerdin/firereact: React hooks, components and utilities for Firebase
React hooks, components and utilities for Firebase - GitHub - erayerdin/firereact: React hooks, components and utilities for Firebase
Firereact is hooks, component and utilities library for Firebase and React.
Features
- Very lightweight, !unpacked size when unpacked, !npm min bundle size when minified, !npm minzip bundle size when minified+gzipped
- Supports Auth, Firestore, Functions, Providers and Storage.
- Provides hooks such as
useUser
for Auth oruseDocument
for Firestore, which can listen to realtime changes as well - Provides custom components such as
<FirestoreDocument />
or<StorageDownloadLink />
to keep the logic simple and/or avoid unnecessary rerendering - Provides
Provider
s such asFirebaseSuiteProvider
,FirebaseAuthProvider
orFirestoreProvider
to access Firebase service instances anywhere in the component tree without relying on global variables or prop-drilling - Comprehensive documentation
- Lessons learned upgrading to React 18 in SonarQubewww.sonarsource.com Lessons learned upgrading to React 18 in SonarQube
We share the biggest three issues we faced and the lessons we learned as we upgraded SonarQube to React 18.
- How can I render a custom component in `head` with React Helmet?
I use React Helmet. I wanted to inject social meta tags in some of the pages. In order to DRY, I wanted to define these social meta tags as a separate component, which looks as below:
```typescript type SocialMetaProps = { title: string, description: string, }
const SocialMeta = ({ title, description }: SocialMetaProps) => { return ( <> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> <meta property="og:url" content={window.location.href} />
<meta property="twitter:title" content={title} /> <meta property="twitter:description" content={description} /> <meta property="twitter:url" content={window.location.href} /> </> ) }
export default SocialMeta ```
...which looks as such when I use it in a page:
typescript <Helmet> <title>{resource.title}</title> <SocialMeta title={resource.title} description={resource.shortDescription} /> </Helmet>
The problem with that is that
SocialMeta
component does not render anything. I can confirm it by firing up browser console and doingdocument.head.getElementsByTagName("meta")
. However, if I do it as below:```typescript <Helmet> <title>{resource.title}</title>
<meta property="og:title" content={resource.title} /> <meta property="og:description" content={resource.shortDescription} /> <meta property="og:url" content={window.location.href} />
<meta property="twitter:title" content={resource.title} /> <meta property="twitter:description" content={resource.shortDescription} /> <meta property="twitter:url" content={window.location.href} /> </Helmet> ```
...it naturally renders the tags.
My best guess is that Helmet does not unpack
<></>
. Is there a way to render a custom component insideHelmet
component?Thanks in advance.
***
Environment
- Vite
- Typescript
- React ^18.2.0
- Helmet ^6.1.0
- React Router (DOM) ^6.20.1 (if relevant)
- Why React Re-Renderswww.joshwcomeau.com Why React Re-Renders
In React, we don't update the DOM directly, we tell React what we want the DOM to look like, and React tackles the rest. But how exactly does it do this? In this tutorial, we'll unpack exactly when and why React re-renders, and how we can use this information to optimize the performance of our React...
- Recommendations for keeping up to date with latest React developments?
Hello there,
I'm moving from the Angular world to React and I'm looking for websites, Lemmy communities and Mastodon profiles to follow to keep up with the latest React news and best practices.
Ideally I would like resources similar to Ninja Squad's blog, Angular's blog or /r/Angular2. I'm already following this community as well as Josh W Comeau's blog.
Thanks in advance!
- The Interactive Guide to Rendering in Reactui.dev The Interactive Guide to Rendering in React
In this interactive guide, we'll explore why, when, and how React renders.
- React Newsletter #395reactnewsletter.com React Newsletter #395
Astro 4.0 beta, Svelte through the eyes of a React developer, and Partial prerendering in Next.js 14
- React Forget Compiler - Understanding Idiomatic Reactportal.gitnation.org React Forget Compiler - Understanding Idiomatic React - GitNation
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization.
Really looking forward to this!
- React Server Components, without a frameworktimtech.blog React Server Components, without a framework?
Can we use React Server Components today, without a framework like Next.js? As our experiment shows, not without significant challenges - for now at least?
- React Newsletter #393reactnewsletter.com React Newsletter #393
RSC without a framework, Why you need React Query, and react-google-maps
- React Newsletter #392reactnewsletter.com React Newsletter #392
Simplifying React state management, How to think about security in Next.js, and Simplifying server components
- Virtua (virtual scrolling library for react)
I started using Virtua for Voyager and I'm really impressed! It has a dead simple API (wrap existing
.map
withVList
component), avoids rerendering items on scroll like other solutions, doesn't glitch on iOS devices with unknown height items like many other libraries, super small footprint. The author is also very responsive. Thought I'd share!https://github.com/inokawa/virtua
- How to create a React components ESM+CJS libraryblog.coderspirit.xyz How to create a React components ESM+CJS library
Learn how to create a React component ESM+CJS library using Rollup, TypeScript and Storybook
cross-posted from: https://programming.dev/post/3007051
> Tutorial on how to create dual ESM+CJS React component libraries.
- Controlled vs uncontrolled
Do you prefer your modal component (<dialog>, <Modal>, etc.) to be controlled or uncontrolled?
Uncontrolled: When I use the HTML native <dialog>, I need to access methods on
HTMLDialogElement
using a ref. This feels uncomfortable and not idiomatic React.Controlled: I prefer using a boolean prop to control the open/closed state of the dialog. However, then I need to handle some features like Close on ESC key, which may otherwise cause the open/closed state to desync from the actual dialog state. I also have to be careful about using other HTML features that may close the dialog, e.g. <button formmethod="dialog">
altogether and instead use "legacy" modals built with carefully styled <div>s. But then I give up on many of the nice features of <dialog>, such as tab focus containment and accessibility.
What is your preferred way of using modals? Controlled vs uncontrolled? <dialog> vs <div>s?
Edit: Lemmy dislikes angle brackets inside \
\
:( - react file causing a cors error
I'm in the middle of a systems design class, and we're supposed to get our own VPS up and running. For quick background, I found a PERN app on GitHub, and cloned that onto my digitalocean droplet, and have it connected to my domain and nginx. I have the dist directory for the production build, copied it in the backend folder, and I see my app on my domain path. I'm getting an issue with an index#####.js file that's causing a cors error for localhost:4000, which is confusing since I have a reverse proxy for that port on my domains nginx conf. I did some digging and found a (very long) line of code that goes through the http methods and they each have a "localhost:4000/" for what route to go to for each method. I tried changing these to just / for each and it got rid of the cors error but now I'm getting an error with the promise failing. Do I need to add my domain to those paths? Or am I missing something else here?
- [Solved] How to properly throw a 404 status in react router 6?
Using react router and have a route definition:
{ path: '/', element: <Root pageTitle={pageTitle} />, errorElement: <ErrorPage setPageTitle={updatePageTitle} />, children: [ ... { path: '*', element: <ErrorPage setPageTitle={updatePageTitle} />, loader: async () => { throw new Response('Not Found', { status: 404 }); }, }, ], },
This shows me 404 page how I want but without the rest of the root element but also the http status is reported as 200. How do I properly throw it as a 404 and show it inside root element?
- How to throw a 404 status and a pretty page?
Using react router and have a route definition:
{ path: '/', element: <Root pageTitle={pageTitle} />, errorElement: <ErrorPage setPageTitle={updatePageTitle} />, children: [ ... { path: '*', element: <ErrorPage setPageTitle={updatePageTitle} />, loader: async () => { console.log('throwing a 404'); throw new Response('Not Found', { status: 404 }); }, }, ], },
This does show me the 404 page how I want, but http status is reported as 200. How do I properly throw it as a 404?
It seems not to trigger the loader (console log does not appear), or is there another method to throw a 404 and show a pretty page?
- Does anyone use Suspense?
I haven't had a need for suspense, I use react query without suspense just using the data, error, isLoading etc state directly. And I don't see Suspens as a simpler pattern necessarily. What does it get you that other patterns don't? I'm curious to know your use cases!
- Issue with regular HTML tags in Reactgithub.com Property 'li' does not exist on type 'JSX.IntrinsicElements' · Issue #436 · neoclide/coc-tsserver
I am new to react and every time I open or write regular html tags I get errors about them using coc-tsserver ## versions vim version: VIM - Vi IMproved 9.0 9001424 node version: v20.3.1 coc.nvim v...
I am not sure why my tsserver lsp is complaining about regular tags in my react code. Anyone have any ideas.
- Is this the place to talk about React Native?
I'm usually a backend dev, but have been playing with React. I'm really interested in React Native and would love some guidance, tips, tutorials, etc.
- Component loaders for React + React/RTK Queryrtk-query-loader.ryfylke.dev Introduction | RTK Query Loader
Create loaders for your React components.
RTK Query Loader lets you create loaders for your React components.
```typescript const loader = createLoader({ useQueries: () => { const [name, setName] = useState("charizard"); const debouncedName = useDebounce(name, 200); const pokemon = useGetPokemon(debouncedName); return { queries: { pokemon, }, payload: { name, setName, }, }; }, });
const Consumer = withLoader((props, data) => { return ( <div> <input value={data.payload.name} onChange={(e) => data.payload.setName(e.target.value)} /> <div>AP: {data.queries.pokemon.data.ability_power}</div> </div> ); }, loader); ```
- React books on sale at humble bundle. Does this seem like a good deal? I'm new to webdev.www.humblebundle.com Humble Tech Book Bundle: The Ultimate Guide to React.js by Packt
We’ve teamed up with Packt for our newest bundle. Get books like React and React Native & React Projects. Plus, pay what you want & support charity!