JavaScript tips and tricks: Building blocks to know
What are some of the ES6 language features should you be familiar with when building applications and using modern JavaScript frameworks?
Something I like about React compared to other frameworks is how you can seamlessly use JavaScript and Html together in the same file. There are no new specialized DOM elements you need to learn. (JSX compiles to plain old JavaScript), and with the addition of React Hooks, the component API has gotten quite simple. The framework focuses on the UI concerns it was intended for.
Learning new ES6 features is recommended for you to be effective at building applications. Below are a few JavaScript tidbits I’d recommend you spend some time learning. These techniques can be used alone with vanilla JavaScript or you can use them with your favorite frameworks like React or Angular.
Template literals (Template strings)
Template literals are string literals that allow embedded expressions and multiline strings.
Shorthand property names
This is so common that it becomes 2nd nature.
MDN: Object initializer New notations in ECMAScript 2015
Arrow functions
Arrow ( ) => { } functions are a quick way to write functions in ES6. In React, you don’t have to worry about the ‘this’ keyword as much if you’re using hooks in your project (rather than classes). Arrow functions allow for quick anonymous functions and implicit returns, so you’ll see and want to use arrow functions quite regularly.
One thing to note about the example above is the opening and closing parentheses (. This is a common way to leverage the arrow function’s implicit return capabilities when working with JSX.
