Some Important Fundamental Concept of React
Introduction: What is React? React is a front-end javascript library for the building user interface. It is not a framework like angular. It is maintained and developed by Facebook. It is used for building up single-page or mobile applications. On May 29 2013 react first to introduce.
How Its Works: React is not a complete part of the solution. Frameworks can use for building a complete application on the other hand React is a piece of framework, uses to build for a part of an application. React is very useful for building up the application because by using React every part of an application can be done differently, on the other hand using a framework it could not be done like that. In React there may multiple components but all components have a parent component and every time when something changes in any component then the parent component will render. React create a virtual Dom, and make a copy that Dom. Main DOM not change but when something changes in the component the copy DOM change according to that and makes a request to change the main DOM and after that only change update in main DOM. this process makes React special. In React app there are only one index file and all components inject that index file.
Component: In React every part of an application is a component. It makes an application very neat and clean. There may be multiple components with nested components. But all component injects with the parent component. If multiple parts of an application are the same then it can use a simple component to complete that all part, this is the beauty of React. In React use JSX(JavaScript XML) for write HTML code in React. Every component can be different from others, also can styling differently. There are Class and Functional components in React.
Functional Component: Functional Component is one kind of component in React component. The functional component is easy to read, debug and test, it also simple from a Class component. It takes props and returns JSX.
Class Component: Class component is another component in React. It is a little bit extend from a functional component. In React Class component there must be a class that extends React.
Virtual DOM: DOM stands for Document Object Model. It is an application programming interface. DOM is a structure tree of how the HTML file is shown on UI. In React it creates a virtual DOM and it is different from the actual DOM. And also make a copy of that virtual DOM. Whenever something updates like delete, create, change in the component then first this will call copy DOM and telling the what update is happening. According to that copy DOM, Virtual DOM will send to that actual DOM, and actual DOM will change only the part of the change that happens.
Props: props is a special keyword in React, which stands for properties and is being used for passing data from one component to another. But the important part here is that data with props are being passed in a uni-directional flow. That means data can be pass from parent component to child component. Another thing is props data can’t be changed in the child component that means it read-only.
Default Props: Default props is a property in React component used to set a default value for the argument. It will be changed if the props value passes. If the props value not passed from the parent component then the default value will set in as child component props value.
JSX: JSX stands for javascript XML. It allows writing HTML in React. JSX makes easier to write HTML in React. JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods. JSX converts HTML tag to React elements.
Example: In JSX don’t need use document.getElementById(“root”) this type of things.Prop-types: Prop-types is a library to help to recognize the type of getting props-object that getting from the parent. If the type doesn’t match then it will give the developer a warning that the type doesn’t match. It is very helpful to find out the type of warning and get solving the warning. For example, If we pass a function to convert a number to a string it will go next to try to do that, but it also creates bugs and errors in code when an operation occurs because the data we passed is a different type.