Best of ReactMay 2022

  1. 1
    Article
    Avatar of hashnodeHashnode·4y

    The Complete Modern React Developer 2022

    This course will give you the skills and knowledge to become a Software Developer across the full stack. We will be building a super basic Twitter clone that has CRUD functionality for posting, reading and deleting tweets. In this section you will learn how to setup a Node backend using both Express.js and Nestjs. And as a bonus you will also learn some DevOps when we put a MongoDB and Postgres database inside of a Docker container.

  2. 2
    Article
    Avatar of hashnodeHashnode·4y

    Why You Should Ditch Create-React-App for Vite

    Vite is a build tool similar to Webpack. It can be used for React, Preact, Svelte, Vue, Vanilla JS, and LitElements. Vite uses route-based code-splitting to figure out what parts of the code actually need to be loaded, and doesn't have to pre-bundle everything.

  3. 3
    Article
    Avatar of syncfusionSyncfusion·4y

    Micro-Frontend—Why and How?

    Micro-frontend is a new architecture inspired by microservices. The concept is similar to microservices, where we can break the whole monolithic codebase into smaller codebases that can be developed autonomously by distributed teams. Micro-frontends have certain principles that allow for scaling an app.

  4. 4
    Article
    Avatar of phProduct Hunt·4y

    Material Tailwind V2 - Components library for Tailwind CSS & Material Design

  5. 5
    Article
    Avatar of phProduct Hunt·4y

    Scrollex - A react library to build beautiful scroll experiences

    Scrollex is a react library built on top of framer-motion that makes it super simple to build elaborate scroll experiences. Scrollex lets you add scroll keyframes to elements defining the scale/translation/rotation/etc for each scroll position. It's free and open source.

  6. 6
    Article
    Avatar of leerobLee Robinson·4y

    Building a Design System Monorepo with Turborepo – Lee Robinson

    Turborepo is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching.

  7. 7
    Article
    Avatar of hashnodeHashnode·4y

    React.js Deep Dive as a beginner

    React is an Open Source project created by Facebook. It is one of the most popular JavaScript library with over 187k stars on GitHub. It's used to build user interfaces on the font end. Let's see why you should use react over vanilla JavaScript or any other library/frameworks.

  8. 8
    Article
    Avatar of nextNext.js·4y

    Blog - Layouts RFC

    This RFC outlines the biggest update to Next.js since it was introduced in 2016. Nested Layouts: Build complex applications with nested routes. Using React 18 Features: Streaming, Transitions, and Suspense. Client and Server Routing: Server-centric routing with SPA-like behavior. Improved Data Fetching: Fetch in layouts while avoiding waterfalls.

  9. 9
    Article
    Avatar of hashnodeHashnode·4y

    react optimization

    React is a JavaScript library for building user interfaces. It ships with several ways to minimize the number of costly DOM operations required to update the UI. Using React will lead to a fast user interface for many applications without doing much work to specifically optimize for performance. Re-rendering a component only happens when necessary. Lazy for Lazy Loading Components.

  10. 10
    Article
    Avatar of hashnodeHashnode·4y

    5 Amazing React Component Libraries to Consider for your Next Project

    As web developers, it is often hard and time-consuming to make accessible UIs. This gets even worse when we have to make special components like Modals or Popovers from scratch. Today, we are going to focus on React component libraries that are accessible, have a decent base style, have good docs, and come with components like Popovers, Tooltips, etc.

  11. 11
    Article
    Avatar of hashnodeHashnode·4y

    Infinite scrolling

    In this guide, I will create a movie listing react app with infinite scroll using tmdb which allow us to fetch paginated data. We will use the IntersectionObserver API to implement an infinite scroll. We also need to use useRef Hooks to get the DOM node to observe.

  12. 12
    Article
    Avatar of tilThis is Learning·4y

    React Refs: The Complete Story

    React Refs are a mutable data property to persist data across renders. The useRef hook has expanded the definition of "refs" We'll be exploring additional functionality to each of those two definitions. We'll also explore common code gotchas associated with using useRef .

  13. 13
    Article
    Avatar of smashingSmashing Magazine·4y

    You Don’t Need A UI Framework — Smashing Magazine

    Josh Comeau is a software developer, educator, amateur pianist, and cat person. He’s spent the past few years working as a software engineer for orgs like Khan … More about Josh. Email Newsletter Your (smashing) email Weekly tips on front-end & UX.

  14. 14
    Article
    Avatar of gcgitconnected·4y

    Stop Creating UI Components From Scratch

    When to Go From Scratch: How to roll out your own UI components from scratch. We built our world atop the knowledge of those who came before us. Here are some scenarios where it makes sense to build your own. There is no silver bullet for software development; there are always exceptions.

  15. 15
    Article
    Avatar of asayerasayer·4y

    Authentication in React 18 using Firebase v9

    In this tutorial, we will implement an authentication flow in React 18 using Firebase v9 Web SDK. We’ll enhance a starter React application to practice the following security concepts: Adding user login and logout (using email/password and with Google), Retrieving user information, using the Context API for managing the Auth state, and Protecting application routes from unauthorized users using React Router v6.

  16. 16
    Article
    Avatar of changelogChangelog·4y

    formkit/auto-animate: A zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with React, Vue, or any other JavaScript application.

    AutoAnimate is a zero-config, drop-in animation utility that adds smooth transitions to your web app. You can use it with Vue, React, or any other JavaScript application. Add motion to your apps with a single line of code. Please consider supporting us with a recurring or one-time donation.

  17. 17
    Article
    Avatar of freecodecampfreeCodeCamp·4y

    How to Build a Google Docs Clone with React, Material UI, & Firebase

    In this article, we'll build a Google Docs clone using React, Material UI, and Firebase. If we click any document, it will open up and we can edit them however we need to. If two people are working on the same document, their progress will be reflected in both instances.

  18. 18
    Article
    Avatar of devgeniusDev Genius·4y

    Vue vs React in 2022: What to Choose and When

    Vue and React are among the most fast-evolving technologies for frontend development. There are many factors to explain their popularity among business owners and developers. In this blog, we will try to compare Vue.js vs React.js, taking into account their differences and similarities.

  19. 19
    Article
    Avatar of logrocketLogRocket·4y

    Using Ultra, the new React web framework

    React is one of the most popular libraries for developing components for web applications. React v18 includes new features, such as concurrent rendering, and it supports SSR with React Server Components. In this article, you’ll learn about a new React framework called Ultra, which uses Deno and React and focuses on using web streams.

  20. 20
    Article
    Avatar of hashnodeHashnode·4y

    Introducing ReactPlay - Learn, Create, Share ReactJS projects

    ReactPlay is an Opensource platform to learn, create and share ReactJS projects with the developer community. It allows you to learn from the code, explanation, articles, and videos related to a project and inspire you to create one. When you create a play with a few simple guided steps, it goes through some serious code reviews by experienced ReactJS developers.

  21. 21
    Article
    Avatar of asayerasayer·4y

    UseTransition() Vs UseDeferredValue() In React 18

    React 18 has introduced a key new concept known as “concurrency” Concurrency involves the simultaneous execution of multiple state updates. Along with concurrency, there are two new hooks introduced by React 18 known as the UseTransition() and the UseDeferredValue() Hooks both help with de-prioritizing state updates, but the question is when should they be used?

  22. 22
    Article
    Avatar of reactnativeexampleReact Native Example·4y

    Motion Pizza: React Native animated app with reanimated + expo

  23. 23
    Article
    Avatar of phProduct Hunt·4y

    Reshaped - Design system built for your scale in React and Figma

    Reshaped is a professionally crafted design system for everyday product development in React and Figma. Usually, you have to set up a million things before you even start working on UI. We took care of it so you can skip your first year of development. Reshaped can be downloaded for free from the App Store.

  24. 24
    Article
    Avatar of hashnodeHashnode·4y

    Machine Learning: Creating an animated avatar that reacts to your voice

    This week I created an animated avatar based on my photo that was turned into an digital avatar with an amazing Python tool. How can we use a Python Machine Learning Tool to create an animated PNG-Tuber avatar. V-Tubing originated in Japan in 2010 but grew popularity in the western world in 2020.

  25. 25
    Article
    Avatar of gcgitconnected·4y

    React 18 — the trickiness of useEffect

    React 18 introduces a new development-only check to Strict Mode. This new check automatically unmounts and remounts every component, whenever a component mounts for the first time, restoring the previous state on the second mount. If we used the useEffect() hook like this:.After refreshing the page, the output would be.