Tutorial on how to configure path aliases in Create React App without ejecting — What is our task? We need to be able to use path aliases instead of the relative path in our Create React App (v5) (Typescript template) without ejecting: import { ActionsContainer } from '../../../components/ActionsContainer'; import { ActionButton } from '../../../components/ActionButton'; Like this: import { ActionsContainer } from '@/components/ActionsContainer'; import { ActionButton } from '@/components/ActionButton';

Tutorial on how to add a placeholder to the Lexical’s empty Node element. — What is our task today? Let’s check what is the placeholder behavior in Notion.so:

Tutorial on how to use Lexical Link Plugins with React: LinkPlugin, AutoLinkPlugin, LexicalClickableLinkPlugin — Prerequisites This article is a continuation of the previous one: Lexical. How To Use Markdown Plugin Tutorial on how to use a Lexical Markdown Plugin with React.artem-diashkin.medium.com What will be covered LinkPlugin (wrap node with a link on link paste) AutoLinkPlugin (automatically wrap with a link on text change)

Tutorial on how to use a Lexical Markdown Plugin with React. — Disclaimer: Think twice before using the Markdown plugin if you are going to use custom nodes; Because converting custom node to the markdown and in reverse will require to create custom Transformers, and that’s not an easy task, let me tell you. Prerequisites This article is a continuation of the previous…

Tutorial on creating a draggable element with Lexical JS; Basics with examples. — Lexical An extensible text editor framework that does things differentlylexical.dev Thanks to Luci Nyan for inspiration! feat(lexical-playground): draggable block by LuciNyan · Pull Request #2860 · facebook/lexical Description Add draggable block plugin 2022-09-14.23.41.11.mov Close: #2115github.com What are the final results of this tutorial:

Zustand will make your life much easier, trust me — What will be covered Prerequisites Creating zustand store Getting state without hooks Using redux dev tools Persisting store values Async actions GitHub — nemrosim/react-zustand-example This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…github.com CodeSandbox CodeSandbox is an online editor tailored for web applications.codesandbox.io

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,