React Tutorials
React usePrevious Hook
Hooks are essential for the functional component pattern in React. One frequent logic comparison with
class
components was comparing a previousprop
value with a currentprop
value via lifecycle methods. So what's an easy pattern for duplicating previous value comparisons in functional components?TheuseRef
and...Fix Seeing “0” in Your JSX Code
The early days of the web felt like the wild west when it came to coding practices -- just make it work. Then we became enlightened to better practices, separating HTML from CSS and JavaScript. Then came React and JSX, where we combine JavaScript, HTML...
React authentication, simplified
Authentication is one of those things that just always seems to take a lot more effort than we want it to. To set up auth, you have to re-research topics you haven’t thought about since the last time you did authentication, and the fast-paced nature...
React.isValidElement
Knowing what input type you've received is hugely important in JavaScript, which is a big reason for Flow and TypeScript's rise. One such case where it's useful to know what an object represents is if the input is a string or a React element.To detect...
React indeterminate
I've fallen in love with React.js and JSX over the years; state-based rendering and a logical workflow have made me see the light of this modern framework. That doesn't mean I don't sometimes get a bit frustrated that the "simple" things seem harder than they should...
React Emoji Picker
When emojis first hit the web scene I rolled my eyes -- they seemed like a lame communication method for giggling kids. After years more experience working remotely, managing open source communities, and communicating with people that may not get my sense of humor, I've realized...
Get React Component Data by DOM Node
Retrieving a React component's DOM node is fairly simple from within the component itself, but what if you want to work backward: retrieve a component's instance by DOM node? This is a task that the old Dojo Toolkit's Dijit framework allowed with the
dijit.byId
method, so...How to Get a React Component’s Element
JSX is an amazing pseudo-language for React, and if I'm honest, it's what brought me to love React so much. Using React without JSX is cumbersome and frustrating, while using JSX is such an easier way to express your code. One drawback of JSX, however, is...
React and autofocus
While I love ReactJS, I can say that I sometimes find interactions that were easy during the pre-ReactJS are annoyingly difficult or at least "indirect". One example is properly ensuring that a given
<input>
element gets focused when a button in a different component is clicked; in...React Video Player
Streaming entertainment is a massive interest of mine as both a consumer and web developer. My love for streaming entertainment dates back to the early days of RealPlayer and the misery of a million codecs. Fast forward to today and I'm working a lot with ReactJS...