React Components

Building blocks for a React Application
Reusable and modular pieces of code that have functionality, that can be used to create user interfaces
Javascript code that returns JSX (Javascript XML) code, which allows developers to write HTML-like code into Javascript files.
2 Types of React components

Functional components

Javascript functions that takes in props as input and return an output

    function Counter(props) {
        return (
            <div>
                <body>{props.count}</body>
            </div>
        )
    }
    export default Counter;

ES6 Way (This is the way)

    // Destructuring: {count} == props.count
    const Counter = ({count}) => {
        return (
            <div>
                <body>{count}</body>
            </div>
        )
    }
    export default Counter;

Class components

Javascript classes that can perform tasks

    class Counter extends React.component {
        constructor(props) {
            this.state = {count: 0};
        }
        render() {
            return (
                <div>
                    <body>{this.state.count}</body>
                </div>
            )
        }
    }

    export default Counter;