Best of React — September 2023
- 1
- 2
- 3
freeCodeCamp·3y
How to Improve Your ReactJS Code – Tips for Code Readability and Performance
ReactJS is one of the most popular JavaScript libraries for building scalable and performant applications. You'll need to focus on code quality, readability, maintainable, and scalability. I'll share my favorite tips along with code examples to show you how everything works.
- 4
Community Picks·3y
How To Learn TypeScript In 2023
TypeScript is a set of tools that make writing JavaScript more pleasant. You can learn more on TypeScript's Landing Page. You'll need to install Node.js in order to use TypeScript to its fullest potential. Using TypeScript on CI is a great way to make sure your project is free of bugs.
- 5
Hacker Noon·3y
Stop Using State for React Forms, There is a Much Better Way!
The most popular approach to handling forms in React is to store the input values in state variables. When it comes to form, React will attempt to re-render the component every time the input (state) changes. We will use the state to manage the form inputs.
- 6
- 7
DEV·3y
Web workers in ReactJs
A web worker is a JavaScript feature that allows you to run scripts in the background. This background execution enables you to perform tasks concurrently without blocking the user interface. Web workers are particularly useful for handling computationally intensive or time-consuming operations without impacting the user's experience.
- 8
- 9
- 10
- 11
Josh W Comeau·3y
Making Sense of React Server Components
React Server Components is the latest paradigm shift for React. For the first time ever, React components can run exclusively on the server. It's helpful to understand how Server Side Rendering (SSR) works. If you're already familiar with SSR, feel free to skip to the next heading.
- 12
habr·3y
React Custom Hook: useOnScreen
The useOnScreen hook leverages the power of the Intersection Observer API. It can be immensely useful in scenarios where you want to trigger animations, lazy load images, or load additional content as the user scrolls. UseOnScreen will notify you when it enters or exits the viewport.
- 13
React Custom Hook: usePrevious
"usePrevious" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The advantages of using usePrevious are remarkable. By using useRef, this hook efficiently stores the current and previous values, updating them whenever the value changes.
- 14
Best Practices for Securing Your ReactJS Application
As with any web application, security is paramount to safeguard against potential attacks like XSS (Cross-Site Scripting) and CSRF ( cross-Site Request Forgery) This article delves into essential Reactjs security best practices for fortifying Reactjs applications. Let's explore the key strategies for securing your Reactjs application effectively.
- 15
ITNEXT·3y
Why Web UI Development Is So Hard?
This piece aims to dissect the inherent challenges of web UI development, from the discrepancy between web languages and the modern UI requirements. We’ll explore often-overlooked ‘unhappy paths’ such as loading states, error handling, and broader architecture considerations including security, performance, and accessibility.
- 16
- 17
How to Use React Components – Props, Default Props, and PropTypes Explained
React is an open-source JavaScript library used for building user interfaces (UIs) in web applications. In this tutorial, we'll explore what React components are, how to pass and render data to them using props, and how to enhance their reliability using props and propTypes.
- 18
Ok, Astro is the best web framework in 2023, here’s why
Astro is the best web framework in 2023, here’s why. Astro is a web framework that is based on JavaScript and generates no JavaScript by default. It executes your JS code at build time, like SSR frameworks do, but it does no hydration, because most content-based website do not need JS.
- 19
How to Build an Image Search App Using React – An In-Depth Tutorial
Learn how to build an Image Search App using React. This tutorial covers topics such as making API calls, implementing pagination, handling form submit action, adding search input and quick search options, getting access to the Unsplash API, storing API data using state, displaying images on screen, finding bugs using ESLint, removing extra dependencies from useEffect, and displaying loading indication.
- 20
JavaScript in Plain English·3y
Two-way data binding in Vanilla JavaScript without Angular or React
Two-way data binding in Vanilla JavaScript without Angular or React. In Plain English, we will create a similar data binding but with vanilla JavaScript. We will create an object’s property with a getter and a setter function to update the value of the corresponding HTML element.
- 21
React Custom Hook: useRenderCount
The "useRenderCount" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook uses React's useEffect and useRef hooks to keep a count of renders. With each render, the count is incremented, providing you with real-time feedback on the component's render frequency.
- 22
React Server Components Made Our Site Faster
React Server Components Made Our Site Faster.js allows you to split server and client rendering out between individual components. This means that on the server, you can securely call server-only APIs without leaking keys to the client. The project leverages the latest version of Next.js as well as React server Components served through the new App Router.
- 23
Why not React?
React’s streaming has interesting flaws, and the official RSC implementation ain’t exactly fast Low-end devices remain stubbornly stagnant. The intro became more relevant than I could have possibly known when I wrote it. I once planned a rewrite, but I’m burnt out and can't be arsed.
- 24
React Custom Hook: useMediaQuery
The useMediaQuery hook allows you to dynamically update your UI based on a given media query. The hook is not limited to specific use cases; it can be used in a variety of scenarios. For instance, you can use it to dynamically adjust the layout of a navigation menu, hide or show certain elements based on screen size.
- 25
React Custom Hook: useOnlineStatus
"useOnlineStatus" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook internally uses the "navigator.onLine" property to determine the initial online status and dynamically updates it whenever the user's connectivity changes.
