A step-by-step guide to LinguiJS library that is a powerful internationalization framework for React — What will be covered Prerequisites; Installation; Configuration; Optimization; JSX Macros; JS Macros; Plurals; Locale detection; Prerequisites We will use a simple TypeScript CRA application without any additional dependencies and custom configurations: yarn create react-app my-app --template typescript

Step-by-step guide of advanced technique in React for reusing component logic — What will be covered Prerequisites; HOC (Higher-Order Components); Render props; Component Wrapping; Prerequisites Create react app with typescript template and clean-up from all unnecessary files like styles, logo, and test files: yarn create-react-app react-hoc-examples --template typescript

Addons unlock advanced features and new workflows for Storybook — What will be covered Links; Accessibility; Designs; Storysource; Mock Service Worker; @storybook/testing-react; Interactions; Chromatic; Pseudo States; Note: After adding addon dependency to your project you will need to update addons array in .storybook/main.js file,

A brief guide to testing GitHub actions locally on your machine without pushing your changes to GitHub. — Step 1: Install act Mac users: brew install act GitHub - nektos/act: Run your GitHub Actions locally 🚀 "Think globally, act locally" Run your GitHub Actions locally! Why would you want to do this? Two reasons: Fast…github.com Step 2: Install/Run Docker Empowering App Development for Developers | Docker What's New Read the Docker Business Whitepaper! Docker Business helps organizations build modern applications at scale…www.docker.com

A quick guide to automated visual regression testing with ‘jsdom-screenshot’ library — What is Automated visual regression testing? It’s better to see once than hear a hundred times. I found a nice GIF that beautifully explains what is “Automated visual regression testing”. It was found on the Storybook Visual Tests page:

A step-by-step guide to automated visual regression testing with React and Chromatic — What is Automated visual regression testing? It’s better to see once than hear a hundred times. I found a nice GIF that beautifully explains what is “Automated visual regression testing”. It was found on the Storybook Visual Tests page:

A quick-start guide to styled Components with examples — Styled components is the result of wondering how we could enhance CSS for styling React component systems: Automatic critical CSS, No class name bugs, Easier deletion of CSS, Simple dynamic styling, Painless maintenance, Automatic vendor prefixing. What will be covered in this article: Prerequisites; Installation; Basics; Autoprefixer; Global styles;

How many times have you created the same thing multiple times, remembering how you did it in the past, looking for snippets of your own code in a project or in your notes (Or Stackoverflow, of course). Constant copy-paste. How to break this vicious circle? Templates! What will be covered in this article File templates File template…

In this article, we will review the basic steps that will make your site more attractive when using it on social networking pages. Problem Let’s imagine we have created an awesome web app (in our case it was created by React.js), deployed it and now it is available at http://my-cool-app-333.com, now…