Hashnode·4yThe 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.
Hashnode·4yWhy 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.
Syncfusion·4yMicro-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.
Product Hunt·4yScrollex - 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.
Lee Robinson·4yBuilding 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.
Hashnode·4yReact.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.
Next.js·4yBlog - 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.
Hashnode·4yreact 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.
Hashnode·4y5 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.
This is Learning·4yReact 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 .
Smashing Magazine·4yYou 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.
gitconnected·4yStop 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.
asayer·4yAuthentication 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.
Changelog·4yformkit/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.
freeCodeCamp·4yHow 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.
Dev Genius·4yVue 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.
LogRocket·4yUsing 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.
Hashnode·4yIntroducing 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.
asayer·4yUseTransition() 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?
Product Hunt·4yReshaped - 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.
Hashnode·4yMachine 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.
gitconnected·4yReact 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.
