Best of React — November 2023
- 1
- 2
Prismic·2y
Best 15 React UI Component Libraries in 2023
This article explores the benefits of using React UI component libraries and provides a list of the top 15 React UI component libraries of 2023. It highlights some key features and benefits of each library, emphasizing their aesthetics, customization options, accessibility, and community support.
- 3
asayer·2y
Build a Mind-Mapping App with React Flow
Learn how to build a mind-mapping app using React Flow, an open-source toolkit for generating interactive diagrams and visualizations within React applications. This tutorial covers setting up the project, creating components, integrating React Flow, customizing node appearance, adding interactivity, and saving/loading mind maps.
- 4
Community Picks·2y
The complete guide to WebSockets with React
Learn about WebSockets and how to use them with React to build a smooth realtime cursor experience. Discover what WebSockets are, how they work, and explore some React WebSocket libraries. The article also covers best practices for using WebSockets with React and provides a tutorial on building a live cursors experience.
- 5
freeCodeCamp·2y
How to Write Helper Functions in React
Helper functions in React.js simplify complex tasks, improve code organization, and enhance maintainability. They are small, reusable functions that assist React components in performing specific tasks. By following best practices, such as clear documentation, organized organization, and thoughtful testing, you can create efficient helper functions that enhance your development workflow and deliver robust and performant applications.
- 6
- 7
Angular·2y
Announcing Angular.dev
Angular.dev is the future home for Angular development, offering new tutorials, updated documentation, and a better user experience for developers. The release of Angular v17 includes deferred views, built-in control flow, view transitions API support, SSR enhancements, and more. The new tutorials on Angular.dev allow users to learn Angular concepts directly in the browser.
- 8
tldraw docs
tldraw is a React library for creating whiteboards and other infinite canvas experiences. It allows you to embed a fully featured and extendable whiteboard in your app, create, update, and delete shapes, and control the camera. You can learn tldraw through the provided documentation, examples in the tldraw repo, and by asking questions on Discord or Github.
- 9
- 10
- 11
- 12
daily.dev·2y
Moving back to React
daily.dev migrated from Preact to React in order to resolve development issues and improve performance. The move allowed for better compatibility with Next.js, enhanced development experience, and prepared the platform for future technological advancements. The migration was successful and enabled a healthier future for all daily.dev apps.
- 13
How to Create Scroll Animations with React, Tailwind CSS, and Framer Motion
Learn how to create scroll animations in React using Framer Motion and Tailwind CSS. The tutorial covers setting up the project, building the scroll component, adding animation functions, and animating the components on scroll.
- 14
How to Use React Suspense to Improve your React Projects
React Suspense is a feature in React.js 16.6 that allows components to pause rendering while waiting for asynchronous processes to finish. It simplifies the management of loading states and improves the user experience. React Suspense consists of the Suspense component, dynamic imports with lazy(), and error boundaries. It is useful for handling data fetching, lazy loading of components, and providing better user experiences.
- 15
How to Use Cypress for End-to-End Testing Your React Apps
Learn how to use Cypress, an end-to-end testing framework, to efficiently test React applications. Set up the environment, write tests, interact with web components, organize tests using describe blocks, create custom commands, use the Cypress Dashboard to monitor test runs, debug tests with cy.debug() and Time Travel Debugging, and integrate Cypress tests into a continuous integration (CI) workflow using GitHub Actions.
- 16
Medium·2y
React Folder/File Structure Patterns and Tips: Part 2
This article provides tips and best practices for organizing folder and file structures in React projects. It suggests creating a 'shared' folder for common components, using an 'index.js' file for every component and page, importing files to one file and exporting from it, getting rid of relative path hell, and keeping components length short.
- 17
- 18
How to Use TypeScript with React
Learn how to use TypeScript with React. Install TypeScript on your machine and create a Vite project using React and TypeScript. Write React components with TypeScript and define prop types using interfaces or types. Make API calls and store the data in state. Display the data on the UI and handle loading and change events. Explore advanced topics like handling nested properties and separating type declarations into separate files.
- 19
- 20
Code and Deploy an Instagram Clone with React and Firebase
Learn how to create an Instagram clone using React and Firebase. The course covers both front-end and back-end development, including authentication, user interactions, and advanced functionalities. By the end of the course, you'll have a fully functional Instagram clone to showcase your skills.
- 21
React vs. Vue: How to Choose for 2024
A comparison between Vue and React frameworks for web development. The article discusses their similarities, differences, pros and cons, and factors to consider when choosing between them. It also provides examples of popular brands using each framework. Vue is described as lightweight, easy to learn, and beginner-friendly, while React is praised for its large ecosystem, mobile development support, and frequent updates.
- 22
Honeypot·2y
Why Choose Next.js - Top 5 Performance Benefits
Next.js is a flexible React framework that offers performance benefits through server-side rendering, optimized image loading, automatic code splitting, caching mechanisms, and incremental static generation. It also provides developer-friendly features like error handling, fast refresh, built-in SEO support, and integrations with third-party platforms.
- 23
Recap of Next.js Conf 2023 and v14 release
Recap of Next.js Conf 2023 highlights, including stable server actions, partial static prerendering, and updates on Turbopack. The presentations covered React's vision for the future, optimizing third-party loading, debunking the Headless CMS lie, and performance improvements with React 18 and Next.js.
- 24
SCSS vs. styled-components: Advantages and caveats
This article compares the advantages and disadvantages of using SCSS and styled-components in a React application. It provides a tutorial on styling a React component using SCSS and later demonstrates how the same component can be restyled using styled-components. The article highlights the simplicity, reusability, and customization benefits of styled-components, but also mentions issues such as dynamically generated class names and debugging challenges. It concludes by stating that the decision to switch from SCSS to styled-components depends on the specific needs and goals of the project, as well as personal preferences and expertise.
- 25
