Hashnode·4yBuild 5 Web Apps in 10 Hours using Next.js, React.js & Tailwind CSS.
This post tutorial shows you how to build 5 Web Apps in 10 hours. All of the web apps are part of the Frontend Mentor challenge projects. The goal is to make it look like the design given by the Front End Mentor. Here are the links to all the projects that we will build.
asayer·4yBuilding a Video Chat App with Next.js, 100ms, and TailwindCSS
Video chat applications have a lot of popularity and usage in the tech world today. 100ms is an infrastructure provider that allows users to effortlessly set up optimized audio and video chat interfaces. In this tutorial, readers will learn how to integrate the 100ms features to create a chat application using Next.js and TailwindCSS.
Crio.Do·4yFresh and Trendy JavaScript Projects for Beginners
JavaScript is the most popular programming language in the web development space. A large number of developers use JavaScript on a daily basis but are unaware of what happens behind the scenes. For newcomers and even experts in the industry, JavaScript is quite complex and perplexing. To become a JS Master, the most efficient strategy is to learn by doing.
Pointer·4yfacebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.
asayer·4yBuilding a Progressive Web App with React 18
A Progressive Web App is a website that can behave like a native app. When “downloaded” into the user’s device, these websites have almost the same features a native mobile app would. Some features a PWA is capable of include push notifications, the ability to work on Android and IOS without much difference.
Changelog·4yspacedriveapp/spacedrive: Spacedrive is an open source cross-platform file explorer, powered by a virtual distributed filesystem written in Rust.
Spacedrive combines the storage capacity and processing power of your devices into one personal distributed cloud. Spacedrive provides a file management experience like no other, and its completely free. Most of the listed features are still experimental and subject to change. Links are for highlight purposes only until feature specific documentation is complete.
SitePen·4yDoing It All With Deno
Deno is a Node.js tool that lets you write client and server applications from the command line. You can write a Deno-based Todos app with nothing but Deno (and libraries) The app doesn’t have an explicit build step — you can just start the server and it will be ready to go. Everything is implemented with, or managed by, Deno.
Hashnode·4yWhy you should use Chakra UI in React
Chakra UI is a component library for React. It is designed to be atomic and you can build elements quickly and easily. The code samples in this article are made with NextJS but you can use it with any React-based library/framework such as Gatsby or Create React App.
freeCodeCamp·4yReact + WebSockets Project – Build a Real-Time Order Book Application
In this tutorial, we will see how to build an Order Book web application. We'll use React with Typescript for creating the UI, Redux for managing the application state, and styled-components for applying the styling. And last, but not least, we'll use WebSockets for fetching the data feeds.
Dev Genius·4yEmailJs in your React app from scratch.
EmailJs is a platform that allows you to send and receive emails without using a backend. You can use various ways to set up EmailJs in your React app; this article will focus solely on EmailJs installed as a dependency. We will use a basic form with four input fields that will look like so. Next, we will dive into EmailJs' implementation and how to create email templates.
DZone·4yThe Complete React Developer Salary Guide for 2022
React JS is the most in-demand web framework in 2022, with 40.41% of software developers globally indicating they use it to develop web applications. The more skilled you are as a React Developer, the higher the salary employers are willing to pay. The top earners in this profession in the U.S. earn an average annual salary of $146,000.
ITNEXT·4yReact + Flutter = Native
React + Flutter = Native is not at all a theorem. The app and source codes accompanying this article are what I call Kludget Work : Klumsy, Lame, Ugly, Dumb, but Good Enough To Work. The ultimate code editor has to be truly cross platform. We want something portable, lightweight and lightning-fast.
Syncfusion·4yImplementing React Custom Hooks: A Complete Guide
React Hooks are functions that allow you to use state and life-cycle features from function components. Custom Hooks can be an excellent way to share logic between components and improve your component tree’s readability. This article explains how to implement various custom Hooks in React.
DEV·4yReact 18 Quick Guide & Core Concepts Explained
React 18 features automatic batching, Transitions, Suspense on the server and Hooks. Concurrency allows React to interrupt rendering. New features such as suspense, streaming server rendering and transitions are powered by concurrent rendering. This release focuses on performance improvements and updating the rendering engine.
Robin Wieruch·4yReact Hook: useLocalStorage
A neat custom React Hook that shows how to use local storage in React to store state. You can just use it in any React component and it allows you to write and read state. The hook is only there as a learning experience though. If you rely on the local storage for your React application in production, you should check out more widely used hooks.
Robin Wieruch·4yReact Hook: Detect Click outside of Component
A tutorial about how to detect a click outside of a React component by creating a custom React hook for it. For example, you may want such custom React Hook for various components like a dialog or dropdown, because they should close when a user clicks outside of them. Much of what you will learn here goes back to the concept of event bubbling and capturing in JavaScript.
DevDojo·4yReactJS Virtual DOM and Reconciliation - Explain Like I'm Five
ReactJS is a web app that uses the DOM (Document Object Model) to create web pages. DOM is represented as a tree structure document object that can be queried and updated. A new Virtual DOM tree is created whenever the element's state changes. Virtual DOM is created as a copy of the original DOM.
DevDojo·4y21 Best React Component Libraries To Try In 2021
React is a JavaScript library that lets you develop a top UI for both web and mobile applications. It conveniently integrates with other JavaScript frameworks and libraries and includes small, reusable bits of code called the components. React component libraries not only optimize your UI development process but also provide extreme flexibility due to their high modularity.
LogRocket·4yPagination and infinite scroll with React Query v3
React Query makes it easy to fetch, cache, sync, and update server state in React applications. We’ll use the Random User API, which allows you to fetch up to 5,000 random users either in one request or in small chunks with pagination. This article assumes that you have a basic understanding of React.
Dev Genius·4yReact component patterns to use based on need (Part 2)
React component patterns to use based on need (Part 2) Part 1 discussed what design patterns are, how they have evolved over the years in React, and what questions we need to ask that will define our components’ needs. In this article, let’s focus on the next set of questions that we can ponder upon.
Medium·4yStack & Tools You Should Learn to Become a Full-Stack Developer Faster
Single Page Applications (SPAs) are the way to go. Vue.Js is one of the most popular SPA-building libraries. Node.js is a JavaScript runtime environment that is open-source and cross-platform. MongoDB is the “M” in the famous MEAN and MERN stacks.
Coins Bench·4yHow To Build A Classic Web3 NFT Minting Dapp with React and Solidity: Part 1
How to set up an Error-free Web3 project with React and Solidity. How to code an NFT minting smart contract with Tailwind CSS. Using Truffle and Ganache to develop apps for the Web3 network. Using React to build a Dapp for NFT Minting.
LogRocket·4yHow to build faster animation transitions in React
Transition-hook is one of many Hooks available for creating animations in React. It’s lightweight, has simpler syntaxes, and is more performant. At the time of writing, it is not ready for production, so it can’t be used in actual applications. The overhead cost of React Hooks to add animations to your applications is negligible since Hooks are fairly small.
