JavaScript Features You Should Know Before Learn React

JavaScript Features You Should Know Before Learn React

What JavaScript features you should be familiar with when learning and using React

Originally published by at https://kentcdodds.com

One of the things I love most about React compared to other frameworks that I've used is how exposed you are to JavaScript when you're using it. There's no template DSL (JSX compiles to sensible JavaScript), the component API has only gotten simpler with the addition of React Hooks, and the framework offers you very little abstraction outside the core UI concerns it's intended to solve.

Because of this, learning JavaScript features is really advisable for you to be effective building applications with React. So here are a few JavaScript features I'd recommend you spend some time learning so you can be as effective as possible working with React.

Template Literals

Template literals are like regular strings with super-powers:

const greeting = 'Hello'
const subject = 'World'
console.log(`${greeting} ${subject}!`) // Hello World!

// this is the same as: console.log(greeting + ' ' + subject + '!')

// in React: function Box({className, ...props}) { return <div className={box ${className}} {...props} /> }

MDN: Template Literals

Shorthand property names

This is so common and useful that I do this without thinking now.

const a = 'hello'
const b = 42
const c = {d: [true, false]}
console.log({a, b, c})

// this is the same as: console.log({a: a, b: b, c: c})

// in React: function Counter({initialCount, step}) { const [count, setCount] = useCounter({initialCount, step}) return <button onClick={setCount}>{count}</button> }

MDN: Object initializer New notations in ECMAScript 2015

Arrow functions

Arrow functions are another way to write functions in JavaScript, but they do have a few semantic differences. Luckily for us in React land, we don't have to worry about this as much if we're using hooks in our project (rather than classes), but the arrow function allows for terser anonymous functions and implicit returns, so you'll see and want to use arrow functions plenty.

const getFive = () => 5
const addFive = a => a + 5
const divide = (a, b) => a / b

// this is the same as: function getFive() { return 5 } function addFive(a) { return a + 5 } function divide(a, b) { return a / b }

// in React: function TeddyBearList({teddyBears}) { return ( <ul> {teddyBears.map(teddyBear => ( <li key={teddyBear.id}> <span>{teddyBear.name}</span> </li> ))} </ul> ) }

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.

MDN: Arrow Functions

Destructuring

Destructuring is probably my favorite JavaScript feature. I destructure objects and arrays all the time (and if you're using useState you probably are too. I love how declarative it is.

// const obj = {x: 3.6, y: 7.8}
// makeCalculation(obj)

function makeCalculation({x, y: d, z = 4}) { return Math.floor((x + d + z) / 3) }

// this is the same as function makeCalculation(obj) { const {x, y: d, z = 4} = obj return Math.floor((x + d + z) / 3) }

// which is the same as function makeCalculation(obj) { const x = obj.x const d = obj.y const z = obj.z === undefined ? 4 : obj.z return Math.floor((x + d + z) / 3) }

// in React: function UserGitHubImg({username = 'ghost', ...props}) { return <img src={https://github.com/${username}.png} {...props} /> }

MDN: Destructuring assignment

Definitely read that MDN article. You are certain to learn something new. When you're done, try to refactor this to use a single line of destructuring:
function nestedArrayAndObject() {
  // refactor this to a single line of destructuring...
  const info = {
    title: 'Once Upon a Time',
    protagonist: {
      name: 'Emma Swan',
      enemies: [
        {name: 'Regina Mills', title: 'Evil Queen'},
        {name: 'Cora Mills', title: 'Queen of Hearts'},
        {name: 'Peter Pan', title: The boy who wouldn't grow up},
        {name: 'Zelena', title: 'The Wicked Witch'},
      ],
    },
  }
  // const {} = info // <-- replace the next few const lines with this
  const title = info.title
  const protagonistName = info.protagonist.name
  const enemy = info.protagonist.enemies[3]
  const enemyTitle = enemy.title
  const enemyName = enemy.name
  return ${enemyName} (${enemyTitle}) is an enemy to ${protagonistName} in "${title}"
}

Parameter defaults

This is another feature I use all the time. It's a really powerful way to declaratively express default values for your functions.

// add(1)
// add(1, 2)
function add(a, b = 0) {
  return a + b
}

// is the same as const add = (a, b = 0) => a + b

// is the same as function add(a, b) { b = b === undefined ? 0 : b return a + b }

// in React: function useLocalStorageState({ key, initialValue, serialize = v => v, deserialize = v => v, }) { const [state, setState] = React.useState( () => deserialize(window.localStorage.getItem(key)) || initialValue, )

const serializedState = serialize(state) React.useEffect(() => { window.localStorage.setItem(key, serializedState) }, [key, serializedState])

return [state, setState] }

MDN: Default parameters

Rest/Spread

The ... syntax can be thought of as kind of a "collection" syntax where it operates on a collection of values. I use it all the time and strongly recommend you learn how and where it can be used as well. It actually takes different meanings in different contexts, so learning the nuances there will help you.

const arr = [5, 6, 8, 4, 9]
Math.max(...arr)
// is the same as
Math.max.apply(null, arr)

const obj1 = { a: 'a from obj1', b: 'b from obj1', c: 'c from obj1', d: { e: 'e from obj1', f: 'f from obj1', }, } const obj2 = { b: 'b from obj2', c: 'c from obj2', d: { g: 'g from obj2', h: 'g from obj2', }, } console.log({...obj1, ...obj2}) // is the same as console.log(Object.assign({}, obj1, obj2))

function add(first, ...rest) { return rest.reduce((sum, next) => sum + next, first) } // is the same as function add() { const first = arguments[0] const rest = Array.from(arguments).slice(1) return rest.reduce((sum, next) => sum + next, first) }

// in React: function Box({className, ...restOfTheProps}) { const defaultProps = { className: box ${className}, children: 'Empty box', } return <div {...defaultProps} {...restOfTheProps} /> }

MDN: Spread syntax

MDN: Rest parameters

ESModules

If you're building an app with modern tools, chances are it supports modules, it's a good idea to learn how the syntax works because any application of even trivial size will likely need to make use of modules for code reuse and organization.

export default function add(a, b) {
  return a + b
}

/*

  • import add from './add'
  • console.assert(add(3, 2) === 5)
  • /

export const foo = 'bar'

/*

  • import {foo} from './foo'
  • console.assert(foo === 'bar')
  • /

export function subtract(a, b) { return a - b }

export const now = new Date()

/*

  • import {subtract, now} from './stuff'
  • console.assert(subtract(4, 2) === 2)
  • console.assert(now instanceof Date)
  • /

// in React: import React, {Suspense, Fragment} from 'react'

MDN: import

MDN: export

As another resource, I gave a whole talk about this syntax and you can watch that talk here

Ternaries

I love ternaries. They're beautifully declarative. Especially in JSX.

const message = bottle.fullOfSoda
  ? 'The bottle has soda!'
  : 'The bottle may not have soda :-('

// is the same as let message if (bottle.fullOfSoda) { message = 'The bottle has soda!' } else { message = 'The bottle may not have soda :-(' }

// in React: function TeddyBearList({teddyBears}) { return ( <React.Fragment> {teddyBears.length ? ( <ul> {teddyBears.map(teddyBear => ( <li key={teddyBear.id}> <span>{teddyBear.name}</span> </li> ))} </ul> ) : ( <div>There are no teddy bears. The sadness.</div> )} </React.Fragment> ) }

I realize that ternaries can get a knee-jerk reaction of disgust from some people who had to endure trying to make sense of ternaries before prettier came along and cleaned up our code. If you're not using prettier already, I strongly advise that you do. Prettier will make your ternaries much easier to read.

MDN: Conditional (ternary) operator

Array Methods

Arrays are fantastic and I use array methods all the time! I probably use the following methods the most frequently:

  • find
  • some
  • every
  • includes
  • map
  • filter
  • reduce

Here are some examples:

const dogs = [
  {
    id: 'dog-1',
    name: 'Poodle',
    temperament: [
      'Intelligent',
      'Active',
      'Alert',
      'Faithful',
      'Trainable',
      'Instinctual',
    ],
  },
  {
    id: 'dog-2',
    name: 'Bernese Mountain Dog',
    temperament: ['Affectionate', 'Intelligent', 'Loyal', 'Faithful'],
  },
  {
    id: 'dog-3',
    name: 'Labrador Retriever',
    temperament: [
      'Intelligent',
      'Even Tempered',
      'Kind',
      'Agile',
      'Outgoing',
      'Trusting',
      'Gentle',
    ],
  },
]

dogs.find(dog => dog.name === 'Bernese Mountain Dog') // {id: 'dog-2', name: 'Bernese Mountain Dog', ...etc}

dogs.some(dog => dog.temperament.includes('Aggressive')) // false

dogs.some(dog => dog.temperament.includes('Trusting')) // true

dogs.every(dog => dog.temperament.includes('Trusting')) // false

dogs.every(dog => dog.temperament.includes('Intelligent')) // true

dogs.map(dog => dog.name) // ['Poodle', 'Bernese Mountain Dog', 'Labrador Retriever']

dogs.filter(dog => dog.temperament.includes('Faithful')) // [{id: 'dog-1', ..etc}, {id: 'dog-2', ...etc}]

dogs.reduce((allTemperaments, dog) => { return [...allTemperaments, ...dog.temperaments] }, []) // [ 'Intelligent', 'Active', 'Alert', ...etc ]

// in React: function RepositoryList({repositories, owner}) { return ( <ul> {repositories .filter(repo => repo.owner === owner) .map(repo => ( <li key={repo.id}>{repo.name}</li> ))} </ul> ) }

MDN: Array

Promises and async/await

This one's a big subject and it can take a bit of practice and time working with them to get good at them. Promises are everywhere in the JavaScript ecosystem and thanks to how entrenched React is in that ecosystem, they're everywhere there as well (in fact, React itself uses promises internally).

Promises help you manage asynchronous code and are returned from many DOM APIs as well as third party libraries. Async/await syntax is a special syntax for dealing with promises. The two go hand-in-hand.

function promises() {
  const successfulPromise = timeout(100).then(result => success: ${result})

const failingPromise = timeout(200, true).then(null, error => Promise.reject(failure: ${error}), )

const recoveredPromise = timeout(300, true).then(null, error => Promise.resolve(failed and recovered: ${error}), )

successfulPromise.then(log, logError) failingPromise.then(log, logError) recoveredPromise.then(log, logError) }

function asyncAwaits() { async function successfulAsyncAwait() { const result = await timeout(100) return success: ${result} }

async function failedAsyncAwait() { const result = await timeout(200, true) return failed: ${result} }

async function recoveredAsyncAwait() { let result try { result = await timeout(300, true) return failed: ${result} // this would not be executed } catch (error) { return failed and recovered: ${error} } }

successfulAsyncAwait().then(log, logError) failedAsyncAwait().then(log, logError) recoveredAsyncAwait().then(log, logError) }

function log(...args) { console.log(...args) }

function logError(...args) { console.error(...args) }

// This is the mothership of all things asynchronous function timeout(duration = 0, shouldReject = false) { return new Promise((resolve, reject) => { setTimeout(() => { if (shouldReject) { reject(rejected after ${duration}ms) } else { resolve(resolved after ${duration}ms) } }, duration) }) }

// in React: function GetGreetingForSubject({subject}) { const [isLoading, setIsLoading] = React.useState(false) const [error, setError] = React.useState(null) const [greeting, setGreeting] = React.useState(null)

React.useEffect(() => { async function fetchGreeting() { try { const response = await window.fetch('https://example.com/api/greeting') const data = await response.json() setGreeting(data.greeting) } catch (error) { setError(error) } finally { setIsLoading(false) } } setIsLoading(true) fetchGreeting() }, [])

return isLoading ? ( 'loading...' ) : error ? ( 'ERROR!' ) : greeting ? ( <div> {greeting} {subject} </div> ) : null }

MDN: Promise

MDN: async function

MDN: await

Conclusion

There are of course many language features which are useful when building React apps, but these are some of my favorites that I find myself using again and again. I hope you find this useful.

Thanks for reading

If you liked this post, please do share/like it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about JavaScript and React

The Complete JavaScript Course 2019: Build Real Projects!

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

JavaScript Bootcamp - Build Real World Applications

The Web Developer Bootcamp

JavaScript Programming Tutorial - Full JavaScript Course for Beginners

New ES2019 Features Every JavaScript Developer Should Know

Best JavaScript Frameworks, Libraries and Tools to Use in 2019

JavaScript Basics Before You Learn React

React - The Complete Guide (incl Hooks, React Router, Redux)

Modern React with Redux [2019 Update]

Best 50 React Interview Questions for Frontend Developers in 2019



javascript reactjs web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

ReactJS Web App Development Services

We provide top-notch ReactJS development services to global clients. Hire expert ReactJS developers from top React JS development company, Skenix Infotech.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.