Search

Nalezeno "React": 97

How to Conditionally Add Attributes to Objects


JavaScript is full of tricks that you don’t know you want until you … want … them. Or maybe just until you see them. One trick I recently realized was conditionally adding attributes to React elements. Of course this trick essentially boils down to conditionally adding properties...

Pre-Caching Image with React Suspense


Suspense is an exciting, upcoming feature of React that will enable developers to easily allow their components to delay rendering until they’re “ready,” leading to a much smoother user experience. “Ready,” in this context, can mean a number of things. For example, your data loading...

Going Jamstack with React, Serverless, and Airtable


The best way to learn is to build. Let’s learn about this hot new buzzword, Jamstack, by building a site with React, Netlify (Serverless) Functions, and Airtable. One of the ingredients of Jamstack is static hosting, but that doesn’t mean everything on the site has to be static. In fact, we’re...

Morphing SVG With react-spring


I’ve been intrigued by the morphing effect ever since I was a little kid. There’s something about a shape-shifting animation that always captures my attention. The first time I saw morphing left me wondering  “ Wow, how did they do that?” Since then, I’ve created demos and written an article about...

radEventListener: a Tale of Client-side Framework Performance


React is popular, popular enough that it receives its fair share of criticism. Yet, this criticism of React isn’t completely unwarranted: React and ReactDOM total about 120 KiB of minified JavaScript, which definitely contributes to slow startup time. When client-side rendering in React is relied...

Everything You Need to Know About FLIP Animations in React


With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE).  Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because...

“The Modern Web”


A couple of interesting articles making the rounds: Tom MacWrite: Second-guessing the modern web Rich Harris: In defense of the modern web I like Tom’s assertion that React (which he’s using as a stand-in for JavaScript frameworks in general) has an ideal usage: There is a sweet spot...

React Single File Components Are Here


Shawn Wang is talking about RedwoodJS here: …  it is the first time React components are being expressed in a single file format with explicit conventions. Which is the RedwoodJS idea of Cells. To me, it feels like a slightly cleaner version of how Apollo wants you to do it with useQuery....

Working With MDX Custom Elements and Shortcodes


MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary. Let’s harness that magic and look...

The Anatomy of a Tablist Component in Vanilla JavaScript Versus React


If you follow the undercurrent of the JavaScript community, there seems to be a divide as of late. It goes back over a decade. Really, this sort of strife has always been. Perhaps it is human nature. Whenever a popular framework gains traction, you inevitably see people comparing it to rivals....

Creating a Gauge in React


You should really look at everything Amelia does, but I get extra excited about her interactive blog posts. Her latest about creating a gauge with SVG in React is unreal. Just the stuff about understanding viewBox is amazing and that’s like 10% of it. Don’t miss her earlier posts like...

Using Formik to Handle Forms in React


There is no doubt that web forms play an integral role in our web site or applications. By default, they provide a useful set of elements and features — from legends and fieldsets to native validation and states — but they only get us so far when we start to consider the peculiarities of using...

Building a Real-Time Chat App with React and Firebase


In this article, we’ll cover key concepts for authenticating a user with Firebase in a real-time chat application. We’ll integrate third-party auth providers (e.g. Google, Twitter and GitHub) and, once users are signed in, we’ll learn how to store user chat data in the Firebase Realtime Database...

React Suspense in Practice


This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We'll look at how to integrate routing and data loading with Suspense in React. For routing, I'll be using vanilla JavaScript, and I'll be using my own micro-graphql-react GraphQL...

What React Does (and Doesn’t Do)


With a name as big as React, it's bound to cause some Stream-Crossing Confusion, as I like to call it. How do you center a <div> in React? Dave Ceddia: React cares exactly zero about styling. Think of it as generating the barebones HTML. React will put elements on the page, but everything...

How We Created a Static Site That Generates Tartan Patterns in SVG


Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan patterns (as SVG and PNG files), taking care to filter out any that have explicit usage restrictions. The idea was cooked up by Sylvain...

Considerations for Creating a Card Component


Here's a Card component in React: const Card = props ={ return( <div className="card"<h2{props.title}</h2<p{props.content}</p</div) } It might be pretty useful! If you end up using this thing hundreds of times, now you have the ability to refactor a little bit of HTML...

Why JavaScript is Eating HTML


Web development is always changing. One trend in particular has become very popular lately, and it fundamentally goes against the conventional wisdom about how a web page should be made. It is exciting for some but frustrating for others, and the reasons for both are difficult to explain. A...

The Hooks of React Router


React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router. But before we look at hooks, we will start off with a new route rendering...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace