WHY HAVE FRIENDS WHEN YOU HAVE CODE
All JavaScript articles
With the React 18 update, thousands of React developers unexpectedly faced the following warning from within their applications, instructing us to use createRoot instead of ReactDOM.render: Let’s find out why this warning exists, and how to fix it in React 18. Deprecation notice: ReactDOM.render is no longer supported in React 18. Use createRoot instead. To … Read More “[FIXED!] ReactDOM Deprecation notice | ReactDOM.render vs. createRoot” »
To show and hide React components, use short-circuiting to check the visibility status and render the component if it is true.
When you begin to write your own React code, there’s something you’ll notice fairly quickly: normal JavaScript comments do not work in JSX. Writing comments in React and JSX markup works a little differently, but why? Let’s find out. Writing Comments in React First off, let’s get the elephant out of the room. To … Read More “How to Write Comments in React/JSX” »
The React useEffect hook is one of the most common (and useful) hooks in React. In this guide, I’m going to walk you through understanding and using the useEffect hook in your components. Prerequisite Knowledge React hooks Functional components What are side effects in React? If you have been programming for a while, you may … Read More “The React useEffect Hook and How to Use it” »
React hooks are a notoriously confusing part of using functional components. While class-based components have certain built-in features thanks to deriving from the React.Component class, functional components have to “hook into” these features. In the previous article, we learned about props in React. In this guide, I’m going to explain what react hooks are, … Read More “What Are React Hooks? | React Tutorial for Beginners” »
React props are extremely important in more complex React apps. They provide a way for data to pass down through the component tree. In this guide, we’re going to learn how to use props in React — in both functional and class-based components. Prerequisite Knowledge React Functional Components React Class-based Components Contents What Are … Read More “React Props in Functional and Class Components” »
React state is one of the central concepts of the entire React library. Without it, our React components can only become so complex and our apps will never do anything interesting. So in this article, I’m going to guide you through understanding React state from beginning to end, covering both functional and class-based components. … Read More “React State: useState and setState | React Tutorial for Beginners” »
Conditional rendering in JSX is one of the best ways to “level up” your components. When developing React components, there are many times when you need a bit of markup to be more dynamic – that is to say, it may change depending on different factors. In this guide, we’ll explore a powerful feature of … Read More “Conditional Rendering in JSX | React Tutorial for Beginners” »
The React onClick event is one of many “event listeners.” Adding event listeners to React components is one of the most important capabilities of the framework. Event listeners are used to make your application interactive. You can take certain actions when a button is pressed, a form is submitted, or when pretty much anything happens … Read More “React onClick and Other Events | React Tutorial for Beginners” »
In this article, we’re going to learn the best way (or at least one of the best) to set up your React file structure. This will allow you to keep organized as you develop your app, which makes maintaining and expanding it a whole bunch easier. DISCLAIMER: I have adapted the method outlined here from … Read More “React File Structure | React Tutorial for Beginners” »
![[FIXED!] ReactDOM Deprecation notice | ReactDOM.render vs. createRoot](https://thelonecoder.dev/wp-content/uploads/2023/04/deprecation-notice.png)
