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

In the previous lesson, we learned how to handle user interactions, but we didn't store the event value. Let's re-examine the code that we saw in the last lesson.

html,body,#content {
  width: 100%;
  height: 100%;
  background-color: #ffe;
  margin:0;
  padding:0;
}

input {
  width:200px;
  height:20px;
}

.container {
  width: 243px;
  height: 420px;
  text-align: center;
  position: absolute;
  left:0;
  right:0;
  top: 80px;
  bottom:0;
  margin:auto;
}


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



codemirror

babel

play

**MyInput** should handle **value** on it's own somehow, but turns out that we can't store anything within a function, so we handle it outside of **MyInput**. We have intentionally discussed functions so far to go over the basics. Now we will introduce you to a full-blown React Component that can store values as well.

The way to define such a React Component is using `class`.

`class` is also a part of ES6, and unlike functions, it can store data. We will use it to our advantage to simplify user interactions handling.

Let's create a basic class and make a couple instances of it (*the following code is to show you how to create classes in ES6. It's not React specific).*

In this lesson we will go over the concept of State in React Components and how state updates trigger rendering of the component.

Introduction

ES6

Pure React

State

What is next?

Appendix

Storing State in React Components