Beginner React.js, Fundamental and Concepts
If you are a kick start beginner react.js developer and want to know about basic functionality, component, hooks, and fundamentals I hope this article will help you. I am trying to describe the things informatively within minimum description and less coding example.
What is React
React is a declarative User Interface (UI) JavaScript library created by Facebook. It’s a tool for building UI components and not exactly a “framework”. You can check library vs Framework from another article.
In a shorthand, Framework is a complete solution but React is a JS library & not a complete solution and you will often need to use more libraries with React to form any solution.
What does it mean Declarative in React!
“Declarative”, at least in the programming sense, is usually defined as “telling what to do instead of how to do it”. We tell react what to do and React will take care of it- translate our declarative descriptions (which we write in the React language) to actual UIs in the browser. Before showing actual DOM it generates virtual DOM. With React we get to be declarative for HTML UIs that represent dynamic data, not just static data.
React Virtual Dom
The component tree structure is called virtual dom. While rendering react creates virtual dom. I am giving an example that will help you to understand.
React Component
In React, we describe UIs using components. They are reusable, composable, and stateful.
You can think of components as simple functions (in any programming language). components make your code more readable and easier to work with. 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 to start with a capital letter
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 Mounting
Mounting is the phase in which our React component mounts on the DOM (i.e., is created and inserted into the DOM). This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.
React Unmounting
React has a top-level API called unmountComponentAtNode() that removes a component from a specific container. The function unmountComponentAtNode() takes an argument as a container from which the specific component should be removed.
React Fragment
React Fragments allow you to wrap or group multiple elements without adding an extra node to the DOM. This can be useful when rendering multiple child elements/components in a single parent component.
React Hooks
A hook in a React component is a call to a special function. All hooks functions begin with the word “use”. Some of them can be used to provide a function component with stateful elements (like useState), others can be used to managed side effects (like useEffect) or to cache/memoize functions and objects (like useCallback). Hooks are very powerful and sky is the limit when it comes to things you can do with them.
Conclusion
I’m tried to describe some core concepts about React. I hope it will help you to better understanding about 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 answer future React job interview questions.
If you have any suggestions about this article please feel free to place a comment. It will help me to update my knowledge and also this article.
Thanks for your time.
Author Profile