Gain insights into JavaScript ES6+, ternary operators, 'this' object, built-in functions, and core concepts like composability and immutability to ease your React learning journey.

esprima.tar.gz

test

After teaching React extensively (33.000+ students), 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. Most of it boils down to JavaScript ES6 and beyond features and syntax, but also ternary operators, shorthand versions in the language, the 'this' object, JavaScript built-in functions (map, reduce, filter) or more general concepts such as composability, reusability, immutability or higher-order functions. While you don’t need necessarily to master all of these before starting with React, they will come up while practicing it and so to learn them will put you at a great advantage. 

This course is my attempt to give you comprehensive JavaScript skills that will make your React journey smooth and straight-forward.

JavaScript Fundamentals Before Learning React

As mentioned in the previous lesson, Arrow Functions are a more concise way of writing a function in JavaScript. They are frequently used in React to make things more efficient and simpler (Event Handling, preventing bugs, etc.).


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 getGreetingFunc() {
  return 'Welcome to JavaScript';
}

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

// JavaScript ES6 arrow function without body and implicit return
const getGreetingArrow2 = () =>
  'Welcome to JavaScript';

console.log(getGreetingFunc());
console.log(getGreetingArrow1());
console.log(getGreetingArrow2());

Given below is an example to help you understand the importance of arrow functions in JavaScript. Let's say you have an array of student objects with two properties ID's and a boolean to check if that student is present or not. Let's say you want to filter out the students who are absent, one way to do this is:

This lesson demonstrates the uses of Arrow Functions in React. 

Arrow Functions in React

This lesson demonstrates the uses of Arrow Functions in React.

Getting Started

Variables, Operators & Expressions

Functions

Classes

Modules

React

Appendix

Conclusion

Arrow Functions in React