asayer·4yReact Architecture Patterns for Your Projects
React is an un-opinionated framework in the front-end ecosystem. Its versatile nature does not provide a way to organize and structure a web application. An organized codebase is how a team of developers gets productive within the given structure. In this article, let’s look at some of the ways to keep the lifecycle of a React application healthy and well organized.
DEV·4yBest VS code Extensions for Web Development
VSCode Extension helps you to boost your Productivity in Web Development. This post is for everyone including beginners including frontend and backend developers. We will show you how to use VSCode to improve your productivity on the front end and backend of your website.
Honeypot·4y5 Reasons To Use UI Libraries to Style React Apps
Use UI libraries to style React apps to build the MVP quickly and grab the bits and pieces of the UI components to deliver a beautiful website in 2 days. There are lots of amazing libraries from Material UI, Semantic UI, Chakra UI to React Bootstrap. Using UI libraries saves you lots of potential code which could be written to make your app look good.
Telerik·4yFrom Figma to React—Reusable Components
Figma is a free, cloud-based design tool that has been dominating the design world recently with its powerful features and easy collaboration for the entire team. React is a component-based JavaScript library for building rich and dynamic user interfaces. The main indicators for success we agreed on are consistency, reusability and time to develop.
DEV·4yReact Hooks : Zero to Hero
React hooks are like Anchor ( same as what ships drop in the ocean to attach the ship and ocean floor) between React state (ocean floor) and life-cycle features ( ship ) Only work with function based components, not with class based components. Can't nest hooks inside loops, conditions or nested functions.
Medium·4ySet Up Web3 in Your React App
This is a quick guide for setting up web3 in your React application. We will be creating a minting website that authenticates a user’s wallet and allows them to mint an NFT. You will be able to take advantage of decentralized identity in your application based on the wallet address e.g., .ETH domain name and later on NFT profile pictures.
SitePoint·4yThe Most Popular React UI Component Libraries in 2022
React powers the user interfaces (UI) of close to 10 million websites around the world. While the base library of React is solid, there are multiple component libraries filled with valuable design elements. In this article, we’ll review some of the best React UI component libraries, and how to choose the right one for you.
asayer·4y5 Projects You Need to Build to Get Started with Reactjs
The age-old question of “how do I get started with X?” is not an easy one to answer. Here you can find a list of 5 interesting projects you can build and learn something from in the process. The secret to breaking free from that paralysis is to start doing something, it doesn’t matter what.
Vercel·4yThe future of Svelte, an interview with Rich Harris – Vercel
Svelte has been voted the most loved Web framework with the most satisfied developers. In this 45-minute interview, hear Rich Harris talk about his plans for the future of the framework. Other topics include funding open source, SvelteKit 1.0, the Edge-first future, and more.
DEV·4yReact practices for Beginners
React is arguably one of the most used Frameworks out there today. Everyday people are opting this framework for its UI first approach. It's safe to say that the React Library has matured over the years and the whole ecosystem is still growing. Here are some practices that you can opt and avoid while getting comfortable in the React bubble.
DEV·4yHow I received 4 salary raises in 2 years as a Software Engineer
In this essay, I'll talk about skills, experiences, opportunities, and mindset. Basically how I became better at my own craft. My focus was always on the journey and I didn't intend to grow at the company. My experience may not help you "climb" the Career Ladder. But I hope you can steal some ideas and use them in your favor.
DEV·4yReact.memo() is your friend
React.memo() gives us the ability to memoize a React component. Memoization is a general concept which basically means caching the results of some kind of computation for later use. It is an optimization technique which is used quite extensively in the programming world. When memoization is used, there must be a criteria which would dicate when the cached results are no longer valid.
Telerik·4yReact Query—Fetching Data the Right Way
React Query is a data-fetching library for React applications that simplifies fetching data. It is a set of React hooks that help us improve the way we do data fetching in our applications. It has powerful features such as window refocus fetching, prefetching, optimistic updates and TypeScript support.
gitconnected·4yWhat is new in React Router V6?
React Router is the most popular library to manage your React application navigation. Version 6 brings the component Routes, which is basically the replacement of the old Switch component. The idea, according to the documentation, is to make it easier for an application to be seen as different independent parts, each of them living within a path.
LogRocket·4yPurgeCSS: Remove unused CSS code
Unused code can result in a larger file size, harm performance, make it easy to lose track of each item, and cause optimization problems. Removing unnecessary code will make your website load faster because the browser will request and parse less code. In this tutorial, we’ll explore PurgeCSS, a tool for removing unused CSS code.
DEV·4yAgrippa 1.3 is out 🎉🎉🎉
The third minor version of Agrippa, the React component CLI, is finally out! Since v1.2.0 came out, we've grown by 120% (154 stars) over the course of just over 40 days. The new version was in the works for longer than the previous two; integration tests were a challenge to implement.
LogRocket·4yModern API data-fetching methods in React
React beginners might wonder, “What exactly is an API?” To understand what an application programming interface (API) is, let’s think of an application where a section displays the daily weather forecast of the present city. With the API, we don’t need to create everything from scratch, simplifying our process.
DEV·4yMy secret trick for writing great React components
Every React component should serve only one purpose. If it ends up growing, it should be decomposed into smaller subcomponents. I do not write a single test for my React components. I just create a pure function with all the logic, save it in a file and just use it in my components.
asayer·4yReact 18 - What's New and How it Will Benefit Developers
React18 is the latest iteration of the framework, and it is geared at reducing the amount of code you need to write. In this release, it is moving to a functional paradigm where data is immutable. This will require some changes for developers but it should improve the performance and functionality of your applications.
LogRocket·4yReact Remix vs. Next.js vs. SvelteKit
Remix is a full-stack web framework for from the creators of React Router. It has gone from a paid to a free model, which is big news within the meta-framework community. In this post, we’ll compare a few of their features, ranging from initiating a project to adding styling.
LogRocket·4yUnderrated React Hooks you’re missing out on
React Hooks allow us to use function components throughout projects to build both small and large applications. In React, data is passed from parent to child components via props, known as unidirectional data flow. The useImperativeHandle Hook allows us to expose a value, state, or function inside a child component to the parent component through ref. We’ll explore their use cases, syntax, and a few code examples.
LogRocket·4yReact Server Components in Next.js 12
React Server Components (RSC) aims to cut out the work we usually give to the client by rendering everything, including the components, on the server. This approach produces zero bundle-sized components, consequently improving the load time of your web pages. RSC won’t be shipped with the first version of React 18 and is only available in certain frameworks — such as Next.js — under an experimental flag.
