Frequently Used JS Key Parts in React

Last updated on February 28, 2020

This post helps to know the most frequently used JavaScript Key parts within the React applications.

You could ask me, why we should bother about this and we can straight away jump into developing apps with React. My answer is, YES. You can do that but this helps you fundamentally get strong enough with JS before diving into any other JavaScript library/framework. In the long run, you need fundamentals to stay ahead. 

That’s why I curated this post to help beginners who want to learn React. Let’s dive in.

let and const – To define variables,

Arrow function – Defining methods inside class components, creating a functional component,    

const ContactItem = props => {  
      return (<div>Srinivasan KK</div>);  
};

Array methods – Here I am jotting down the use cases where each array method will be used,
slice – Taking copy of an array.
 includes – To check whether an element exists inside an array
 map – To transform an array elements
 filter – To remove or filter out specific elements out of an array still, some more useful methods out there but these are all heavily used. 

Object Destructing – To get only the required property out of an Object, mostly we use this in functional component and render method of class components.

As a Functional component,

const ContactItem = props => {  
    const { item } = props;  
    return (<div> { item.name }</div>);
};

As a Class component, 

class AppComponent extends Component {
     constructor() { super(props);  this.state = { name: 'SrinivasanKK' };}
    render() { 
         const { name: userName } = this.state;
        return <div>{ userName }</div>
     }
}

Array Destructuring – Resolving multiple asynchronous calls from Promise.all()

Class – Since ES6 we have class keyword available to mimic OOP behavior,

Import/Export  – To access different pieces of code from different files.

import { getImages } from './Image.js';

Template literal – To use for multi-line string (Great escape from backslash and + symbol for constructing multi-line string)

 class AppComponent extends Component { 
      constructor() { super(props);  this.state = { name: 'SrinivasanKK' };}
      render() {
          const { name: userName } = this.state;
          const newName = `Name is changed to ${name}`;
          return <div>{ newName }</div>
    }
}

That’s it. If you feel some more to be added, feel free to add in the comments. Let me update that as well. I hope you people find this post useful.

References

• Frequently Used JS Concepts in Angular