import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function Button(props) {
return (
<button type="submit">{props.label}</button>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<Button label="Save" />, rootElement);

JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

render(){
    return (
        <div>
            <h1> This is a JSX code</h1>
        </div>
    )
}

DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

These are the few instances where ES6 syntax has changed from ES5 syntax:

• Components and Function

• exports vs export

• require vs import

Keys are very important in lists for the following reasons:

• A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists
• It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered

React employs forms to enable users to interact with web applications.

• Using forms, users can interact with the application and enter the required information whenever needed. Form contain certain elements, such as text fields, buttons, checkboxes, radio buttons, etc
• Forms are used for many different tasks such as user authentication, searching, filtering, indexing, etc

Components are the building blocks of any React application, and a single app usually consists of multiple components. A component is essentially a piece of the user interface. It splits the user interface into independent, reusable parts that can be processed separately.

There are two types of components in React:

• Functional Components: These types of components have no state of their own and only contain render methods, and therefore are also called stateless components. They may derive data from other components as props (properties)

function Greeting(props) {
  return <h1>Welcome to {props.name}</h1>;
}

• Class Components: These types of components can hold and manage their own state and have a separate render method to return JSX on the screen. They are also called Stateful components as they can have a state.

class Greeting extends React.Component {
  render() {
    return <h1>Welcome to {this.props.name}</h1>;
  }
}

• The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.
• The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.