When You Need a Really Good React Rich Text Editor

Nora Georgieva — Thu, 17 Feb 2022 13:58:56 +0000

Do you need to implement a React Rich Text Editor into your application? If you wonder where to start and how long it would take, you’re right where you need to be.

In the video below, you will see how you can quickly address all your Editor-related questions with the feature-rich, accessible React Editor that is part of the KendoReact UI library. To give you an idea of some of the rich functionality you get out-of-the-box with this WYSIWYG Editor, here’s a short overview:

A comprehensive set of Editor tools - including built-in find and replace tools
Plugin support (create custom tools and integrate them into the Editor)
Editor resizing
Sanitizing Pasted HTML
Exporting to PDF
Different rendering modes
Globalization
Accessibility
And more

In the video below, you will see a demo of two of the powerful customization features of the KendoReact Editor:

Defining input rules – this allows you to modify the user's input as they're creating it by matching their input with a set of rules you've created using regex.
Customizing Editor tools & creating new ones - with this React WYSIWYG Editor, you can decide which tools appear in the toolbar above the panel, as well as make changes to our suite of pre-made tools. You can even create your own.

Companion blog

If you like things in written form, this blog covers the topics discussed in the video: Customizing the React Rich Text Editor: KendoReact Tutorial

The Build vs Buy Debate, or what the costs are of building a web app (Infographic)

Nora Georgieva — Tue, 01 Feb 2022 15:57:48 +0000

Are you trying to decide between developing the UI components for your next web application yourself and marrying a third-party UI library? This is one of the interesting crossroads at which developers - and often whole teams - find themselves. Considering the impact this decision will have on your ability to meet your deadline and on how painful or smooth app development and maintenance will be, it’s worth spending an extra 10 minutes to think it through. ;)

So join me on a colorful walk down the infographic's two roads as we weigh the pros and cons of each approach. We'll look at eight areas which impact the "bottom line" of most decisions whether to build your own components or buy a ready-to-use component UI library:
• Ticking off all project checkboxes
• UI library documentation
• Technical support
• External dependencies
• Software updates
• Component reusability
• Money and return on investment
• The pleasure factor

One more thing before you dive in. I'd love to hear what your experience is with making this decision: what criteria are important to you and your team? Hhow do you approach the topic as a whole? Drop me a line in the comments.

Still here? Thank you! You must really be interested in this topic. If that's the case, I'd also recommend my in-depth blog on the topic, which inspired this infographic: 8 Key Factors When Deciding Between Building In-House and Buying a UI Component Library

The infographic is also available as a PDF file, if you'd like to keep it as a reference. You can download it from here.

React Developers’ Top 10 Topics of 2021

Nora Georgieva — Wed, 12 Jan 2022 11:07:28 +0000

From the React Context API and React Router to building dashboards and form validation, React developers were excited about a range of topics in 2021. Check out the list of the Top 10 hottest topics making waves in the React ecosystem and see if you have missed something. It’s just January - not too late to catch up. Actually, it's never too late!

A Word on Methodology

My method, in short: I have access to the entire Telerik Blogs performance data and I’m not afraid to use it. What's more, I want to share that (knowledge=)power with you.

The Telerik Blogs serve millions of readers every year across a variety of technologies, including hundreds of thousands of unique visitors of all React-focused blogs. Considering that there are about 6-7 million React developers today, I would call the Telerik Blogs' React audience a representative sample and my method: semi-scientific. ;)

(If you’re wondering about how I estimated the size of the React developer community: I combined the SlashData Q3 2021 survey results, which state that there are ~16M JavaScript developers. Then I took a conservative 40% of that number, based on Stack Overflow React usage stats. I say “conservative” because according to the State of JavaScript 2021, 80% of JavaScript devs use React.)

Before We Begin

Let's make this even more fun! Make a mental list of the top React topics in 2021 according to you, and pick your top three. Great, now you have something at stake. Read on to see how closely your list matches what we've observed. In true countdown fashion, we'll start from #10 and work our way up to #1.

React Developer's Top 10 Topics of 2021

.
.
.

Hot Topic #10: The React Context API

State management is always on React developer’s minds, which is why it’s no surprise that ever since graduating to “safe to use in production” with React 16.3, the React Context API has been growing in usage. Sometimes hailed as the Redux killer, one of React Context API’s main benefits is that with its help, you don’t need to install external libraries to handle state management. Leonardo Maldonado did a great job explaining what the Context API is, the problems it solves and how to use it with his popular blog, Understand React Context API.
.
.
.

Hot topic #9: Building dashboard apps with React

You can build all sorts of apps with React and it can be lots of fun. Where things get challenging is when you have to build more complex, line-of-business apps that need to handle a lot of data (perhaps even live-updating data), enable the users to edit, and visualize all this in a user-friendly way. In other words: it can be tough to build a dashboard with React. That’s why we saw steady interest in our three popular dashboard building tutorials all year round. If you haven’t read them, you’re building dashboards the hard way:

.
.
.

Hot topic #8: React PDF Rendering: Exporting HTML to PDF

How to export HTML to PDF in your React apps is a very popular question – mostly because it is hard to do, and you need to have a couple of tricks up your sleeve to do it right. That’s why Carl Bergenhem’s 3-part series on different React-to-PDF exporting scenarios was a big hit in 2021. You’ve missed it? Now you haven’t:

.
.
.

Hot topic #7: How to Create a Responsive Layout in React

We find that developers love design-related development tutorials – and no wonder! Creating good UI/UX often falls on them, yet one could argue that it requires a separate skillset. Using third-party UI libraries that do a lot of the work for you can be of great help (spotlight on KendoReact), but even so, there’s no doubt that good developers need to know a thing or two about UI/UX. That’s why Eric Bishard’s blog has perennial appeal and has been helping developers create responsive layouts since 2019: Creating a Responsive Layout in React.
.
.
.

Hot topic #6: React Hooks

Hooks all the things!… or something. Ever since React Hooks were released in October 2018, they have been helping developers write clearer and more concise code. Needless to say, to make the most of them, you need to learn about them first. No wonder The Ultimate Guide to Learning React Hooks is still a go-to resource for tens of thousands of developers. What’s more, Leonardo Maldonado strikes again in our top 10 chart with his useCallback and useRef: Two React Hooks You Should Learn.
.
.
.

Hot topic #5: Loops in React JSX

JSX is a custom syntax extension to JavaScript which is used for creating markup with React. The most common way of using a loop to render a list of items is with the map function that will return JSX. Not sure how to do that? You’re not alone! Happily, Thomas Findlay solved that mystery for all of us with his super helpful Beginner’s Guide to Loops in React JSX.
.
.
.

Hot topic #4: Building Forms in React & React Form Validation

Four is my favorite number and forms are an interface React developers love to build. Okay, one of these statements is a lie. Forms are an extremely common thing to have in your React app and look deceptively simple to implement until you get down to it. Let's demystify them once and for all! Start with How to Build Forms with React the Easy Way with TJ VanToll, dive into React Form validation with Eric Bishard’s Up and Running with React Form Validation and explore the KendoReact team’s best practices and usage examples for building great forms in React – all extremely popular resources throughout 2021.
.
.
.

Hot topic #3: Dealing with CORS in CRA

If you thought Create React App (CRA) would be high on the list of the most popular React topics, you’ve guessed right! At number 3 of our most popular resources, we have Blanca Mendizábal Perelló’s short and sweet Dealing with CORS in Create React App – a blog that helps you get around CORS issues using CRA’s proxying capabilities. It’s great value for your time as you can scan the blog in three minutes and come out the wiser for it!
.
.
.

Hot topic #2: React Router

Did you guess that one? If you search for “what is React Router” with Google , you’ll get a mind-boggling 49,800,000 results. Developed by the Remix team, Ryan Florence and Michael Jackson, this lightweight, fully featured routing library generates over 6 million npm downloads each week! Little wonder then, that Gift Egwuenu’s Programmatically Navigate with React Router served so many of you this year. If you don’t know what programmatic navigation is, now you know.
.
.
.

Hot topic #1: How to Show and Hide Elements in React

Does the most popular React topic of 2021 surprise you? How to control what gets displayed in your app is one of the first things you need to learn when you start developing – this holds the key to the incredible popularity of this topic. A rough estimate based on this year’s developer surveys (referring to the SlashData’s Q3 2021 survey again, where they note that 4 million developers have joined the JavaScript community in the last year) indicates that every year, hundreds of thousands of developers enter the React ecosystem and start learning. Well, where else to start but from the beginning? With that, I present to you the most popular React blog on Telerik Blogs in 2021, by far: it is Leigh Halliday’s How to Show and Hide Elements in React.

Thank you for staying till the end!

This concludes our yearly retrospective of the topics that rocked the React world in 2021. Did you guess any of the top 3? What are the topics that didn’t make it in this list, but rank in your personal Top 10? Don’t be a silent observer, let me know in the comments!

Curious squirrel photo by Hasse Lossius on Unsplash

DEV Community: Nora Georgieva

When You Need a Really Good React Rich Text Editor

The Build vs Buy Debate, or what the costs are of building a web app (Infographic)

React Developers’ Top 10 Topics of 2021

A Word on Methodology

Before We Begin

React Developer's Top 10 Topics of 2021

Hot Topic #10: The React Context API

Hot topic #9: Building dashboard apps with React

Hot topic #8: React PDF Rendering: Exporting HTML to PDF

Hot topic #7: How to Create a Responsive Layout in React

Hot topic #6: React Hooks

Hot topic #5: Loops in React JSX

Hot topic #4: Building Forms in React & React Form Validation

Hot topic #3: Dealing with CORS in CRA

Hot topic #2: React Router

Hot topic #1: How to Show and Hide Elements in React

Thank you for staying till the end!