Repository navigation
More React
Why React is quick? React compares the js object (Virtual DOM) generated by states and jsx and replaces the difference in the DOM.
React Router Router
Why React Hooks? From class to functions. A React Hook is a special type of function that allows you to "hook into" React state and lifecycle features from function components. With the introduction of React Hooks in React 16.8, you can now use state and other React features without writing a class component React provides built-in hooks like useStateand useEffect, but you can also create your own custom hooks to reuse stateful behavior between different components.
React DOM (Cross Platform)
ReactDOM is the entry point to the React library that allows for rendering React components to the DOM (Document Object Model). It provides methods like render() and hydrate() to mount React elements into the DOM tree. React DOM acts as an abstraction layer, allowing React to interact with different renderers like React Native for mobile apps.
State
In React, state represents the internal data stored by a component. It allows components to create and manage their own data, which determines the component's rendering. When the state of a component changes, React re-renders the component and its children. State should be immutable, meaning it shouldn't be modified directly, but through the setState() method.
Lifecycle Methods
React components go through different phases in their lifecycle, and React provides lifecycle methods that allow developers to hook into these phases and execute code at specific points. Some common lifecycle methods are:
-
componentDidMount(): Invoked after the component is mounted (inserted into the DOM tree). -
componentDidUpdate(): Invoked immediately after an update occurs. -
componentWillUnmount(): Invoked before a component is unmounted and destroyed.
Lifecycle methods are useful for tasks like fetching data from an API, setting up subscriptions, or cleaning up resources.
Context
React Context provides a way to pass data through the component tree without having to pass props down manually at every level. It creates a global data scope that can be accessed by components at any level in the tree hierarchy. This can be useful for managing global state, themes, or other data that needs to be shared across multiple components.
Refs
Refs (References) provide a way to access DOM nodes or React elements directly. They can be useful when you need to manipulate a DOM node or access the imperative API of a React component instance. Refs are created using the React.createRef() method or the useRef() hook. They are often used for tasks like managing focus, triggering imperative animations, or integrating with third-party libraries.