React is a JavaScript library. So you need knowledge of important JavaScript concepts to properly understand how React works and use it to build an interactive web application.
One way of learning React is by doing it. This is an okay approach, but you will make better progress understanding these JavaScript features. Without this foundational knowledge, you may be able to make some things work, but will struggle to understand inner machinations of React. This will prevent you or delay you from fully mastering the library.
What is React
Before going any further, let’s establish what React is. It is a JavaScript library for building user interfaces for browsers.
If you ever look at the code that makes up a React component, you will notice typical JavaScript features – functions, classes, and other aspects of JavaScript. You will also notice code that looks like HTML. That is JSX, templating language for React. Despite how it looks, it’s just a syntax sugar for writing JavaScript code. Personally I've struggled with understanding how to add a new line in React. Then I found an article that explained React line break in great detail.
All of React is actually written in JavaScript. JSX is designed to look like HTML to utilize familiar development experience for building web applications.
You will also notice familiar JavaScript syntax, and also some things you may not be familiar with. For example, React developers extensively use destructuring syntax, as well as spread operator as well as arrow functions. You need knowledge of latest JavaScript features to really understand what’s going on in the code.
With that out of the way, let’s talk about important JavaScript concepts you need to understand to facilitate development in React.
Callback function
This type of function is passed as argument to another function. Often you will use callback functions in metods like map() to dynamically render elements based on an array. useEffect, one of the most important hooks also uses callback function to execute a side effect. Similarly, often you need to event handlers like onClick to a callback function to respond to user interactions in the app.
Promises
Asynchronous functions play an important role for developing apps in React. You need to load external data or wait for certain factors until you execute a function. Promises play an important role for setting up asynchronous functions in React.
Promises are also important when you have multiple callback functions that you need to run in a certain order. Promises allow you to define the order of these functions. Learning about promises and different states they go through will help you write effective code.
map() and filter() methods
Map is a relatively new JavaScript method. It is applied on arrays, and allows React developers to ‘do something’ for every item in the array.
Often times React developers will use map() method to dynamically invoke components. The callback function passed as first argument to the map method allows you to define what you’re going to do with item in the array. You can use data to customize contents of the component you are invoking. You can also pass data via props to customize functionality and even appearance of the component or an element. Similarly, you can use foreach in react js to render components based on an array.
Keep in mind that map() method is applied on an array, and also returns a new array. Except it returns a transformed array. Every item is transformed according to the callback function passed to the map() method.
You can use curly braces to call map() on an array and embed inside the JSX. Since the map method returns a new array, the app will display elements or components returned by the array.
filter() is another important method. It works similar to map() method, but instead of transforming item in the array, callback function checks every item for a condition. Filter() method returns a new array that contains all the items that passed the condition specified in the callback function.
Destructuring arrays and objects
Destructuring is a new ES6 feature that facilitates writing complex expressions in React. Destructuring allows you to access object properties more easily, and also store multiple values. For example, you destructure variables to store a state variable and updater function returned by the useState hook. As for spread operator, it allows you to combine arrays or add items to the array.
I personally also use destructuring to access individual properties instead of using dot notation to access each property. This saves me time and makes my components more readable.
Spread operator, often written as three dots, allows you to give flexibility to your functions to accept as many arguments as you want.
Conditional operators
There are many ways to set a condition and define outcome for that condition in JavaScript. Since React is written entirely in JavaScript, you can use all these statements in React as well.
However, React uses templating language JSX that makes it easier to develop apps in React. And you can not use certain features in JSX. It only allows you to embed expressions that take only one line, not multiple lines. So ternary operator is essentially the only conditional operator you can use inside JSX. That makes ternary operators very useful, and essential for developing dynamic apps with React. You can use a ternary operator to specify what component needs to rendered (a dashboard component if the user is logged in). Or what styles an element should have (dark background if darkmode is enabled).
Logical operators
Finally, it’s also important to understand logical operators in JavaScript. An effective use of logical operators OR ( || ) or AND ( && ) allows you to effectively set complex conditions. This will allow you to build interactive features in React.
Specifically, conditionally render elements or conditionally set inline styles for elements. You can even use the AND operator for conditional rendering.
Summary
Knowledge of these JavaScript features will allow you to build interactive apps with React.
Top comments (1)
thank you