Understanding React.js 🚀

React.js

Let’s dive into the details about React & the lifecycle hooks

What is React?

“React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.”

  1. JSX (JavaScript XML)
  2. Virtual DOM

JSX (JavaScript XML)

JSX
  1. Class-Based Component.
  2. Functional Based Component.
constructor(props) {
super(props);
this.state = {name: "Henry"};
}
function Welcome(props) {  
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);

Virtual DOM

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

The Document Object Model (DOM) is a programming interface for HTML and XML(Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

DOM (source: w3schools.com)

Lifecycle of a component can be defined as the series of methods that are invoked in different stages of the component’s existence.Every React Component has a lifecycle of its own.

🐰 🐇

--

--

--

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

Recommended from Medium

Ionic 5 and above: SSL Pinning for iOS

Why React Hooks Are the Wrong Abstraction

useState: incorrect. observable: correct.

Angular 14: The Latest & Top Features You Need To Know!

The Future of Functional React Components with React Hooks

What is WebAuthn: Logging in with Face ID and Touch ID on the web

Part 2: Reactive architectures. MVVM + MVI + RxJava

Protractor E2E Testing — Locator and Action

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
Ameen

Ameen

More from Medium

React App File Structure.

The React Project

ReactJS for the Frontend Development