As the need for these libraries fades, and we see a massive rise in new frameworks, I'd argue it's not as clear when to reach for them. At what point do we need React?
You can use prop-types to document the intended types of properties passed to components. React (and potentially other libraries—see the checkPropTypes() reference below) will check props passed to your components against those definitions, and warn in development if they don’t match.
You might have heard about features like “Hooks”, “Suspense”, and “Concurrent Rendering” in the previous blog posts and talks. In this post, we’ll look at how they fit together and the expected timeline for their availability in a stable release of React.
Let's face it, forms are really verbose in React. To make matters worse, most form helpers do wayyyy too much magic and often have a significant performance cost associated with them.
You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot.These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling.Let’s start with animations. We’ll be building with React, and there are great options out there for us to leverage. Notably, the react-transition-group is the official package that handles elements entering and leaving the DOM. Let’s explore some relatively straightforward patterns we can apply, even to existing components.
How do React function components differ from React classes?For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.
Plot.ly is a library commonly used to draw graphs and other web interfaces. It started with Python but now has many other implementations in different programming languages, like JavaScript and R. It also has special implementations to support some popular frameworks, like React and Angular.
For the last two years, Airbnb has been using React Native to accelerate development of their mobile platforms. React Native is an open source framework developed by Facebook that allows JavaScript developers to create familiar React components that work across web, Android, and iOS development environments.
It can be desirable for a consumer facing product to exist on the web as well as on mobile. For example, many food delivery applications exist as both web and mobile applications.
For the last couple weeks, I've been building a React native app at work. It's a news reader (duh) and a bit of a monster at that, with filesystem access, background downloads, and push notifications.
Transaction receipts: the key element of subscription managementTransaction receipts are a key element in managing subscriptions through in-app purchases, as well as for automatically renewing and cancelling subscriptions based on the receipt status and validity. They should be handled with care at the initial purchase stage, ensuring that they are persisted in your backend database and stored in a secure manner.
XState can feel overwhelming. Once you've gone through Kyle or David's courses and read through the docs, you'll get a thorough understanding of the API. You'll see that XState is the most powerful tool available for managing complex state.
This demonstrates using the Figma REST API to convert a Figma document to React Components. Disclaimer: this code is likely incomplete, and may have bugs. It is not intended to be used in production. This is simply a proof of concept to show what possibilities exist.
Since the launch of the Figma API, many people have speculated about the possibility of automatically turning Figma documents into React components. Some of you have actually made working prototypes, and Pagedraw even built a whole product around it!
Anima is here to help Front-end engineers deliver faster by automating the grunt work. Teams can convert Sketch, Adobe XD, or Figma into React code and save precious time.
React components that give you the power of editable sandboxes that run in the browser. Powered by Sandpack, the online bundler used by CodeSandbox.Sandpack is an open ecosystem of components and utilities that allow you to compile and run modern frameworks in the browser. You can either use one of our predefined components for embedding the CodeSandbox experience into your projects, or you can build your own version of sandpack, on top of our standard components and utilities. As you walk through this guide, you will get deeper into our ecosystem.
React Server Components bring server-exclusive capabilities to React. I’ve been using this new paradigm within Next.js 13 and 14, and what follows is my honest assessment of it1.
When Does a Project Need React? | CSS-Tricks
How I migrated from ReactRouter v2 to v4
Typechecking With PropTypes – React
prop-types - npm
React 16.x Roadmap – React Blog
Overview · Formik
Animating Between Views in React | CSS-Tricks
How Are Function Components Different from Classes? — Overreacted
Plotly + React and dynamic data – João Marcos Martins da Costa Cota – Medium
How to not make a résumé in React | Eric Bailey
SecureRoute dont pass Router props to my component · Issue #724 · okta/okta-oidc-js
Stop using isLoading booleans
Testing Library · Simple and complete testing utilities that encourage good testing practices
Communicating with spawned and invoked xstate actors in React | by Ismayil Khayredinov | ITNEXT
Handling user authentication with Firebase in your React apps - LogRocket Blog
necolas/react-native-web: React Native for Web
Why Airbnb is Moving Off Of React Native - Software Engineering Daily
Sharing Code Between React Web and React Native Applications | by Reginald Johnson | React Native Training | Medium
I picked up React Native as a web developer and here's what I've learned - DEV
Validating iOS Subscription Receipts in React Native & Node.js | by Ross Bulat | Medium
"Just Use Props": An opinionated guide to React and XState - DEV Community
Figma to React Converter | figma-react-experiments
Introducing: Figma to React
How to Convert Design to React Code | by Anima App | Anima App
Release v0.10.0 · VanTanev/xstate-helpers · GitHub
Navigation prop reference | React Navigation
@pmndrs/racing-game
useFormContext | React Hook Form - Simple React forms validation
Introduction | Sandpack
React Table - Hooks for building lightweight, fast and extendable datagrids for React
React Server Components: the Good, the Bad, and the Ugly