Dev Genius·3ySOLID principles in Reactjs
SOLID principles in ReactJS are a set of five principles aimed at making software design maintainable, scalable and easy to modify. These principles can be applied to any object-oriented programming language, including ReactJS. In this blog post, we’ll discuss the importance of the SOLID Principles in React JS and how they can improve your code.
Hacker News·3yIntroducing react.dev – React
Introducing react.dev, the new home for React and its documentation. The new site teaches modern React with function components and Hooks. It includes diagrams, illustrations, challenges, and over 600 new interactive examples. The previous React documentation site has now moved to legacy.reactjs.org.
Josh W Comeau·3yCommon Beginner Mistakes with React
Explore common beginner mistakes with React and learn how to fix them. Topics include evaluating with zero, mutating state, not generating keys, missing whitespace, accessing state after changing it, returning multiple elements, missing style brackets, and using async functions in effects.
Product Hunt·3yFloat UI - Product Information, Latest Updates, and Reviews 2024
Float UI is an open-source library of high-quality UI components and customizable templates built on top of Tailwind CSS and modern JS frameworks. It recently launched Float UI v2 and is looking for expert tips and contributions.
Community Picks·3yRethinking React best practices
This post explores the evolution of React and its transition from a client-only paradigm to incorporating server components. It discusses the core constraints, addresses people and technical problems, and delves into the optimizations applied to the client-only paradigm. The post highlights the importance of understanding the abstractions and making informed tradeoffs.
asayer·3yHow to build React applications faster with Bun
Learn how to build React applications faster using the Bun JavaScript runtime. Discover the advantages of Bun, its speed and performance, and how to install it. Explore how to set up a React application with Bun and use it as a package manager. Test the speed of creating a React app with Bun compared to create-react-app.
DEV·3yHow To Optimize Your React App’s Performance
This post provides optimization techniques for improving React app performance, including using browser performance tools, lazy loading components with React.Suspense and React.Lazy, memoizing components with React.memo, and tree shaking. It also discusses optimizing images for better performance.
Community Picks·3yWhat is Strict Mode in React?
Strict mode in React is a set of development tools for catching potential problems in code before they become bugs. It enables extra checks and warnings and helps developers write better code. Strict mode affects only the development environment and can help catch subtle bugs, keep up with best practices, and identify unsafe lifecycles.
ITNEXT·3yCreate Your Own OpenAI Powered Chatbot in React within 30 minutes.
Learn how to build an OpenAI powered chatbot in React by following simple steps. Get an API key from OpenAI, create a React application, and prepare the necessary parameters for the HTTP call. Build a basic user interface to interact with the chatbot.
freeCodeCamp·3yLearn React 18 with Redux Toolkit
Learn React 18 with Redux Toolkit through a comprehensive video course on the freeCodeCamp.org YouTube channel. The course covers React development, folder structure, components, props, events, forms, hooks, context API, performance, and Redux Toolkit.
LogRocket·3yBest text editors for React
Explore a list of the best text editors for React, including TinyMCE, Quill, CKEditor 5, Lexical, Tiptap, ProseMirror, Slate, and Editor.js. Each text editor has its own set of features, pros, and cons, allowing you to choose the one that best fits your project.
Product Hunt·3yMillion.js v2.0.0 - Product Information, Latest Updates, and Reviews 2024
Million.js v2.0.0 is an extremely fast and lightweight virtual DOM that makes React up to 70% faster. It offers faster rendering and loading speeds, making user interface creation easier with the speed of raw JavaScript.
Community Picks·3yCode splitting in React JS
Learn how to improve the loading speed of React JS applications by using code splitting. Code splitting involves separating code into smaller packages or components that can be loaded on demand or in parallel, resulting in faster website loading times, improved user interaction, and reduced abandonment rates. Follow the step-by-step guide to apply code splitting in a React JS project using React.lazy and Suspense.
Community Picks·3yTake Your Code to The Other Side
Learn about the art of code refactoring and how it can revolutionize your codebase. Discover the benefits of improved code quality, increased maintainability, better performance, and easier collaboration. Explore techniques such as code formatting, avoiding extra wrapping divs in React, using meaningful naming conventions, removing unnecessary comments, destructuring props, organizing imports, splitting code into smaller functions, practicing code reusability, optimizing render performance, reducing bundle size, caching expensive calculations, and eliminating excessive if-else conditions. Embrace the process of code refactoring and watch your application reach new heights.
Community Picks·3yHow to be Better in React Code Reusability – Part2
This post explores the best practices for achieving optimal code reusability in React. It covers steps for creating reusable components, challenges faced by React developers, and best practices for managing dependencies. The key steps discussed include keeping components small and function-specific, using higher-order components (HOC), using render props, using context, and using React hooks.
PlanetScale·3yIntroducing the Issues Calendar for GitHub Projects
Introducing the Issues Calendar for GitHub Projects, an open-source tool that allows users to view GitHub project issues in a customizable calendar. The tool integrates with GitHub's OAuth system, allowing users to sign in with their existing credentials and import projects they have access to. Any issue with a due date assigned will be displayed on the calendar.
Robin Wieruch·3yFull-Stack TypeScript with tRPC and React
tRPC allows developers to create fully type safe APIs with TypeScript in full-stack applications. It provides type safe functions for client applications, without the need for schemas or code generation. The post provides a tutorial on creating a CRUD application with tRPC, Node, Express, and React. It also discusses integrating tRPC with React Query for data fetching.