A small trip to React World
Is React library or Framework?
React is known as a small library of Javascript. It’s not exactly a framework. React focuses on one thing that is building user interfaces. extremely easy to mix it with other 3rd party libraries. It is a declarative, efficient, and flexible javascript library.
About Virtual DOM
Virtual DOM is a process where ideal or virtual representation kept in memory and this process is called Virtual DOM. Link a library with real DOM such as a reactDOM .VDOM has power, properties, method same as DOM. VDOM statement looks like a tree.
How Virtual DOM works
React makes two copies from real DOM. When needing any change to application or element, a first copy goes to re-render. After re-rendering the first copy compares to second copy. And isolate the change. Finally, update the only change section on real DOM.
A short brief about JSX
React JSX stands for javascript XML. It allows to us write HTML code in react. We can write smoothly markup and logic at react file for JSX. JSX allow us put HTML element on DOM without createElement() and appendChild(). It converts HTML tags to react elements.
Props in React
Props is a special keyword in React, which means for properties and it is used for passing data from one component to another. Since React is a component-based library, props can only be passed to components in the only parent to child.
React State
React components has a built-in state object. The state object is where you store property values that belong to the component. When the state object changes, the component re-renders.
Example:
const {user, setUser} = useState({});
In this example, user is a state and its initial value is empty. If we want to change the value of the state we can use the setUser function. Look at below:
const newUser = {
name: ‘William’
passion: ‘programming
}
setUser(newUser);
Now, the user state has the new value of newUser object.
React Hooks
React hooks allows you to use state and other React features without writing class component. Hooks are the functions which “hook into” React state and lifecycle features from function components. Also, it does not replace your knowledge of React concepts.
React Lifecycle
Each component in React has a lifecycle that you can monitor and manipulate during its three main phases.
The three phases are Mounting, Updating, and Unmounting.React Component
React Component
In React, we describe UIs using components. They are reusable, composable, and stateful.
Components make your code more readable and easier. We call functions with some input and they give us some output. We can reuse functions as needed and compose bigger functions from smaller ones.
Their arguments or inputs are a set of “props” and their output is a description of a UI.
The component name has always to start with a capital letter.
Conclusion
I hope it will help you to better understanding the react functionality & now you also know the react core concepts that will help you grow in the ocean of React. It will also help you to grow more in the developing world.
If you have any suggestion to about my article. Please feedback me. Thanks for your time.
