React Basics

This is a step-by-step tutorial about React. We're using tags to differentiate every step in the tutorial. Here's a complete list of steps (with their respective tag links):

Steps

Step 1: Render simple element in the screen

Step 2: Create first component

Step 3: Pass first props

Step 4: JSX is just JS

Step 5: React without JSX

Step 6: Special props (className)

Step 7: Special props (className) without JSX

Step 8: Components and elements case conventions

Step 9: Components composition

Step 10: Properties without values act as booleans

Step 11: getDefaultProps to specify default property values

Step 12: First example using ES6 classes

Step 13: A more complex example using dynamically generated components

Step 14: Component children access with props.children

---

Step 17: First example with state

Step 18: Simple state example with ES6 syntax

Step 19: A more complex example using state

Step 20: To finish: Our first state change.

Step 21: To finish: More state change in a simple TODO app.

Step 22: Form elements and events

Step 23: Component's life cycle