Reactjs Core concepts.
Seven Core concepts to Learn if you want to master React.js
React is the most popular frontend library for building user interfaces. Unlike Vue and Angular, React isn't a framework but rather a UI library that uses a virtual Dom to update the real Dom. It enables you to build user interfaces using components. If you want to become good at react here are seven concepts that you need to master.
1. Virtual Dom
Virtual DOM is the virtual representation of the DOM. In React when the state of the application changes, the virtual Dom gets updated instead of the real DOM. In React every UI piece is a component, and each component has a state. React follows the observable pattern and listens for state changes. When the state of a component changes, React updates the virtual DOM tree. Once the virtual DOM has been updated, React then compares the current version of the virtual DOM with the previous version of the virtual DOM. This process is called “diffing”.
Once React knows which virtual DOM objects have changed, then React updates only those objects, in the real DOM. This makes the performance far better when compared to manipulating the real DOM directly. This makes React stand as a high-performance JavaScript library.
2. Component
Components in React are independent and reusable bits of code. they are written and exported as JavaScript functions and work in isolation while returning JSX. Components come in two types, Class components and Functional components. Components can be imported in React files to be reused making it easier to build UIs with fewer codes.
3. JSX
React uses what is called JSX, a markup that looks like HTML but it is not. JSX which means Javascript XML is an XML/HTML-like syntax used by React that extends ECMAScript so that XML/HTML can co-exist with JavaScript expressions. You can include JavaScript expression using a pair of curly brackets anywhere within JSX
4. Props
Familiar with how arguments & functions work in JavaScript?, then you already know what Props is. In a nutshell, props are used to pass data from a parent component to a child component in React and they are the main mechanism for component communication. So in essence, props are a major part of what allows the react component pattern to work.
5. React States
React State represents a component's underlying data model and is rendered by the component. But more importantly, whenever data in the state changes it causes the component to re-render to reflect the change. This facilitates declarative programming where you can simply manipulate state; while React takes care of implementing updates to ensure your component reflects the data in the state accurately.
6. React Lifecycle
Every React component created goes through a series of phases from its birth to death. You can think of these components going through a circle of birth, growth and finally death.
At every phase, there are lifecycle methods that React calls to perform certain functions. Now, React allows us to override these methods. There are mainly three phases, Mounting, Updating and Unmounting.
7. React Hooks
Before reacting 16.8 you needed to convert a functional component to class components to be able to use states. With React 16.8 react hooks were introduced. What is Hooks?, Hooks are the functions that hook into React state and lifecycle features from function components. It does not work inside classes. The most commonly used hooks are useState, useRef, useEffect, useMemo, useCallback and useContext.
Conclusion
We have learned about the seven core concepts in React. If you feel inspired you can head to React official documentation to start your journey in become a master in React.