- Data flow is one-way.
Single source of truth — Data is created and stored in one location, unchangeable. Data is passed from the parent to the child component. From the child component to the parent component, actions give.
The React JS language is used to create user interfaces. Syntax similar to HTML/XML. Converts expressions to strings to prevent cross-site scripting attacks.
- Virtual DOM
Instead of DOM manipulation, react creates a virtual DOM tree and compares it to the rendered tree, updating only what has changed.
Props and State
Props are used to communicate data and behaviour between container and child components. Props can only be read. Data that can be updated is kept in state. The state is read-write. To update the status, use the setState() method. Because the setState method is asynchronous, you must use the second form of the method setState((state, props)=>) to use the state and props within it.
Lifecycle of Components
Constructor in Java Script. Declare state and tie life cycle events to context. Do not call setState. Always call super(props) to bind this. Props.
The component is being rendered. When the state or props are modified, this method is called. Returns JSX, Portal, Fragments, Strings, and booleans, among other things.
It fires once the component has been mounted to the DOM. Can communicate with the DOM. Ajax calls and state updates.
After the component has been updated. If shouldComponentUpdate returns false, the program will not run. After a Component update, use this to interact with the DOM.
To determine whether or not to update the component. If necessary, only as a performance boost.
This component is utilized before the component is removed. SetState should not be called. Tasks will be cleaned up.
If you wish to update your state using props, this is the method. React strongly advises against using this. Conditionally setting state from props is strongly discouraged.
This component is used after a decedent component error. To get error-related State, use getDerivedStateFromError. For logging and side effects, use componentDidCatch.
API is relatively new. The primary goal was to prevent passing props through numerous tiers. React specifies that this usage should only be applied to context-level data. Authenticated users, for example. Context API should not be used to represent a state. Controlling the rendering is a challenge.
This functionality is new. This is a method of introducing state, as well as some life cycles, to functional components. This feature is frequently used to extend the functionality of functional components. Hooks should only be used in React functional components and custom hooks at the top level (not in loops). useStae and useEffect are mainly two popular hooks.
The most well-known module bundler. Support for both the build system and module bundling. Split the code into several files. AMD and CommonJS are supported. Use loaders to extend (transpiring, CSS transformation, image optimization). Supports production improvements (minification, uglification). Simple configuration in four steps: entry, loaders, plugins, and output.
Most efficient module bundler. Conventions take precedence over configurations. Support for JSX, SCSS, LESS, SVG, TypeScript, and more languages. Extensions and plugins are automatically detected.