It's flexible, and creates dynamic maintainable components for web applications. Code can be used through multiple files.

They are like JavaScript functions. They accept “props” and return React elements describing what should appear on the screen. One of the building blocks of React.

Syntax extension to JavaScript. Appears like a mix of HTML and returns plain JS elements.

A way to rewrite usuable features. Props are arguments passed into React components. Props stand for properties. React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, use the same syntax as HTML attributes"

State is a built-in React object that is used to contain data or information about the component. Allows us to manage change in data in an app.

A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.

Functional components are basic JavaScript functions. These are typically arrow functions but can also be created with the regular function keyword. Sometimes referred to as “dumb” or “stateless” components as they simply accept data and display them in some form; that is they are mainly responsible for rendering UI.

React lifecycle methods (for example, componentDidMount) cannot be used in functional components. There is no render method used in functional components. These are mainly responsible for UI and are typically presentational only (For example, a Button component). Functional components can accept and use props. Functional components should be favored if you do not need to make use of React state. Class components make use of ES6 class and extend the Component class in React. Sometimes called “smart” or “stateful” components as they tend to implement logic and state. React lifecycle methods can be used inside class components (for example, componentDidMount). You pass props down to class components and access them with this.props"

"CLASS - 
class ClassHelloWorld extends React.Component {
    render() {
      return <h1>Hello, World</h1>;
    }
}   

FUNCTIONAL - 
const FunctionHelloWorld = function () {
    return <h1>Hello, World</h1>;
};"

React Hooks let developers use state and other React features without writing a class.

useState works by letting you add React state to function components.

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call ""count""
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}"

A virtual DOM object is a representation of a DOM object, like a lightweight copy. It has the same properties as a real DOM object, but it lacks the real power to directly change what’s on the screen.

Two way data binding means that UI fields are bound to model data dynamically such that when a UI field changes, the model data changes with it. So if using two-way data binding, you always have the same data in Model and View. One way data flow means that the model is the single source of truth. Only the model has the effect is that data always flows in a single direction, which makes it easier to understand.