React

• Components
  • Class components
  • Function components
• Properties (props)
• Events
• Redux

Components

ReactDOM.render(
    <React.StrictMode>
        <MyClassComponent />
    </React.StrictMode>,
    document.getElementById('root')
);

Class components

import './MyClassComponent.css';

class MyClassComponent extends React.Component {
    render() {
        return (
            <div>My text</div>
        );
    }
}
export default MyClassComponent;

Function components

function myFunctionComponent() {
    return '<div>My text</div>'
}

Properties (props)

Child component

class MyClassComponent extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <div>{this.props.item.name}</div>
            </div>
        );
    }
}
export default ExpenseEntryItem;

Parent component

const item = {
    id: 1,
    name: "Peter",
}

ReactDOM.render(
    <React.StrictMode>
        <MyClassComponent item={item} />
    </React.StrictMode>,
    document.getElementById('root')
);

Events

class MyClassComponent extends React.Component {
    click() {
        // ...
    }

    render() {
        return (
            <button onClick={() => this.click()}>
                Click me
            </button>
        );
    }
}

Redux

const store = createStore()

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)