In 2023, React is the most popular library for building user interfaces. Two other most popular frameworks that once rivaled React are now far behind in popularity. So if you’re a beginner coming into the world of web development, React is the perfect library to learn to maximize your career opportunities and get a front-end developer job. Even if you’re not looking for a career and simply want to build an application like an MVP, React is usually a very good choice to accomplish that goal.
Before diving head first into React, you need to know certain JavaScript concepts. Otherwise learning React will be difficult and you will not gain real understanding of how the library works. ES6 release introduced new JavaScript features, many of which are foundational to building applications with React.
In this article, we’ll go through JavaScript features that underpin React. Knowledge of these concepts is necessary to work with and truly understand React.
Using if statements and ternary operators to write conditions in React
Conditions are essential to building dynamic web apps. React is no exception. Developers frequently use if/else statements and ternary operators to implement interactive features.
In essence, if/else statement specifies a condition. If it is met, then JavaScript runs the code block following the if/else statement. Conditions help React developers render, style, or otherwise work with elements.
If/else
This is a bit outdated, but still commonly used JavaScript feature for building web applications. You don’t see if/else statements inside JSX because if/else requires multiple lines of code. Syntax is also a bit longer. While if/else is fairly easy to follow, it still requires more lines of code than alternatives like ternary operator.
Ternary operator
In my experience as a web developer, ternary operator is the most important JavaScript feature for adding dynamic features to React. You can use ternary operators to do conditional rendering, styling, and even create className values based on a condition.
Essentially, ternary operator is a much simpler way to write a conditional statement. It doesn’t require separate code block or explicit if/else statements.
In its simplest form, ternary operator is made up of three parts:
A condition, followed by a question mark. Then a value (or expression) to return when the condition is true. Followed by a colon, and then a value (or expression) to return if the condition is false.
This simple syntax allows us, React developers, to embed ternary operators directly in the JSX. As a result, we can set it as inline styles, or use it to generate conditional className values.
You can also use ternary operators to replicate the functionality of the else clause. Instead of returning a certain value if the condition is false, you can return another ternary operator that checks a different condition and returns a value if it’s true. You can even chain one more condition on top of the original two, to add the third else clause. You can use this approach to add as many else clauses as you need.
Ternary operators can have many interesting use-cases. One of them is rendering multiple components with React.
Work with object data
Objects are one of the most versatile and useful ways to organize data in React. You can have as many properties as you like, and are not limited in the types of values for object properties.
In JavaScript, there are two ways to access a value for specific object property. One is a dot notation. In other words, writing object’s name followed by dot, followed by property name to access the value. This is the most common, but does not allow you to dynamically generate the property name. For this reason, sometimes you will need to use bracket notation, which puts property name between opening and closing brackets. If property name is a variable, it is dynamically evaluated to get a property name.
Important difference between React and normal apps is that in React, we use refs instead of the getElementById() method. You can learn how to do that here:
https://simplefrontend.com/get-element-by-id-in-react/
Destructuring
React web developers often have to work with external data organized as an array of objects or plain JavaScript objects. Often we have to extract data from complex structures and use it as the source of content for components. Destructuring allows React developers to take data without writing too many lines of code.
Working with arrays
As previously mentioned, data for the application is often stored as an array of objects. Destructuring allows JavaScript developers to easily unpack values from the array and store them in different variables as they see fit.
For example, let’s say we have an array with three animals – a mammal, a fish, and a bird.
Let animals = [“monkey”, “shark”, “raven”]
Here’s how we could unpack this array:
let [mammal, fish, bird] = animals
In this case, JavaScript would automatically assign values from the array to these variables. Values will be assigned based on the order of variables and order of values in the array. The mammal variable will have ‘monkey’ value, fish will be equal to ‘shark’ string, and so on.
The same syntax allows you to destructure only some of the values in the array, not all of them. You need to simply put commas in the place of items you want to skip.
Working with objects
We can destructure objects just like we do arrays. Instead of taking array items and storing them in a variable, we can destructure objects to store property values in variables of the same name. Let’s look at an example object:
Let animals { mammal: “monkey”, fish: “shark”, bird: “raven” }
To destructure this object, you would have to use exact same variable names as properties. Each variable would have a corresponding value.
To change variable names, property names need to be preceded by a variable name.
Template literals in JavaScript
ES6 introduced an important feature for working with dynamic values in React. This is an important feature we can use to build interactive React apps. From conditional classNames to content for the component, template literals are very useful throughout web development with React.
Template literals are denoted by backticks. Their unique feature is the ability to write the string across multiple lines, something that normal strings can not do. Using dollar sign followed by curly braces allows you to embed dynamic values inside template literals.
Top comments (1)
Thanks