Best of ReactJune 2022

  1. 1
    Article
    Avatar of asayerasayer·4y

    Build beautiful UI components with NextUI

    NextUI is a modern React UI framework that allows you to make beautiful and fast websites/applications regardless of your design experience. You can create beautiful UI in your React and Nextjs application with just a little customization in the App.jsx to load the NextUI provider. It has many cool features, which is why it is loved and used by many developers.

  2. 2
    Article
    Avatar of communityCommunity Picks·4y

    You Might Not Need an Effect

    Removing unnecessary Effects will make your code easier to follow, faster to run, and less error-prone. Effects are an escape hatch from the React paradigm. They let you synchronize your components with some external system like a non-React widget, network, or the browser DOM.

  3. 3
    Article
    Avatar of joshwcomeauJosh W Comeau·4y

    My Wonderful HTML Email Workflow

    MJML is a responsive email framework from Mailjet. It essentially provides a layer of abstraction over raw HTML. The MJML language provides a set of common tags you can use to structure your email. As long as you follow the MJML conventions, your email should render properly across all email clients.

  4. 4
    Article
    Avatar of honeypotHoneypot·4y

    6 Best Frontend Communities to Join in 2022

    In 2022, there are lots of online developer communities that can scale your learning experience and speed. WeLearnJS is a slack community of JavaScript developers with more than 12,000 members as of June 2022. Reactiflux is an online Discord community of React developers with a massive size of more than 185,000.

  5. 5
    Article
    Avatar of hashnodeHashnode·4y

    Introduction to Vite: The Next Generation Frontend Tooling

    Vite is the next generation frontend tooling. It is a solution to slow server starts because it uses native ESM to serve code. Most tools like webpack, Parcel and Rollup are bundle-based. This means the code has to be completely bundled before it can be served. Vite only needs to transform and serve source code on demand.

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

    Blog - Next.js 12.2

    Middleware is now stable in 12.2 and has an improved API based on feedback from users. On-Demand Incremental Static Regeneration (ISR) allows you to update the content on your site without needing to redeploy. Edge API Routes support streaming responses from the server. SWC Plugins (Experimental) extend compilation with your own plugins.

  7. 7
    Article
    Avatar of devtoDEV·4y

    Learn MERN like a pro

    This is the high level plan for my upcoming udemy course. The course will focus on the use of JavaScript and Node. It will cover user management, feature implementation, deployment and maintenance. It is expected to run for three months. The first phase of the course will run from September to October.

  8. 8
    Article
    Avatar of devgeniusDev Genius·4y

    Wasp — language for developing full-stack Javascript web apps with no boilerplate

    Wasp is a new programming language for developing full-stack web apps with less code. It makes developing web apps easy while still allowing you to use the latest technologies like React, Node.js, and Prisma. In this post, we will share with you why we believe Wasp could be a big thing for web development.

  9. 9
    Article
    Avatar of devdojoDevDojo·4y

    How to get cool animations in your React projects

    Framer Motion is an animation library for React made by Framer. In this guide we will apply Framer Motion animations to a basic example project. The project is made with Next and TypeScript, but you can apply all the concepts to a normal React project with JavaScript.

  10. 10
    Article
    Avatar of asayerasayer·4y

    Fetching and Updating Data with React Query

    React Query is often described as the missing data-fetching library for React. It makes fetching, caching, synchronizing, and updating server state a breeze. It works amazingly well out-of-the-box, with zero-config, and can be customized to your liking as your application grows.

  11. 11
    Article
    Avatar of asayerasayer·4y

    Using Typescript in React: a Crash Course

    Typescript is an open-source programming language created by Microsoft. It was designed to develop large applications by adding static typing controls to JavaScript. It may be used to develop applications for both client-side and server-side. You’ll need an understanding of React, familiarity with Javascript Types, and basic understanding of Node and npm.

  12. 12
    Article
    Avatar of vuejsdevelopersVue.js Developers·4y

    Vue 3 was a mistake that we should not repeat

    More than 4 years have passed since the initial introduction of Vue 3. Many discussions over several RFCs and a lot of influence from other modern frameworks including React and Svelte have shaped Vue. Vue is probably the most powerful and well-rounded framework out there, capable of supporting applications of any scale and architecture.

  13. 13
    Article
    Avatar of hashnodeHashnode·4y

    Steps To Build A Professional Next.js Portfolio

    In this blog I am going to explain all necessary steps to create a multiple pages portfolio/website using React, Next.js and Tailwind with JavaScript. We will use React because its preferable when dealing with or building multiple pages, server-rendered websites. Tailwind works by scanning all of your HTML files, JavaScript components, and any other templates for class names.

  14. 14
    Article
    Avatar of streamStream·4y

    Build a Twitter Clone w

    Twitter is a social media application that allows users to create tweets, react to tweets, add comments, get notifications of engagements, and follow other users. We will create a clone of Twitter using Stream Feeds and the React Activity Feeds SDK from Stream. This article will be a series of tutorials broken into three parts.

  15. 15
    Article
    Avatar of appsignalAppSignal·4y

    How to Handle Errors in React

    In React 16, a new concept got introduced — React Error Boundaries. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree. Then, they log those caught errors and display a fallback UI instead of the component tree that crashed. We'll go through different ways to handle errors in React applications.

  16. 16
    Article
    Avatar of gcgitconnected·4y

    Vue Creator Tells React Team: You Should Recommend Vite over Create-React-App for React Developers

    Vue Creator Tells React Team: You Should Recommend Vite over Create-React-App for React Developers. Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects, such as VanillaJS, Vue, React, and Svelte.

  17. 17
    Article
    Avatar of logrocketLogRocket·4y

    Build an eCommerce app with Next.js and Shopify

    With Shopify, users can set up an online store, and thanks to their Storefront API, developers can create a custom client application to connect to it. In this article, you will learn how to set up a Shopify store and get your Store Front API token. You will then create a Next.js application to list and display your products with dummy data. Finally, you can connect your Next.JS application to your Shopify application to fetch your real products.

  18. 18
    Article
    Avatar of syncfusionSyncfusion·4y

    Will React Hooks Replace React Router?

    Hookrouter was introduced as a flexible, fast router based on Hooks. Hookrouter produces the same outcome as the React Router but in a more streamlined and lightweight manner. We can apply the navigate() Hook to the direct URL of a particular page. The only difference is that instead of loading a new page, Hookter moves navigation to the history stack.

  19. 19
    Article
    Avatar of asayerasayer·4y

    Alternatives to React: Solid JS

    React is the highest JavaScript library in awareness and usage according to State of JS 2021. This massive adoption has created job openings on the framework and kept its developers in high demand. But even with its popularity, React has a lot of competition as new JavaScript frameworks are being built every day that try to be more efficient and improve front-end development.

  20. 20
    Article
    Avatar of commoninjaCommonNinja·4y

    How To Successfully Build an App With React Query │ Common Ninja

    React Query is often described as the missing data-fetching library for React. It makes fetching, caching, synchronizing, and updating server state in your React applications a breeze. In this article, we will build a “lyrics finder’ app, focusing on the benefits of React Query.

  21. 21
    Article
    Avatar of pointerPointer·4y

    payloadcms/payload: Free and Open-source Headless CMS and Application Framework built with TypeScript, Node.js, React and MongoDB

    Payload is a free and open-source TypeScript headless CMS & application framework built with Express, MongoDB and React. It's a code-first CMS, which allows us to do a lot of things right. Payload gives you everything you need, but then steps back and lets you build what you want.

  22. 22
    Article
    Avatar of phProduct Hunt·4y

    Makeswift 2.0 - Make your Next.js site visually editable in minutes

    Makewift 2.0 lets developers integrate React components from their Next.js app into our visual builder. Unlock your next.js site and give marketers and designers control over content and layout starting with just one page. Makewift is a free, open source, cross-platform programming tool for iOS and Android.

  23. 23
    Article
    Avatar of medium_jsMedium·4y

    What’s New in React 18

    React 18 is more focused on making the UI more performant by introducing out-of-the-box features and improvements powered by concurrent rendering. Automatic Batching is when React groups multiple state updates into a single re-render for better performance. Suspense lets you declaratively specify the loading state for a part of the component tree if it’s not yet ready to be displayed.

  24. 24
    Article
    Avatar of hashnodeHashnode·4y

    This article is written by an AI 👀

    React is a JavaScript library that allows you to build user interfaces with JavaScript. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. It can also be used to create more complex views, such as a shopping cart or a blog.

  25. 25
    Article
    Avatar of react_nativeReact Native·4y

    Announcing React Native 0.69 · React Native

    React Native 0.69 is the first release to support React 18. Users on the New Architecture on Android will need to build Hermes from source. The most important improvements in this release are centered around React 18 support and bundled Hermes. There have been other notable changes, including: Deprecating support for iOS/tvOS SDK 11.0, version 12.4+.