Community Picks·3yReact - Best Practices
In JavaScript, you can adopt ES6 syntax to make your code cleaner. Don't Forget key Prop With map in JSX Always assign a unique value to the prop to every JSX element while mapping from an array. Use Ternary Operator instead of if/else if Statements makes your code bulky.
gitconnected·3yJavascript Design Patterns
Singleton design pattern exposes a single instance that can be used by multiple components. Singleton Pattern can be considered the basics of global state management libraries such as Redux or React Context. The factory pattern is preferred in cases where the object creation process depends on dynamic factors.
freeCodeCamp·3yTypeScript for React Developers – Why TypeScript is Useful and How it Works
The idea behind this article is to go through the basics of TS and understand the benefits of TypeScript. In the second section of this article, I will cover the specifics of TS with React. This should help you decide if you want those benefits or not.
freeCodeCamp·3yTailwind CSS Landing Page Themes for Busy Developers
Tailwind's library of free and paid resources makes it incredibly easy to build a professional-looking website. By default, it comes in light mode but it has a dark mode option that the website users/visitors can turn on and off as they please. Alternatively, you can purchase the entire TailwindUI toolkit that contains multiple themes and useful resources.
Community Picks·3yTidy up your ES6 imports
Barrel Pattern A barrel is a way to roll up exports from several modules into a single module. The barrel itself is a module file that re-exports selected exports of other modules. For each folder where we want a common export, we create an file that will contain the exports for every file of the folder.
TkDodo·3yWorking with Zustand
Zustand provides a simple API to create global state stores and subscribe to them via selectors. It provides the bear minimum to get you started (hence the logo), and it's flexible enough to scale to your needs. It doesn't track which fields you are using like other libraries do - you have to subscribe "
DZone·3y12 Essential Skills Your ReactJS Developers Should
This guide will explain the crucial React JS developer abilities to screen for when hiring a ReactJS developer. Read our in-depth recruiting guide to discover the greatest React skills for your team. Join the DZone community and get the full member experience.
DEV·3yReactjs Protected Route
React Router provides a convenient way to define protected routes that require authentication. By default, these routes are treated as public routes and anyone can access them. To create a protected route, you need to use the React Router Route component and specify the path that you want to protect.
freeCodeCamp·3yThe Best Backend as a Service for your React App
Firebase has dominated the backend-as-a-service space for many years, but Supabase has emerged as a great alternative. Supabase allows you to take your code and deploy it wherever you like. You can build your app, deploy it to Supabase's servers, or you can Deploy it to your own hosting service.
Community Picks·3yOptimization Techniques and Best Practices for React Application
Keeping React components clean with all the business logic in a separate file can help to improve the code quality, maintainability, and readability. This article helps you with major optimization techniques and code practices that you can incorporate into your React application. Using Webpack for bundling, you can achieve this kind of code-splitting capability. By splitting the bundled files, web browsers cache less frequently changing files and parallel downloads resources to reduce load time.
Product Hunt·3yCircum Icons - Coherent open-source icon library for designers & developers
These open-source icons are perfect for modern frameworks like React, Vue and Svelte. There are 285 icons currently available and a growing library of icons. Whether you're a designer or a developer, we've covered you with features.
LogRocket·3yRecursive components in React: A real-world example
In this article, we will explore the details of recursive components in React and their usage in a real-world application. We will look at an example of a recursive component in React to evaluate their modularity, readability, and maintainability. In the next section of this tutorial, we'll build a nested file explorer app using standard React components. We will build the same React app by using recursive components.
asayer·3yRole-based access in React
The React app is a simple React app for a company with three distinct roles. We’ll be implementing a role-based access system in a React app using react-router-dom protected routes. Only a marketer will be able to access the software engineering route, and only the human resource personnel will have access to the marketing route.
asayer·3yAll about JavaScript Events
Javascript is used to make dynamic and interactive pages in the browser. Sometimes web developers use the Javascript event incorrectly, thereby not giving their webpages the perfect UI and UX it needs. It is a procedure that begins with the element that caused the event and then cascades up to the elements in the hierarchy that contain it.
asayer·3yCreating a Design System using Radix
Radix is an open-source UI component library used to build good, friendly, and accessible design systems and web applications. Radix is made up of three parts: Primitives, Colors, and Icons, plus Stitches. These parts help you build out various design systems. To make this article understandable, we will build a component library as a subset of a design system.
Community Picks·3yReact Soft Dashboard - FullStack & Live Deploy
React Soft Dashboard is a modern design crafted and released for free by Creative-Tim. The product is built with over 70 frontend elements, like buttons, inputs, navbars, cards, or alerts. The UI now uses the latest version provided by and also supports Drag & Drop deployment using the LIVE Deployer Service.
asayer·3yUsing Material UI with React"
Material UI is an open-source, front-end user interface library that features components for speeding up the creation of web applications. Material UI allows the developer to customize the style and appearance of components, changing themes, typography, and appearance to give web pages a unique feel.
