10 Basic Thing About React
What is React?
React is the most popular front-end JavaScript library. That used to design user interface(UI). With react we can create a user interface easily. Without React or similar libraries, we need to manually build UI with native Web APIs and JavaScript and that is not as easy.
Why React?
Angular or Vue are frameworks where some decisions are already made for you. React is just a library and you need to make all decisions by yourself. In framework, if you need a small piece of code you have to include the whole thing anyway.
Virtual DOM
To compare the component’s previous states and updates states react create Virtual DOM. Virtual DOM is separate from Real DOM where no need to repaint, it can work only javascript object.
How Does Virtual DOM Works
We can consider virtual dom as a tree and all the nodes are the components.
When we change the state of any components firstly virtual dom creates a new tree where changed components and its children create newly.
Now Virtual DOM has two state previous and updated states then virtual dom compares these two states using a very efficient algorithm diffing or reconciliation algorithm. After making a decision React change the particular part in the main DOM.
JSX
JSX stand for JavaScript XML. JSX help up to write javascript in a React app. In React using curly braces {}, we can write Javascript code. It also helps us to write and HTML in React. JSX convert HTML tag into react element.
Components
A component is an independent, reusable code block that divides the UI into smaller pieces. A component can take input as props and return a react element.
There are two types of components in react functional components and class components.
Props
Props (properties) is a special object of React that is used to transfer data from one component to another. It only transfers data parent components to children.
State
The state is a built-in React object that is used to contain data or information about the component. When-ever the state changed components re-render. States value can be changed based on users’ actions. setState() used to change the value of the state object. Depend on the value of the state object react can automatically change the UI.
React Event
Event handlers determine what action is to be taken when an action is fired. React events are named as camelCase instead of lowercase (onClick instead of onclick). In React event handling a function is passed as the event handler instead of a string.
Event declaration in plain HTML:
<button onclick=”show()”>
Show
</button>
Event declaration in React:
<button onClick={show()}>
Show
</button>
Lifecycle Methods
- componentWillMount
- componentDidMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidUpdate
- componentWillUnmount