After all my teachings about React, be it online for a larger audience or on-site for companies transitioning to web development and React, I always come to the conclusion that React is all about JavaScript. Newcomers to React but also myself see it as an advantage, because you carry your JavaScript knowledge for a longer time around compared to your React skills.

The following walkthrough is my attempt giving you an almost extensive yet concise list about all the different JavaScript functionalities that complement your React knowledge. If you have any other things which are not in the list, just leave a comment for this article and I will keep it up to date.

ENTERING REACT AFTER LEARNING JAVASCRIPT

When you enter the world of React, you are often confronted with a React Class Component:

import React, { Component } from 'react';
	import logo from './logo.svg';
	import './App.css';

	class App extends Component {
	  render() {
	    return (
	      <div className="App">
	        <header className="App-header">
	          <img src={logo} className="App-logo" alt="logo" />
	          <h1>
	            Hello React
	          </h1>
	          <a href="https://reactjs.org">
	            Learn React
	          </a>
	        </header>
	      </div>
	    );
	  }
	}

	export default App;
view raw
ENTERING REACT AFTER LEARNING JAVASCRIPT.js hosted with ❤ by GitHub

In a React class component, there are lots of things to digest for beginners which are not necessarily React: class statements, class methods and inheritance due to being a class. Also JavaScript import statements are only adding complexity when learning React. Even though the main focus point should be JSX (React’s syntax) — everything in the return statement — in the very beginning, often all the things around demand explanations as well. This article is supposed to shed some light into all the things around, most of it JavaScript, without worrying too much about React.

REACT AND JAVASCRIPT CLASSES

Being confronted with a React class component, requires the prior knowledge about JavaScript classes. One would assume that this is given knowledge, but it isn’t, because JavaScript classes are fairly new in the language. Previously, there was only JavaScript’s prototype chain which has been used for inheritance too. JavaScript classes build up on top of the prototypical inheritance giving the whole thing a simpler representation with syntactic sugar.

In order to understand JavaScript classes, you can take some time learning about them without React:

class Developer {
	  constructor(firstname, lastname) {
	    this.firstname = firstname;
	    this.lastname = lastname;
	  }

	  getName() {
	    return this.firstname + ' ' + this.lastname;
	  }
	}

	var me = new Developer('DINESH', 'KO');

	console.log(me.getName());
view raw
REACT AND JAVASCRIPT CLASSES.js hosted with ❤ by GitHub

A class describes an entity which is used as a blueprint to create an instance of this entity. Once an instance of the class gets created with the new statement, the constructor of the class is called which instantiates the instance of the class. Therefore, a class can have properties which are usually located in its constructor. In addition, class methods (e.g. getName()) are used to read (or write) data of the instance. The instance of the class is represented as the this object within the class, but outside the instance is just assigned to a JavaScript variable.

Usually classes are used for inheritance in object-oriented programming. They are used for the same in JavaScript whereas the extends statement can be used to inherit with one class from another class. The more specialized class inherits all the abilities from the more general class with the extends statement, and can add its specialized abilities to it:

class Developer {
	  constructor(firstname, lastname) {
	    this.firstname = firstname;
	    this.lastname = lastname;
	  }

	  getName() {
	    return this.firstname + ' ' + this.lastname;
	  }
	}

	class ReactDeveloper extends Developer {
	  getJob() {
	    return 'React Developer';
	  }
	}

	var me = new ReactDeveloper('DINESH', 'KO');

	console.log(me.getName());
	console.log(me.getJob());
view raw
entity.JS hosted with ❤ by GitHub

Basically that’s all it needs to fully understand React class components. A JavaScript class is used for defining a React component, but as you can see, the React component is only a “React component” because it inherits all the abilities from the actual React Component class which is imported from the React package:

import React, { Component } from 'react';

	class App extends Component {
	  render() {
	    return (
	      <div>
	        <h1>Welcome to React</h1>
	      </div>
	    );
	  }
	}

	export default App;
view raw
WELCOME.JS hosted with ❤ by GitHub

That’s why the render() method is mandatory in React class components: The React Component from the imported React package instructs you to use it for displaying something in the browser. Furthermore, without extending from the React Component, you wouldn’t be able to use other lifecycle methods. For instance, there wouldn’t be a componentDidMount() lifecycle method, because the component would be an instance of a vanilla JavaScript class. And not only the lifecycle methods would go away, React’s API methods such as this.setState() for local state management wouldn’t be available as well.

However, as you have seen, using a JavaScript class is beneficial for extending the general class with your specialized behavior. Thus you can introduce your own class methods or properties.

import React, { Component } from 'react';

	class App extends Component {
	  getGreeting() {
	    return 'Welcome to React';
	  }

	  render() {
	    return (
	      <div>
	        <h1>{this.getGreeting()}</h1>
	      </div>
	    );
	  }
	}

	export default App;
view raw
RENDER.JS hosted with ❤ by GitHub

Now you know why React uses JavaScript classes for defining React class components. They are used when you need access to React’s API (lifecycle methods, this.state and this.setState()). In the following, you will see how React components can be defined in a different way without using a JavaScript class.

After all, JavaScript classes welcome one using inheritance in React, which isn’t a desired outcome for React, because React favors composition over inheritance. So the only class you should extend from your React components should be the official React Component.

ARROW FUNCTIONS IN REACT

When teaching someone about React, I explain JavaScript arrow functions pretty early. They are one of JavaScript’s language additions in ES6 which pushed JavaScript forward in functional programming.

// JavaScript ES5 function
	function getGreeting() {
	  return 'Welcome to JavaScript';
	}

	// JavaScript ES6 arrow function with body
	const getGreeting = () => {
	  return 'Welcome to JavaScript';
	}

	// JavaScript ES6 arrow function without body and implicit return
	const getGreeting = () =>
	  'Welcome to JavaScript';
view raw
ARROW FUNCTIONS IN REACT.js hosted with ❤ by GitHub

JavaScript arrow functions are often used in React applications for keeping the code concise and readable. I love them, teach them early, but always try to refactor my functions from JavaScript ES5 to ES6 functions along the way. At some point, when the differences between JavaScript ES5 functions and JavaScript ES6 functions become clear, I stick to the JavaScript ES6 way of doing it with arrow functions. However, I always see that too many different syntaxes can be overwhelming for React beginners. So I try to make the different characteristics of JavaScript functions clear before going all-in using them in React. In the following sections, you will see how JavaScript arrow functions are commonly used in React.

function (props) {
	  return view;
	}
view raw
FUNCTIONS AS COMPONENTS IN REACT.js hosted with ❤ by GitHub

It’s a function which receives an input (e.g. props) and returns the displayed HTML elements (view). Under the hood, the function only needs to use the rendering mechanism of the render() method from React components:

function Greeting(props) {
	  return <h1>{props.greeting}</h1>;
	}
view raw
props.js hosted with ❤ by GitHub

Function components are the preferred way of defining components in React. They have less boilerplate, add less complexity, and are simpler to maintain than React class components. You can easily migrate your class components to function components with React Hooks.

#javascript #reactjs #react