Best of ReactMarch 2022

  1. 1
    Article
    Avatar of honeypotHoneypot·4y

    8 Best React Courses 2022

    React was introduced in 2013 by Facebook, and has since successfully risen above most other frontend frameworks in terms of usage and popularity. React developers are some of the most in-demand developers around the world as companies adopt React in their tech stack. Here are some great courses to start with!

  2. 2
    Article
    Avatar of reactReact·4y

    React v18.0 – React Blog

    React 18 is the latest version of the popular React mobile app. It includes new features like streaming server-side rendering and automatic batching. Concurrent Rendering is a behind-the-scenes change that unlocks powerful new capabilities. The most important addition in React 18 is something we hope you never have to think about.

  3. 3
    Article
    Avatar of tdsTowards Data Science·4y

    My Favorite VS Code Extensions of 2022

    The Atom One Dark theme is my favorite because the colors have useful contrast and look great. VSCode Great Icons look so much better than the default, and the folder icons make it easier to tell which directory I’m in. I find this especially useful when writing React components where a lot of the boilerplate code gets repetitive.

  4. 4
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·4y

    Clean Up Your React Code

    React has a declarative programming approach. With prop types, we can make our components (both class and function components) well-defined. By following the composition paradigm we have clean, small, testable components. We can compose these components together and create maintainable, readable, and complex applications.

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

    Delightful React File/Directory Structure

    React is famously unopinionated when it comes to file/ directory structure. How should you structure the files and directories in your applications? There is no one “right” way, but I've tried lots of different approaches in the 7+ years I've been using React. In this blog post, I'll share the structure I use across all my current projects, including this blog.

  6. 6
    Article
    Avatar of snipcartSNIPCART·4y

    The 6 Best JavaScript Frameworks to Use in 2022

    JavaScript frameworks are tried and tested tools for building scalable web applications. They contain a collection of JavaScript code libraries that provide pre-written JS code for standard programming features and tasks. Frameworks enable you to add functionalities like testing and linting to ensure you're shipping error-free code. There are more than 20 frameworks and 80 libraries for developers to choose from.

  7. 7
    Article
    Avatar of webtoolsweeklyWeb Tools Weekly·4y

    New MDN, Frameworks, Build, React

    Mozilla's web docs, referred to as MDN, have been given a fresh new design. The navigation is simple and broken down into easy-to-digest sections. The individual article pages have also been improved. There's lots more detail in the launch post, including mention of an upcoming optional subscription service.

  8. 8
    Article
    Avatar of hashnodeHashnode·4y

    React useEffect cleanup

    React's useEffect hook is a super hook to run side effects. The hook comes with a cleanup function, which you might not always need, but it can come in handy. Some use-cases for this are to clean up subscriptions, clean up modals and clear timeouts.

  9. 9
    Article
    Avatar of simplethreadSimple Thread·4y

    Web Standards Are Cool Again

    Remix is the latest open-source, fullstack, web development framework to hit the npm registry. It couples web fundamentals like the client/server model, HTTP caching, and native HTML forms with modern UI tools like dynamic page refreshing, nested routing, and React to create a truly remarkable way for developers to create fast, interactive, and portable user experiences.

  10. 10
    Article
    Avatar of phProduct Hunt·4y

    pdfme - Open source PDF library fully written in TypeScript

    A PDF generator library fully written in TypeScript coming with a React based UI template editor. Open source, developed by the community, and completely free to use under the MIT license! More detail -> https://pdfme.com/fully-written-in-TypeScript-coming-with-a-React-based-UI-templates-editor.

  11. 11
    Article
    Avatar of freecodecampfreeCodeCamp·4y

    Create a Portfolio with React featuring Cool Animations

    We just published a React tutorial that will teach you how to build a frontend portfolio with neat animations. Creating a portfolio website is a great way to improve your frontend development skills. Watch the full course below or on the freeCodeCamp.org YouTube channel (1.5 hour watch).

  12. 12
    Article
    Avatar of asayerasayer·4y

    Integrating Axios with React Hooks

    React Hooks provide a simple, functional way of building stateful components. They can be used to wrap different APIs or digestible functions. In this article you’ll learn how to use Axios as well as how to build a comfortable wrapper around it. Axios is one of the most popular HTTP JavaScript client libraries.

  13. 13
    Article
    Avatar of logrocketLogRocket·4y

    React component design patterns for 2022

    Design patterns are solution templates to common software development problems. In React, they are proven methods to solve common problems experienced by React developers. The higher-order component, or HOC pattern, is an advanced React pattern used for reusing component logic across our application. The provider pattern is used to share global data across multiple components in the React component tree.

  14. 14
    Article
    Avatar of pointerPointer·4y

    mantinedev/mantine: React components library with native dark theme support

    Mantine is an open-source, cross-components, state management, and notification system. Mantine has a very friendly community, we are always happy to help you get started:Join Discord community – it is an easiest way to get help, all questions are usually answered in about 30 minutes.

  15. 15
    Article
    Avatar of hashnodeHashnode·4y

    React useEffect Hook usages you must know

    React is a JavaScript-based user interface library. React components are isolated reusable pieces of code logic with their own UI. React provides many standard in-built hooks to manage states, isolate side effects, create references, improve performance, etc. We can also create custom hooks, which are just JavaScript functions with access to many React features. We will learn six usages of useEffect hook to run and clean up a side effect.

  16. 16
    Article
    Avatar of jsPlainEnglishJavaScript in Plain English·4y

    Clean Up Your React Code

    React has a declarative programming approach. To clean up our code, it is important to understand what Declarative Programming means and follow functional programming style. An immutable value is a value that cannot be changed. Instead of mutating the value of the original data, we need to create a new copy and return it.

  17. 17
    Article
    Avatar of devtoDEV·4y

    React best practices and patterns to reduce code - Part 2

    I've another article about React best practices and patterns to reduce code. It's a good article to read before you start to write your own React code. We'll start with the most common ones. Don't write functions inside jsx elements. Use styled-components to style your components.

  18. 18
    Article
    Avatar of phProduct Hunt·4y

    Avvvatars - Open Source React Unique UI Avatar Library

  19. 19
    Article
    Avatar of codemotionCodemotion·4y

    A Guide to the NextJS Framework

    Next.js is a front-end framework that aims to marry the world of UX and backend functionality. It provides a ready-to-go solution for the server-side rendering (SSR) of React components. Next.js allows for the rendering of these React components on the server before the page is sent to the client.

  20. 20
    Article
    Avatar of bitBits and Pieces·4y

    I Optimized My React App and Made It Even Faster

    React.memo prevents a component from re-rendering unnecessarily if the props have not changed. Let’s build a simple application where we pretend to call an API on the click of a button. The API returns the name and the favourite dish of the given person. Clicking on the button 10 times re-renders the Intro component 10 times.

  21. 21
    Article
    Avatar of devtoDEV·4y

    What are your Favourite Tools in React, and why?

    This is a great list, keen to check out React Spring and UUID when time permits. My fav tools would have to be: Hooks, Context, UUID and Context. Cheers, @mrpaulishaili! 🙉.  “I’m not sure how I dev'd without them before!”

  22. 22
    Article
    Avatar of bitBits and Pieces·4y

    React.memo() vs. useMemo()

    React.memo() and useMemo() can be used to speed up the rendering process of React components. This article will compare and contrast React. Memo and use Memo() while discussing their use cases. What are the major differences between React.memos and usememos? Read on to find out.

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

    Why React 18 Broke Your App

    You’ve just gotten done with your React 18 upgrade, and, after some light QA testing, don’t find anything. You decide to make a minimal reproduction and create a demo of said hook. You expect it to throw an “alert” dialog after a second of waiting, but weirdly, the dialog never runs at all. The reason your app broke in React 18 is that you’re using Strict Mode.

  24. 24
    Article
    Avatar of hashnodeHashnode·4y

    🧑‍💻 Building CLIs with React Ink

    React Ink is a library that lets you build command-line apps with React. It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like props are available in Ink as well. In this post, we’ll explore how Ink works by building a cool little CLI, that fetches info about Pokemon using PokeAPI!

  25. 25
    Article
    Avatar of ionicIonic Blog·4y

    Ionic vs. React Native: Performance Comparison

    Ionic and React Native compete in the cross-platform application development ecosystem. The two are different in terms of their approach and underlying architecture. Ionic fully subscribes to the philosophy of leveraging web technologies to deliver its applications. React Native also runs using JavaScript (JS), but does so under the guise of orchestrating platform-specific user interface (UI) controls.