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.”

JSX (JavaScript XML)

JSX
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.

🐰 🐇

--

--

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