Useful JavaScript concepts for building React apps

Many newbie web developers look at salaries of React web developers and want to learn React right away. I hold the opinion that it’s better to master JavaScript first. All front-end frameworks are based on JavaScript anyway. If you master JavaScript (which is not an easy feat) you’ll have easier time learning front-end frameworks and UI libraries like React as well.

In this article, we will talk about most useful JavaScript concepts for building user interfaces in React.

Callback functions

ES6 introduced three great functions – map(), filter(), reduce(). If you’re going to build apps, you will use these all the time. map() allows you to iterate over array of objects to create elements and components in JSX.

React web apps often receive data as an array of objects. You can use map() to create real HTML elements using that data. Similarly, filter() takes a callback function argument as well. It returns a condition. Array items that meet the condition will be stored in the new array. This allows you to selectively create JSX elements based on a criteria.

reduce() is not used to create new elements. However, it is often used to aggregate certain values in the array. For example, add up all the numbers in the array.

Rest parameters

These allow you to define functions that accept flexible number of arguments. For example, you could specify what to do with first three arguments, and write something like …args. The function will take the first three arguments, and all remaining ones. Or the function could accept only this type of expandable number of arguments. It could be useful if you want a JavaScript function that adds up all numbers passed into it, for example.

Rest parameters are denoted by three dots before the argument name. Rest parameters must be the last in the order of arguments.

Spread syntax

Beginner JavaScript programmers often confuse spread syntax with rest parameters. Both are denoted by three dots. However, REST is used when functions are defined. It allows us to expand the number of arguments.

Spread, on the other hand, allows us to ‘unpack’ everything from iterable values like arrays and strings. For example, when you’re calling an array, you can use the spread syntax to pass every item in the array as an argument. When defining a function, you use the REST operator to accept unpredictable number of items in the array.

Spread syntax is often used to combine items from two arrays. Let’s look at an example:

let arr1 = [a,b,c]

let arr2 = [d,e,f]

let combined = […arr1, …arr2]

The combined variable will be an array that contains all items from arr1 and arr2 arrays.

Ternary operators

One last great feature for conditional expressions are ternary operators. They allow you to evaluate a JavaScript expression (even a Boolean value) and return certain value if it is true, and other value if it’s false.

Ternary operators are often used in React. For conditional rendering, conditional classNames, conditional styles. It is used to add dynamic functionality to web applications.

You can even nest multiple ternary operators into one.

Most time efficient way to style React components

In this article, we will discuss various different ways to style web applications in React. Choosing the best one depends on needs of your project and type of your application. With that being said, we’ll tell you pros and cons of every approach.

Inline styles

let’s start with the most straightforward approach. This way, you don’t have to create classes or other CSS rules in a separate CSS file. Also, it can help you avoid unnecessary cluttering of global name space for classes.

Styles applied this way have a higher precedence than doing it via classes. This is the same principle as in HTML.

As you may know, React applications are laid out in JSX, which looks like HTML, but it’s actually JavaScript. For this reason, inline styles applied as objects with key-property pairs, where keys are CSS properties and values are CSS values. Like so:

{backgroundColor: “red”}

We can not use the ‘background-color’ syntax like we do in CSS. And because this is a JavaScript object, the value needs to be a string. And the ‘background-color’ property is merged together and written in camelCase.

Inline classes have many advantages, they are easy to read and write. For example, it can be a solid solution for building a prototype. However, as your application and codebase grows in size, inline styles can be difficult to maintain. Also, it does not support essential CSS features like media queries, pseudo classes and other advanced syntax of CSS.

External CSS stylesheets

The standard way to customize React elements’ appearance is to use external CSS stylesheets. This is fine if you’re uncomfortable writing CSS classes in JavaScript, but want to keep things simple. Advantage of using external CSS stylesheet is that you can write CSS styles using a familiar syntax, including pseudo classes and media rules.

However, defining all the CSS classes and rules in one file can be difficult, because you have to come up with unique class names.

External styled-components library

It is a common trend to style React components in JavaScript. The most popular solution is to use external styled-components library.

It combines the best features of both inline styles and external stylesheets. You can write CSS using traditional syntax and store them in each component individually. A great feature is that classname values defined via styled-components are scoped to the component where they are defined. This way, you don’t have to come up with many unique class names.

Also, great feature of `styled-components’ is that you write CSS in JavaScript, but can still use pseudo classes, media rules and similar special CSS syntax.

Even more impressively, this library can be used to create custom styled components. You just define the styles and store them in a variable. Then you can reference that variable in JSX and it will be just like a custom component.


In this article, we discussed three different ways to customize the appearance of React web applications. Choosing the best one depends on circumstances of your project. Also, this blog post discusses how to apply conditional className values. We didn’t have time to go over that.

Categorized as AI

Differences between TypeScript and JavaScript

Most recently, TypeScript has become an incredibly important tool for building web applications. It is especially important for building scale web applications, because TypeScript ‘tames’ wild nature of JavaScript.  What I mean by this, is that by default, JavaScript can be quite unpredictable. Things like type coercion and other odd JavaScript behavior can be confusing. TypeScript solves all those problems and helps you maintain large codebase.

What is TypeScript?

It is an extension of JavaScript with extra features. Essentially, it is an improved version of JavaScript.

It has a slightly different syntax for writing JavaScript, but ultimately it is ‘translated’ to JavaScript once the code is executed.

It is commonly used for creating web applications because projects like Netflix and Disney plus are getting increasingly complex. There are many projects that contain thousands of lines of code. Maintaining all that would be impossible using default TypeScript.

TypeScript was first released in 2013 by Microsoft.

TypeScript vs JavaScript – which one is better?

First of all, it’s important to understand that TypeScript is not a different programming language. It’s the same as JavaScript. The biggest advantage of TypeScript is that it fixes the biggest and most confusing part of JavaScript – type coercion.

JavaScript has a confusing way of converting one data types into others. For example, adding a string to an integer will convert both values to strings. Let’s look at this example

5 (number) + ‘5’ (string) will be ‘55’ (string). It will not be 10.

Any time you decide to work on a large project, you definitely need TypeScript to find bugs and fix them. Fixing errors in JavaScript is very difficult. It’s hard to identify where the errors are, and even more difficult to fix them without messing up other parts of your code.

JavaScript is better in a sense that it gives you freedom and ability to improvise. TypeScript is much more fixed and errors are easy to fix.

TypeScript with front-end frameworks

Because TypeScript is necessary for maintaining a large scale project, all three major JavaScript frameworks – React, Vue, and Angular support TypeScript.

Angular has always supported TypeScript, and it’s impossible to write Angular applications with normal JavaScript.

React and Vue are compatible with normal JavaScript, but the use of TypeScript is highly encouraged, especially in React, according to SimpleFrontEnd. For the past few years, most of commercial web application development in React is done with TypeScript.

Vue tries to stick with the traditional approach of writing web applications in HTML, CSS, and JavaScript. However, with the release of Vue 3, this front-end framework has also developed a solid support for TypeScript.

An important difference

Some people claim that JavaScript is an object-oriented language, but it’s not a clear conclusion. TypeScript, on the other hand, clearly follows an object-oriented pattern. Like its sister language JavaScript, TypeScript defines what you can and can not do through prototypes.

Categorized as Careers