What Exactly is React Js?

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.

  • JSX

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.

--

--

--

Software Engineering Undergraduate of Sri Lanka Institute of Information Technology

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Use jQuery With Angular (When You Absolutely Have To)

https://youtu.be/ccenFp_3kq8

Building a Treeview component (Part III)

Node Express Pico-Tutorial Part 3: Forms

setInterval() vs setTimeout(): synchronous vs asynchronous code execution in JavaScript

DIY Kafka Topic Watcher tool — Node, Express, Server Sent Events and Apache Kafka

How to make the array go brrr

Setup Project and Fastify Platform — NestJs with Passport #01

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mishan Kavindu Perera

Mishan Kavindu Perera

Software Engineering Undergraduate of Sri Lanka Institute of Information Technology

More from Medium

Create dark mode in React js using redux hooks

Form Handling in ReactJS & Typescript with Custom Hooks

React Context Get Data From API

React.js: The most prevalent front-end JavaScript library for building Web applications