React JS: Essentials
React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React has a declarative approach.
React allows developers to use a virtual browser that is more user-friendly than the actual browser. React acts as a intermediary between the developer and the Document Object Model (DOM), handling communication on behalf of the developer.
JSX
JSX is a syntax extension to JavaScript. It is a syntax that allows you to write HTML inside of JavaScript.
React Virtual DOM
React virtual DOM is a tree of nodes that is used to represent the DOM.
In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.
A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.
Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen. Think of manipulating the virtual DOM as editing a blueprint, as opposed to moving rooms in an actual house.
React Components
React Components are the building blocks of React. Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components
React State
React State is the data that is stored in the component. The state is an updatable structure that is used to contain data or information about the component and can change over time. The change in state can happen as a response to user action or system event. It is the heart of the react component which determines the behavior of the component and how it will render.
React Props
React Props stand for “Properties.” They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.
Props vs State
Props are read-only. // State changes can be asynchronous.
Props are immutable. // State is mutable
Props allow you to pass data from one component to other components as an argument. // State holds information about the components.
Props can be accessed by the child component. // State cannot be accessed by child components.
Component Lifecycle
In React, each component has a lifecycle that can be monitored and manipulated during its three main phases: mounting, updating, and unmounting.
The componentDidMount() method is called after the component is rendered on the page.
The next phase, updating, occurs when there is a change in the component's state or props.
Finally, the unmounting phase occurs when a component is removed from the Document Object Model (DOM).
React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()
A component is updated whenever there is a change in the component’s state or props.
The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
Render
The render() method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.
