React Starter: React Prerequisites and 4 ES6 Things to Know

Celý článek

JavaScript has come a long way in the past decade, especially with the ES6 update.

JavaScript’s standardized name is ECMA Script and this version came in 2015. It was named ES2015 or ES6 for version 6.

Knowledge of ES6 is important when building React applications. ES6 brought a lot of cool syntax changes to JavaScript that make writing JavaScript much easier.

Terminal

In order to use the React CLI (create-react-app), it is encouraged to learn the command line. This is how we’ll start applications with create-react-app and also start development on our projects.

The main commands you’ll need to know:

• ls: list everything in your current folder
• cd <name>: choose a folder to go into
• mkdir <name>: create a folder

Here’s some good resources:

• Codecademy
• Galvanize

4 Main ES6 Features to Know

While ES6 (JavaScript's major update in 2015) came with many syntax updates, there are 4 main syntax updates to know that are used heavily in React.

https://scotch.io/embed/vimeo/328019979

1. let and const in addition to var

Up until now, you would declare variables in JavaScript using var. ES6 introduced two new ways to declare variables with const and let. Here are the main differences:

• const: This variable can not be reassigned. JavaScript will throw an error if we try to reassign a new value
• let: This variable can be reassigned. This is similar to var

Why does this matter?const allows us to quickly see that a variable should stay constant; it will not be reassigned. let tells us that we are going to change the value of this. It gives a little more indicator of what the variable will do than var.

Use const or let instead of var

// es5
var message = 'hello there!';

// es6
const message = 'hello there!';

// error if we try to reassign message
message = 'my new message'; // <- ERROR

2. Arrow Functions (=>)

Arrow functions are what you’ll see the most JavaScript so it’s a good idea to get used to them. In addition to allowing us to write 1-line syntax, arrow functions can change the lexical scope of a function. We won’t have to worry about scope too much in this starter, just be aware.

// es5
function sayHello() {
  return 'i am saying hello';
}

// es6 explicit return (same as above)
const sayHello = () => {
  return 'i am saying hello';
}

// es6 implicit return 1-liner (same as above)
const sayHello = () => 'i am saying hello';

Here’s another example that has function arguments:

// es5
function add(a, b) {
  return a +_ b;
}

// es6
const add = (a, b) => a +_ b;

Arrow functions allow us to simplify our code to a single line and you may see a lot of this in the React code you encounter. Here’s an example of a React function written with and without arrow functions:

// function
function App() {
  return (
    <div>my app goes here</div>
  );
}

// es6
const App = () => (
  <div>my app goes here</div>
)

The two examples here are the same, but you get a little bit of cleaner code with the ES6 arrow function.

Note: Functions and Arrow Functions are both valid and can be used throughout our code. It is up to you to determine which is the better one to use for each scenario. Stick to your own set of rules so you have consistency across your code.

3. Classes

ES6 brought in JavaScript classes. Classes are just some syntactical sugar for JavaScript. Under the hood, classes are just plain old functions. React code has many classes throughout, but for our starter guide, we’ll be using functions directly.

It is good to be aware that React code you see may use classes. React 16.8 brought us React Hooks which gave React functional components all the same tools as React class components so we’ll stick to functional components.

Component Comparison with State

Here’s an example of a component that uses React state in function and classes:

// class
class App extends React.Component {
  state = { message: 'my message' };

  updateMessage = message => this.setState({ message });

  render() {
    const { message } = this.state;

    return (
      <div>my message is: {message}</div>
    );
  }
}

Here’s the same example with functions and React Hooks:

function App() {
  const [message, setMessage] = React.useState('my message');

  return (
    <div>my message is: {message}</div>
  );
}

Notice how much cleaner the functional React component is using React Hooks like useState. For our Starter Guide, we’ll stick to React functional components and React Hooks.

4. Destructuring

Destructuring is used very often in React. Object destructuring and array destructuring are very easy ways to simplify our JavaScript code.

Destructuring lets us simplify multiple tedious lines into a single line.

Object Destructuring

Let’s tackle object destructuring first. ES6 allows us to split our JavaScript across multiple files and then be able to import what we need. For instance, when we want to grab React when using ES6, we can import React from'``react``' . These import statements is where you’ll see object destructuring mostly.

Here’s a simple example of object destructuring.

// create an object
const person = {
  name: 'chris',
  username: 'chrisoncode'
};

// you could get name like this:
let name = person.name;
let username = person.username;

// or you could get name with destructuring
let { name, username } = person;

Let’s look at object destructuring in React. The following is two ways to write the same thing:

// no destructuring
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>hello</h1>, document.getElementById('root'));

Now with array destructuring, we can pull the render method directly out of the object.

// with destructuring
import { render } from 'react-dom';

render(<h1>hello</h1>, document.getElementById('root'));

Object destructuring is just a quicker way to pull a property out of an object.

Array Destructuring

Array destructuring is similar to object destructuring except we are going to be pulling values out of an array. Here’s a simple example:

// create an array
const people = ['chris', 'holly'];

// grab without destructuring
let chris = people[0];
let holly = people[1];

// grab with destructuring
let [chris, holly] = people;

Array destructuring is a way to take the array and pull data out one by one in the order they appear in the array.

We’ve already seen where array destructuring is used in React when we use useState.

const [message, setMessage] = React.useState('');

Transpilers and Babel

With the big upgrade to JavaScript in ES6, developers were very excited to start trying out all the cool new things. There was a big problem however:

Some browsers didn’t support some ES6 features.

Some browsers like IE didn’t support the latest and greatest JavaScript features. There was no knowing when they would get updated either.

This is where a transpiler comes in. A transpiler takes our ES6 code and converts it to something the browser can read.

A Transpiler Example

Let’s say we wrote this ES6 code that IE wouldn’t be able to understand:

const App = () => {
  return (
    <div>my app goes here</div>
  );
}

We have a few different options to support older browsers:

1. Write ES5 code and ditch the cool new ES6 syntax
2. Use a tool that converted our code to something the browser would understand (transpilers)

After we run the above code through a transpiler like Babel, we’ll get the following code. This is code IE can understand! You can even try out Babel right here.

"use strict";

var App = function App() {
  return React.createElement("div", null, "my app goes here");
};

We wouldn’t want to write our code like this; it’s tedious. Let’s write in the clean ES6 syntax and let these transpilers do the heavy lifting for us.

When we did our CodePen example from the previous article, we set up our CodePen to transpile our code with Babel. This is how older browsers will be able to understand our React code.

How do we use Babel?

When we start applications using the React CLI (create-react-app), we’ll automatically get Babel added. If you are adding React to an already existing application, you’ll need to add a build setup yourself using webpack or another similar tool.

Let’s cover using React in its various ways in the next articles.