What Exactly is React Js?

3 min readMay 15, 2022

React is a front-end JavaScript library for creating user interfaces using UI components that is free and open-source. A JavaScript library for designing user interfaces also serves as an MVC view. React is well suited to massive online applications that use data and change over time without requiring a page reload. React Native creates mobile apps for various platforms, whereas React VR is used to create virtual reality apps. Speed, simplicity, and scalability are the goals.

Significant Characteristics

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

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.

render

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.

componentDidMount

It fires once the component has been mounted to the DOM. Can communicate with the DOM. Ajax calls and state updates.

componentDidUpdate

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.

shouldComponentUpdate

To determine whether or not to update the component. If necessary, only as a performance boost.

componentWillUnmount

This component is utilized before the component is removed. SetState should not be called. Tasks will be cleaned up.

getDerivedStateFromProps

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.

componentDidCatch

This component is used after a decedent component error. To get error-related State, use getDerivedStateFromError. For logging and side effects, use componentDidCatch.

Context API

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.

Babel

The most widely used JavaScript transpiler. Convert JavaScript es6 features and beyond to the most recent version that is compatible. To support new global objects, Babel polyfills are available. Polyfills from core-js are used. Babel’s compatibility with new features has been among the greatest so far. Source maps enable debugging. Optimization is incorporated into the code. FLOW and JSX (XML-like syntax extension) are supported (Static type checker).

Hooks

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.

Webpack

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.

Parcel

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.