5 features to improve user experience in React apps

In recent years we’ve seen an explosion of web applications. There are a number of different web apps for various customers and use cases. When building any web application, it’s extremely important to make sure it has user friendly features. Otherwise customers will go to a competitor. Always assume that users can easily find alternative to your web app. It will help you make it as best as It can be.

Without further ado, let’s discuss 5 features to improve user experience of your app.

Autocomplete

It is no secret that users hate typing. In fact, they don’t like doing more work than they absolutely need to. Therefore autocomplete is a perfect solution that allows users to easily fill out forms. Autocomplete can also help with accuracy of collected data. If users accept your autocomplete suggestion, then it’s more likely that they are submitting a valid value. Because your autocomplete option would not be an invalid value.

Expand / collapse

You have probably noticed that web applications are overloaded with content. This can be audio, video, text, or any other type of content. Most of the time, users don’t want to see a lot of the content on your website. Therefore it is crucial to help them find what they need.

Expand/collapse feature allows you to display a list of items with most essential information. If users are interested in a certain item based on its title or other important highlights, they can click on it to expand and learn more. This saves their time.

It’s fairly easy to implement expand / collapse feature in React. First, we need to create a state variable that contains a Boolean value. If it is true, then the content should be expanded. If it’s false, then your app should display only essential bits of information. Here’s an article that does a pretty good job of explaining how expand/collapse feature works in React:

https://simplefrontend.com/expand-and-collapse-react-component-list-div-text-examples/

Smart forms

Forms are an extremely useful tool for collecting user input. Features like form validation help you improve quality of collected data. You can use libraries like Formik to highlight input fields with invalid values and provide custom error messages to help users fix their mistake.

Sometimes you need to take users to a different page after they finish filling out the form. You can do that with react-router and the useNavigate() hook. There are a number of other routing libraries for React, but in my opinion, react-router is the best.

It’s also useful to clear form fields after user has submitted the form. In React and controlled components this is fairly easy to do. You need to tap into the onSubmit event handler and use the function provided by useState() hook. As you know, argument to that function will replace current state value. You can use it to reset the state to an empty string or null value.

7 reasons React is the best front-end framework to use

React is a great tool for building user-friendly interfaces quickly. It is JavaScript-based library for building dynamic web components. Facebook created React more than 10 years ago. It was primarily used to manage news feed. Thanks to React, users are able to see changes – new comments, posts, notifications – without refreshing the page.

In this article, we will discuss React and practical reasons behind its popularity.

Simplicity

React is very simple to learn. Its templating language JSX looks just like HTML. The process of building user interfaces with React is very similar to building static websites in HTML. Despite similarities between the two, JSX allows you to implement dynamic features more easily.

To embed JavaScript expressions in React applications, you need to wrap them with a pair of curly braces. That way, JSX knows how to interpret JavaScript expressions.

Easy to start

Basics of React are really easy to learn. Advanced concepts take some time, but you can learn basics to create a simple web application in one day.

Because of its popularity, there are plenty of free tutorials for building web apps in React. Documentation for basic concepts is quite good and often updated.

Ability to reuse code

Like other front-end frameworks, React allows you to create components to represent one small visual or functionality of your website. Then you can reuse these components with different bits of data. You can use props to ‘feed’ specific data to the component, and fill the contents of that component with that data. For example, a design of an individual to-do task will be the same. But contents of it will be different. You can iterate over an array of objects in React and use data in each object to create new <Todo> components.

Supporting libraries

React is a popular library, so there are a lot of supporting utilities and libraries. These help React developers implement common features without manually doing it. For example, there’s a react-select library that provides a ready component for implementing select elements in React. As you can see in this article, setting a default value for react-select is much easier than it is for standard select elements.

Virtual DOM

This is one of the main React features. It allows React to display updates without refreshing the page. Whenever state or prop values change, virtual DOM will be updated to reflect those changes. React then compares virtual and actual DOM models and settles differences between them.

The entire React ecosystem (virtual DOM, state, props) allows you to design web apps with great user experience. Add features like scroll to bottom of the page when user clicks a button. Learn about how to do that here – https://simplefrontend.com/react-scroll-to-bottom/.

SEO-friendly

Despite what you might’ve heard, React can be quite SEO-friendly. Single Page Applications are entirely rendered in client browser, so they are not SEO friendly. However, there are plenty of services and technologies that allow you to use React with static site generators, or even for server-side applications. In these cases, you get the best of both worlds – React’s speed coupled with the SEO benefits and stability of static websites.

Community

There are a lot of experienced React developers out there. If you’re going to ask something on platforms like StackOverflow, experts are there to help you. There are also plenty of online guides posted about React and its features.

Advantages and Disadvantages of React

As of right now, front-end community has fully embraced React. Still, there are a lot of developers who consciously decide against using React and choose Vue, Angular, or even Svelte. This is not to say that React is not useful. It is in fact the best tool for building interactive interfaces right now. I wanted to dedicate this article to breaking down advantages and disadvantages of React.

Advantages

Easy to figure out

There’s a wealth of information available about React and its practical use cases. Official documentation is well written. In addition to that, there are plenty of video tutorials. Most important React concepts are based on JavaScript. So, if you’re someone who understands JavaScript well, then you can figure out React within few months or even weeks.

Reusable components

React saves you from having to write the same code over and over again. Certain parts of a website usually follow the same pattern and organization. For example, blog posts are all designed the same way and they have the same structure. The only different thing between blog posts is their content – title, text, and so on.

React web apps are like component trees. The same parent component can have many child components of the same type. You create a component once and you can reuse it as many times as you want. Certain components are made up of other components. State and props allow you to maintain data and pass it into child components if necessary.

Virtual DOM

React implements a virtual DOM. This is one integral feature that makes React extremely fast. Virtual DOM is a shadow image of the real DOM. Whenever there are changes in the virtual DOM, React synchronizes virtual and real DOMs and updates it efficiently.

Search Engine Friendly

You can use various static site generators to host your React web app. This way, search engines will be able to index contents on your page. Purely client-based applications can not be indexed in search engines.

Supporting libraries

React is a popular front-end framework with a large community of developers. Naturally, these developers have created a variety of useful packages and libraries for implementing certain features necessary for web development. For example, use form libraries for validation or to clear form after submit.

Disadvantages

Fast pace of updates

React is constantly evolving. Any web developer who wants to build web apps in React needs to stay up to date to changes. For example, React v16.8 brought a lot of changes. It introduced hooks in functional components. This change alone turned a lot of React world upside down.

Sometimes documentation updates are slow and do not follow immediately.

Only a library

Many people mistakenly call React a front-end framework. Actually, React is only a library. It deals with presentational part of the application. It does not have built-in solutions for routing or advanced state management. However, there are many supporting libraries like react-router and redux that help.

JSX

For me personally, JSX is an advantage. It allows you to embed JavaScript expression in the structure. This allows you to create dynamic interfaces. However, there’s definitely a learning curve. Many beginners struggle with rules of JSX. SimpleFrontEnd has excellent guides on how to implement common dynamic features using JSX.

Three different selectors in CSS

CSS is an essential tool for web developers. We use it to specify the appearance of HTML elements, their positioning on the page, and even responsive features of the page. So needless to say, as a web developer, you need to master CSS with all of its intricate details to be good at your job.

Basics of CSS are simple, but if you want to do something specific, you might come across difficulties. Changing one thing can lead to difficulties with other elements, and then you need to fix those as well. It can be a nightmare.

In this article, we’ll discuss selectors in CSS.

Selectors are basically how you ‘specify’ which HTML elements the CSS rules should be applied to. You can select elements by their type, for example specify that the CSS rule should apply to div elements. This is good, but it’s too general for complex applications. Most of the time you don’t want your CSS rules to apply to all elements of the same type.

CSS makes it really easy to specify elements for styles. Simply write the name of the element and then you can follow it with specific CSS rules.

Class selectors are a little more specific. Basically, you can define a style and give it a name. And any elements associated with that name will get the appearance specified in the style. Classes are set using the class attribute on HTML elements. In CSS, you define classes by preceding the name of the class with a dot. Also, people tend to write classes in a camelCase format. For example, if you want to define class with a name ‘special container’, CSS code would look like this:

.specialContainer {

                border: 2px solid yellow

}

Finally, you can also specify styles for HTML elements by using the id. Similarly, elements can be assigned id values using the id attribute. Each element has unique id, so this is the most specific of all three types of selectors. id is useful when you want to style outliers, and to ensure that a specific element looks the way you want it to look, or is positioned where you want it to be.

Let’s finish this article by comparing three different selectors and their most appropriate use cases. I don’t like using element selectors, because they are too general. However, they have legitimate use cases, like when you want to style all paragraph elements in your web app, or want to give all containers some padding.

In my experience, class selectors are the most useful, and based on what I’ve seen, other web devs most commonly use classes as well. They give you the ability to define groups of elements and style them as needed. Also, each HTML element can have multiple classes. So you can do something like this: define a specific ‘look’, or specific ‘position’ you want the element to have, and store that in a class name. Then you can set this class to an HTML element, as well as other classes. Instead of having one rigid class that has all the rules, you have more versatile, larger number of classes, and apply them as needed.

Also, classes override general element selectors. You can use this to your advantage. For example, use element selectors for a more general rule, and then have a class for more specific styling. If you want some of the paragraphs to be styled differently from the general rule, simply apply the class.

Another great thing about styling HTML elements with classes is that JavaScript allows you to conditionally add classes. Frameworks like React allow you to add conditional styles to elements as well. Here’s a great article on adding classNames if condition is true in React.

Finally, id selectors are the most specific of all. They should only be used for outlier cases. In ideal scenario, you would not need to use id selectors at all. It should be said that id selectors override normal CSS styles.

My experience of working remotely as a web developer

A lot of front-end developers want to work from home. Some of them work while traveling. Instead of spending large amounts of money on renting in the US, they go to remote islands, and earn the same money while spending only a small portion of living costs.

This all sounds great, but is it realistic? How do you, as a programmer, achieve the same result?

Companies do permit their front-end developers remotely. But this mostly applies to senior and middle front-end developers, who have a lot of leverage in the job market. Employers were initially reluctant to allow remote work and there was a very slow growth. However, with the pandemic, the entire industry switched to remote work, and now employees don’t really want to go back. And as long as they show decent enough results while working remotely, employers don’t want to force the issue, either.

You wouldn’t think that large companies also allow for remote work, but they do. This is because there’s a shortage of experienced developers, so large employers are forced to accommodate front-end developers and allow them to work from any location in the world. The demand for freelance work is pretty significant as well.

Also it helps that programming doesn’t require you to show up at the office. You can do it from anywhere in the world. Front-end developers have worked remotely for a long time. Whether it is to build small projects for small to medium sized businesses, or as a freelance help to startups or bigger tech companies. It has always happened, but after the pandemic it’s entering a new era of growth.

Also, tools for communication between team leaders and developers have also improved. There are a lot of ways to establish synchronous, asynchronous communication, as well as tools that ensure synchronization of code.

Some employers have not embraced remote work, but it’s an uphill battle. Their main argument is that developers work better when they meet and bond in the office. I think that factor is overrated and these employers will find out the hard way. There is no reason to not give developers freedom of movement and location.

If you’re looking to work as a front-end developer from distance, you still need to prepare. If you’ve never had a remote or freelance job before, you’re in for a rude awakening. It’s quite difficult to stay focused and get the work done when you’re at comfort of your home.

Programmers with enough discipline and organization to pull this off can definitely go this route. But remember that employers will actually look at your results to rate your performance. If you can’t demonstrate solid work ethic, you may be out of job soon. Or at the very least, forced back to office.