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.
Callback functions are also useful for using the useEffect() hook in React. Arguments to this function are callback functions, as well as dependency array. This guide explores how useEffect with no dependencies works.
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.
Rest parameters will help you write flexible event handlers that accept many parameters. Here’s a guide that explains how to pass a parameter to onClick in React.
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.
Where to learn necessary skills
Front-end development means building websites with beautiful design and sometimes dynamic features. Most of the complex web applications you visit every day – Facebook, Netflix and Disney plus are created more or less the same principles.
There are three main skills to developing websites – CSS, HTML and JavaScript. HTML is used for writing markup. In other words, creating elements to define a structure for the page. CSS is used for customizing the appearance of elements created with HTML. By extension, it can be used to design the entire website. Lastly, JavaScript is used for implementing dynamic features of a web application. For example, collecting user data, doing dynamic analysis, loading external data and other use cases for implementing business logic.
Learning HTML and CSS
Let’s discuss learning HTML and CSS. HTML is considered to be simpler of the two, while CSS appears simple, it’s complex.
For starters, you should attempt to learn CSS and HTML on freeCodeCamp, which is a great free resource for learning front-end development. It has all the necessary tools to help you learn these skills. You can practice writing actual HTML and CSS code, and solve actual challenges like building a simple static website.
Free resources are good place to start because you can get started without too much investment. Another great website is Codecademy, which explains CSS and HTML concepts in detail and takes you through the steps of learning as you write the code.
Learning Javascript
Next, it’s time to learn JavaScript. In this case, freeCodeCamp is a good place to start. It can give you a solid knowledge of JavaScript to get started. In addition to that, you can read free online book like ‘Eloquent JavaScript’, which is recognized as one of the great resources for learning JavaScript. There are dozens of other courses that teach JavaScript, so it’s hard to choose the right one.
Learning front-end frameworks
In case you don’t know, modern web applications are developed with JavaScript front-end frameworks like React or Angular. These frameworks provide a foundation for performing common web development tasks. You can simplify your life by using them.
To maximize your chances of landing a job, it’s preferable if you have a specialization in one of the frameworks. There are many great courses and websites that aim to teach you programming. Sometimes these websites and even courses have free and paid versions, so you can try it out before paying.
Front-end masters is considered to be one of the best resources for learning front-end development. They offer discounts in some cases.
Learn from documentation
Once you nail basics of one of these front-end frameworks, you can move on to official documentation of these languages. All three of them – Vue, React and Angular have excellent documentation to teach you programming in these languages.
Written documentation is a bit impersonal, and tutorials may be better if you prefer a personal touch.