DEV Community

Cover image for This Week In React #129: useEffectEvent, Storybook, OpenNEXT, React Email, Remix, Next.js, Pointer-Events, Expo-MDX...
Sebastien Lorber
Sebastien Lorber

Posted on • Originally published at thisweekinreact.com

This Week In React #129: useEffectEvent, Storybook, OpenNEXT, React Email, Remix, Next.js, Pointer-Events, Expo-MDX...

Hi everyone!

This week is pretty busy for an end of the year 🤪 I'll let you discover it all.

My episode for the React Round Up podcast is online. It's about the latest React 18 features, MDX or even Docusaurus.

👋 Last edition of the year. The newsletter will be back on January 10th!

🎄 Happy holidays 🎅


💡 Subscribe to the official newsletter to receive an email every week!

banner


💸 Sponsor

React Bricks is a CMS with visual editing based on React components

React Bricks is a CMS with visual editing based on React components

It's flexible for Developers: create your own design system using React components, add Visual editing in your JSX and add sidebar controls to edit props like the background color. Choose Next.js, Gatsby or Remix and any CSS framework you like!

It's easy for Content editors who can directly edit in a visual way without breaking the design system: much easier than editing abstract entities using gray fields, as in a headless CMS. And you save time, as Content editors are autonomous!

It's enterprise-ready with Collaboration, Time-machine, Single Sign-on, GDPR-compliant datacenters, Global CDN for optimized images, E-commerce integration, Scheduled publishing and more.

Get started here: ReactBricks.com


⚛️ React

Storybook 7.0 beta

Storybook 7.0 beta

Storybook officially announces the release of v7 in beta. The final version will be released in a few months. It's a very big update with a migration plan and even tools to help us upgrade. A subset of the major changes:

  • Design and performance improvements
  • Tests: interaction testing, Playwright, coverage reporting
  • Documentation in MDX 2
  • Component Story Format 3.0
  • API frameworks: Vite, Next.js, SvelteKit

OpenNEXT - Open source Next.js serverless adapter

OpenNEXT - Open source Next.js serverless adapter

A project that aims to improve the portability of Next.js to serverless platforms, including all features (SSR, but also ISR, middleware, Image Optimization). For the moment, OpenNEXT only allows to deploy on AWS.

Ryan Florence said Next.js is not really open-source, and this led to interesting debates. Theo Browne's video sums the situation well: Is NextJS A Trap? Vendor Lock In Rant. Vercel doesn't seem to do vendor lock-in, but at the same time it's normal their platform remains the best to deploy Next.js apps.


React Email

React Email

New solution to create emails based on React and TypeScript. In practice, it is a renderer and a set of headless components compatible with popular email clients, as well as an interface to develop emails with a good DX. The demo reproduces some emails from Vercel, Airbnb, Stripe... It looks like a modern version of React-MJML, including a preview interface.


React Router 6.5

React Router 6.5 + Remix 1.9

2 related releases that mark the end of the React-Router-ing Remix project (moving the Remix code into React-Router), and the reintroduction of a useful feature: optional route segments.



💸 Sponsor

Developer Nation Survey - Do you want to make an impact on the developer ecosystem?

Do you want to make an impact on the developer ecosystem?

Based on the latest State of the Developer Nation report, React is by far the most popular client-side library as it is used by 58% of web developers who use client-side web frameworks. What are your thoughts?

Take part in the most complete survey Developer Nation has ever created, shape the key trends among developers for 2023 and win amazing prizes! 🎁

Upon completion you will get free access to our Virtual Goody Bag. Don't forget to sign up to enter the weekly draws. Among the 250 prizes you can find a ThinkPad L15 Gen 3, an Intel NUC 10 Performance Mini PC, IoT kits, an iPad Air, gift cards, Udemy courses, tech accessories, and many more.

Start here!


📱 React-Native

Pointer Events in React Native

Pointer Events in React Native

The Pointer Events web API is being ported to React-Native. This is very good news for cross-platform. It should also facilitate the use of features like hover and right-click using React-Native JSX elements, which where not initially designed to support these features.


Expo-MDX

Expo-MDX

Evan Bacon releases a package to facilitate the use of MDX on React-Native. Metro compiles MDX into React components, and a provider substitutes DOM elements (default target of MDX) with React-Native elements that you can style easily. We can expect some upcoming usage in Expo-Router, like the ability to create a new React-Navigation screen by creating a simple .mdx file? 👌

MDX support on React-Native is a topic that I particularly like. See also my talk React Native EU 2020 - Cross-platform: ReactNative, Jamstack, And Beyond or my article Using Expo in Gatsby.



🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly

Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer?


🔀 Other


🤭 Fun

alt

For even more fun, it's all there!

This Week In React - Fun Thread

Top comments (0)