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

Now when you know about statefull components you may wonder, why we did we avoid it for so long.
The reason is that statefull and stateless componenents are some kind of *yin and yang* in React application.
They also has some synonyms that you should remember:

* **statefull** components is called - **smart**
* **stateless** - **dumb** or **pure**

You have more power with smart components, but:
- dumb components are less verbose. More code - more chances to make mistake, longer to type, harder to read.
- they are totally predictable, you will always get the same UI given the same argument value.
- you don't accidentally spread the state over your app, which means there are less places in codebase that you should worry about. 
- React optimizes stateless functional components -  they are much more performant than class based.

Because of this we have one good practiсe in react - **"Hold your state at the top"**.

Dumb vs Smart components