Honeypot·4y8 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!
React·4yReact 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.
Towards Data Science·4yMy 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.
JavaScript in Plain English·4yClean 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.
Josh W Comeau·4yDelightful 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.
SNIPCART·4yThe 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.
Web Tools Weekly·4yNew 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.
Simple Thread·4yWeb 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.
Product Hunt·4ypdfme - 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.
freeCodeCamp·4yCreate 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).
asayer·4yIntegrating 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.
LogRocket·4yReact 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.
Pointer·4ymantinedev/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.
Hashnode·4yReact 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.
JavaScript in Plain English·4yClean 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.
DEV·4yReact 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.
Codemotion·4yA 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.
Bits and Pieces·4yI 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.
Bits and Pieces·4yReact.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.
This is Learning·4yWhy 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.
Hashnode·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!
Ionic Blog·4yIonic 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.