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

Suppose we have two arrays and we want to merge them together.

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



const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

console.log(arr1.concat(arr2))

codemirror

console

play


With `...` - spread operator we can do the same

const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];

console.log([...arr1, ...arr2])

babel

Looks cleaner to me but it isn't that impressive.
However, let's do the same with objects:

Seems really ugly! Compare doing the same with spread operator:

Spread operator is used to expanding an expression where multiple arguments or multiple elements are required. We look at the use of spread operator in this lesson.

Introduction

ES6

Pure React

State

What is next?

Appendix

Spread operator