Is React.js framework or library ? What do you think?
React.js is actually a JavaScript library. And can also add more library if needed.
React tree reconciliation
We know that react is faster than other library or framework. But how? Because, react uses reconciliation tree and it doesn’t change full pages or load entire pages. Instead of doing reload or change, it updates DOM. When a component’s change, react calculate if it necessary to update or change the DOM. That’s how react tree reconciliation works.
JSX
JSX is an HTML like syntax extension used by React that extends ECMAScript so that HTML like text can co-exist with React code. The syntax is intended to be used by preprocessors to transform HTML like text found in JavaScript files into standard JavaScript objects that a JavaScript engine will parse.
JSXallows us to write HTML elements in JavaScript and place them in the DOM. JSX converts HTML tags into react elements. We don’t need to use JSX, but JSX makes it easier to write React applications.
Default Props
Default props is a property in React component, which is used to set values for props arguments. It will be changed if the props property is passed. For a React component created using ES6 class syntax, we can set default props by adding a static property named defaultProps to the component class. The defaultProps static property should be set to an object representing the default props for the component.
Virtual DOM
Virtual DOM is a programming concept which is an idea or virtual representation of a UI is kept in memory and synced with the ‘real’ DOM by a library such as ReactDOM. It is a node tree that lists elements and their attributes and content as objects and properties. React render method creates a node tree from react components and updates this tree in response to mutations in the data model, caused by actions. Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created.
Components Lifecycle
A components when created and mounted on DOM, the life cycle is start. And then, it is unmounted, total time is counted as components lifecycle. Each component has several lifecycle methods that we can override to run code at particular times in the process. Each React component has a lifecycle which we can monitor and manipulate during its three main phases. These three phases are Mounting, Updating and Unmounting.
Functional vs Class components
One of the main difference between functional and class component is syntax. A functional component is just a plain JavaScript function that accepts props as an argument and return a React element. On the other-hand, React class component requires to extend from React. In functional component, there is no render method but a class component must have the render() method returning HTML. Lifecycle methods cannot be used in a functional component but in class component, react lifecycle methods can be used inside.
PropTypes
Sometimes we need to pass data to component as props. So, we may mistakenly pass wrong type of data to component. To prevent this, we use PropTypes which make sure the passing object is correct type to a component. It is a library that helps in minimizing this problem in React by checking the types passed in the props object against a specification we set beforehand and to raise a warning if the types passed don’t match the types expected.
ReactDOM.render( )
To manipulate data and create effective user interaction we need to use DOM. And this is the entry point for a react application into browsers DOM. It passes two arguments, react element and place in browser. It controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
React is all about components
React component is reusable, composable and stateful. Components in react are independent also. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. Components come in two types, Class components and Function components.