A closer look at React 17's new JSX transform

дата:

#207 — September 23, 2020

Read on the Web
React Status
Your weekly React news digest, every Wednesday

Introducing the New JSX Transform — A rare post from the official React blog which digs into React 17's support for a new version of the JSX transform (that which converts JSX code into actual JavaScript). The new transform doesn't change the code in your apps in any way but does change what code is produced from your JSX to not require React to be imported or in scope.

Luna Ruan

▶  Building a Netflix Clone with React, Styled Components and Firebase — One of the more popular tech teachers on YouTube turns his attention to building a remarkably accurate clone of the remarkably popular video website. At 10 hours for one episode, it's truly everything you need to know (well, perhaps except serving up petabytes of video at scale 😏).

Karl Hadwen

New Course: Introduction to Next.js, The Full-Stack React Framework — Next.js is a complete framework built on top of React.js. You'll learn server-side rendering, static site generation, data fetching, code API endpoints, creating pages with the file system, add CSS modules, and more.

Frontend Masters sponsor

Building Complex Animations with React and Framer Motion — The steady march to make web apps look like desktop apps continues. Here's a tutorial which uses a web app clone of the macOS dock as the teaching example.

Soumyajit Pathak

First Alpha of Create React App 4.0 Released — v4 of the popular React app builder is just around the corner promising TypeScript 4 support, Fast Refresh and ESLint upgrades and experimental support for React 17's new JSX transform (featured above). GitHub repo.

Ian Sutherland on Twitter

Improving Your React Folder Structure — Although largely driven by personal preference, take a peek inside somebody else's folders to see how their approach to organizing them compares to yours.

Max Rozen

💻 Jobs

Sr. Engineer @ Dutchie, Remote — Dutchie is the world's largest and fastest growing cannabis marketplace. Backed by Howard Schultz, Thrive, Gron & Casa Verde Capital.

DUTCHIE

Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers!.

Vettery

ℹ️ Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

Animating React Components with GreenSock — It's a simple yet compelling concept: a JavaScript library for the progressive manipulation of CSS to produce complex, physics-based animations. The demos are impressive.

Blessing Krofegha

Progressive Enhancement with WebGL and React — Rarely do you have the luxury of dumping an existing site in favour of an all-new replacement. The Tech Director for 14islands walks through their progressive migration to a modern web experience.

David Lindkvist

Render as You Fetch — In the lead up to the imminent release of his new course, Dodds offers his take on the experimental Suspense for Data Fetching for turning that gentle waterfall into a firehose.

Kent C. Dodds

How to Replace Redux with React Hooks and the Context API — What's better than state management with a minimalist API? How about eliminating the state management library entirely.

Michael Wanyoike

Learn How Devs are Helping 👨🏾‍🎨👩🏻‍🔧👨🏽‍🌾 Adapt to 2020

Square UnBoxed - Free Virtual Event sponsor

A Thorough React Native Navigation Tutorial — The second part of the series we started in the previous issue. This time the author turns his attention to this important subject with a full blown React Native app as the instructive illustration.

Robin Wieruch

Web Component: Why You Should Stick to React — Last week, we gave a dissenters point of view. This week we provide yet one more reason among many why you likely don't want to abandon React yet.

Nathan Sebhastian

🔧 Code and Tools

reactivue: The Vue Composition API in React Components — Rather than engage in the React versus Vue debate why not simply combine some of the strengths of both? This detailed article is an helpful complement to this repo to compare the different approaches.

Anthony Fu

8 New React Components You Can Use with KendoReact R3 2020 Release — New Gantt Chart, AppBar and 6 more React UI components to help you build polished apps much faster. Find out what's new.

Progress KendoReact sponsor

Jotai: Primitive and Flexible State Management for React — Another crack at state management, this time with a dramatically simplified API and a predisposition for TypeScript. Take it for a test drive with CodeSandbox.

Poimandres

react-d3-speedometer: Gauging Your Speed — If you're keen to get your feet wet with the D3 library, this nicely executed component could be a good way to do it. We also like the old time analogue look and feel.

Arun Kumar

react-easy-edit: Inline Editing Made Easy — Check out the demo of this focused component which takes the pain out of inline editing.

George Artemiou

lowlight: The Opposite of Highlight? — Based on the Highlight.js library, this provides "syntax highlighting for virtual DOMs and non-HTML things" for 189 languages.

Titus Wormer

sentry-react-native: Sentry SDK for React Native — The popular Sentry crash reporting system, now integrated with your favourite native app development tool.

Sentry

Комментарии

Отправить комментарий