React, the most widely used JavaScript framework with over 40% market share, can be a valuable addition to your skill set. An essential thing about React is that it is fundamentally JavaScript. Hence, the better you are at JavaScript, the easier it will be for you to write quality React code.
While there are several JavaScript concepts every frontend developer must master, engineers at Talent500 picked some essential concepts that Reactjs developers should know.
Let’s break the essential JavaScript concepts you need to master React.
1. Function declarations and arrow functions
Any Reactjs application is built using various components. React components are independent and reusable code blocks that can be defined with JavaScript classes and functions. However, React components return JSX elements, unlike JavaScript functions.
Here’s an example of a JavaScript function:
// JavaScript function: returns any valid JavaScript type
function javascriptFunction() {
return “Hello world”;
}
Same with Reactjs:
// React function component: returns JSX
function ReactComponent(props) {
return <h1>{props.content}</h1>
}
Here, the difference can be seen in the casing of the names of the JavaScript functions and React function components. JavaScript functions names follow camel casing, while React function components are written with pascal casing.
In JavaScript, you can write a function in two different ways:
Using the function keyword: function declaration
New way introduced in ES6: arrow function
You can write React components using either of the ways. However, most React developers prefer arrow functions for their brevity. You can use several shorthands when creating arrow functions. It helps remove unnecessary boilerplate, and you can write the entire code in a single line.
Here’s an example:
// Function declaration syntax
function MyComponent(props) {
return <div>{props.content}</div>;
}
// Arrow function syntax
const MyComponent = (props) => {
return <div>{props.content}</div>;
}
// Arrow function syntax (shorthand)
const MyComponent = props => <div>{props.content}</div>;
2. Template literals
JavaScript has always been clumsy with handling strings, but with the arrival of ES6, it became easier to add strings together without using the + operator. You can concatenate or connect multiple strings using template literals.
You use template literals with two backticks ” instead of single or double quotes.
Here’s an example of how strings were concatenating in JavaScript before ES6:
function sayHello(text) {
return ‘Hello ‘ + text + ‘!’; //awkward syntax
}
sayHello(‘React’); // Hello React!
With template literals concatenating strings is much simpler and creates much more readable code.
function sayHelloAgain(text) {
return `Hello again, ${text}!`;
}
sayHelloAgain(‘React’); // Hello again, React!
The most powerful feature of template literals is the ability to use any JavaScript expression within the ${} syntax. When you master template literals, you can dynamically create strings in React.
For instance, here is a code for dynamically loading string values in head or body elements in a website:
import React from ‘react’;
import Head from ‘./Head’;
function Layout(props) {
// Shows site name (i.e. Reed Barger) at end of page title
const title = `${props.title} | Reed Barger`;
return (
<>
<Head>
<title>{title}</title>
</Head>
<main>
{props.children}
</main>
</>
);
}
3. Async/Await
It is a better alternative to writing promises in JavaScript than the traditional method. Not only does it help write clean and clear code, but you can also convert any ordinary function into a promise by simply using the async keyword.
Here is a React code to fetch data from a GitHub API using the Fetch API to show a profile image using promises:
/* Go to react.new and paste this code in to see it work! */
import React from ‘react’;
const App = () => {
const [avatar, setAvatar] = React.useState(”);
React.useEffect(() => {
/*
The first .then() lets us get JSON data from the response.
The second .then() gets the url to my avatar and puts it in state.
*/
fetch(‘https://api.github.com/users/reedbarger’)
.then(response => response.json())
.then(data => setAvatar(data.avatar_url))
.catch(error => console.error(“Error fetching data: “, error);
}, []);
return (
<img src={avatar} alt=”Reed Barger” />
);
};
export default App;
The code has to use callbacks every time to resolve data from a promise. We can improve the code and use async/await to clean the syntax, like this:
/* Go to react.new and paste this code in to see it work! */
import React from “react”;
const App = () => {
const [avatar, setAvatar] = React.useState(“”);
React.useEffect(() => {
/*
Note that because the function passed to useEffect cannot be async, we must create a separate function for our promise to be resolved in (fetchAvatar)
*/
async function fetchAvatar() {
const response = await fetch(“https://api.github.com/users/reedbarger”);
const data = await response.json();
setAvatar(data.avatar_url);
}
fetchAvatar();
}, []);
return <img src={avatar} alt=”Reed Barger” />;
};
export default App;
Conclusion
JavaScript is a robust language, and you might have missed some concepts when you were learning basic JavaScript. However, to become a proficient Reactjs developer, you must master these JavaScript concepts, among several others. Here are some additional JavaScript concepts that front-end developers must know.
Talent500 is the platform for elite Indian developers to discover global job opportunities. Join our select pool of talent today.
