Learn the basics of ES6 and React. I assume that you know nothing about React. My goal is to teach you React without requiring any setup or tools. All code samples can be executed in the Browser. The course begins by giving you an overview of ES6. We then begin creating basic components in React, then continue to enhance them. The final example is an interactive web page with multiple stateful components interacting with each other on user actions.

React JS & ES6 for JavaScript beginners

## let

The following code is from ES5. Can you identify the problem here (specially look at line 1 and line 4). 

Now `Run` the program to see the output. Did it match your expectation?

/*Javascript in this tab will be prepended to javascript written in 'js' tab and it will always be hidden to reader*/



var apples = 5;

if (true) {
  var apples = 10;
  console.log(apples); // 10 (inside block)
}

console.log(apples) // 10 (outside the block, still 10)

codemirror

console

play

It's confusing. `var apples` on line 4 was within a scope but it was able to influence the variable declared outside the scope. It's actually a feature called `Hoisting` where all variables declared in the function are moved to the top.

`let` is the new variable declaration mechanism that respects scopes and doesn't do `Hoisting` the way `var` does.

Look at the same code but now we've replaced `var` with `let`. Does it now match your expectation?


let apples = 5;

if (true) {
  let apples = 10;
  console.log(apples); // 10 (inside block)
}

console.log(apples); // 5 (outside the block, 5 now - as assumed!)

Variables declared with `var` can be accessed before their declaration. Why? Because they are hoisted to the top so they are always available to every line of your function. 

Look at the following weird looking code which is actually *legit* in Javascript.

You cannot access variables before their declaration with `let`. Here's the same code but now you can see that it throws an error. Run the following code to see the error.

try{
  a = 10;
  console.log(a);
  let a = 5;
} catch(e) {
 console.log(e.message)
}

Double declaration with `let` is also forbidden. Try it.


babel

Every `for` here has it's own `i` variable, and no `i` is declared in global scope. It's another example where you can see that let doesn't hoist i to the top. Try it as well

try{
	for(let i = 0; i < 10; i++) { /* … */ }
	for(let i = 0; i < 10; i++) { /* … */ }

	console.log(i) // ERROR: i is not defined
} catch(e) {
	console.log(e.message)
}



## const
`const` disallows reassignment of variables. It's a static check. Run the code below.

There are may places in your code where you know that the value of the variable is set in stone and isn't going to change. It's a good idea to declare them with `const`.

**Caveat:**
Many developers are confused about `const` objects or arrays.
`const` protects you only against reassignment, but *mutations* are still allowed. Try running the following code.


const o1 = {};

const o2 = {};
o2.a = 'value'; // NO ERROR
console.log(JSON.stringify(o2)); //  {"a":"value"}

o1 = o2; // ERROR!

# let

The following code is from ES5. Can you identify the problem here (specially look at line 1 and line 4). 

Now `Run` the program to see the output. Did it match your expectation?

# const
`const` disallows reassignment of variables. It's a static check. Run the code below.

let and const are new variable declaration mechanisms introduced in ES6. In this lesson, we will cover let, const and see how it leads to better code than the variables declared with var.

Introduction

ES6

Pure React

State

What is next?

Appendix

Let and Const

let

const