ES6 borned on 2015 Key Milestones:

• 1997: ES1 – First edition

• 1998: ES2

• 1999: ES3 – Major features

• 2009: ES5 – “Modern” JavaScript

• 2013: React released (used ES5)
•  
• June 2015: ES6/ES2015 – HUGE update

• 2015: ES6 released

• 2015-2016: React started adopting ES6 features

• 2016+: ES2016, ES2017, etc. (Yearly updates)

• 2019: React Hooks released (heavily uses ES6+ features)

ES6 new features after 2015

class ProductComponent extends React.Component {  // 👈 Inheritance
    constructor(props) {
        super(props);  // Must call parent constructor
        this.state = { products: [] };
    }
    
    componentDidMount() {  // 👈 Override lifecycle method
        // Like @PostConstruct
    }
    
    componentWillUnmount() {  // 👈 Override lifecycle method  
        // Like @PreDestroy
    }
    
    render() {  // 👈 Required override
        return <div>Content</div>;
    }
}

Main Hooks You MUST Know:

1. useState – For State Management

// Like having instance variables in a class
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(false);

// Equivalent to:
// private List<Product> products = new ArrayList<>();
// private boolean loading = false;

2. useEffect – For Side Effects

// Like @PostConstruct + cleanup
useEffect(() => {
    // Component mounted - fetch data
    fetchProducts();
    
    return () => {
        // Component will unmount - cleanup
        // Like @PreDestroy
    };
}, []); // Dependency array - like method parameters

3. useContext – For Dependency Injection

// Similar to @Autowired in Spring
const userService = useContext(UserServiceContext);
// vs Spring: @Autowired UserService userService;