The Talent500 Blog
JavaScript concepts you should know before learning ReactJS 1

JavaScript concepts you should know before learning ReactJS

Javascript is the stepping stone towards learning ReactJS. This article discusses the JavaScript concepts you should know before learning ReactJS. Check it out to write better code.

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.

 

0
Manik Sharma

Manik Sharma

Manik Sharma specializes primarily in UI or Software Development using Javascript libraries like React and Redux along with HTML, CSS, and other libraries like Bootstrap, Node.js, Express.js, MongoDB. He loves to talk business and think of cool startup ideas. Definitely, an entrepreneur in making. He is equally interested in discussing innovative ideas that can make a huge difference in someone's life.

Add comment