Stateless components - purely functional

No need to implement constructor then.

Declarative

Component-based

encapsulate behaviors into small units called Components
Components are made of elements.
Components enable us to break down the entire UI in to smaller reusable pieces.
can have private states to control.
Only class components can store states.

Component Methods

Component State and Lifecycle

Element

smallest building blocks is elements.

Basic structure for a component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import React, { Component } from 'react';

class Menu extends Component {
    constructor(props) {
        super(props);
        // Need to supply this props to the super class
    }
    render(){
        return(
            // the view for this component
        );
    }
}
export default Menu;
//need to import this component for wherever we use

Every parameter pass to the component is under props.

If one component export the default one, there is no need to enclose import component name with braces, otherwise error occurs.

JSX: wrapped React Component expression

Handling events like handling DOM elements