React Virtual-DOM and JSX

React Virtual-DOM

How It Works

JSX

<Tag property=”attribute”>
Inside of tag
</Tag>
React.createElement(
Tag,
{property: ‘attribute’},
‘Inside of tag’
)

Props

<Component {props} />
<Component stringLiterals = {‘props’} />
<Component defaultValue = {true} />
const props = {key1: ‘value1’, key2: ‘value2’};
<Component {…props} />

Children of JSX

<Component> String Literals </Component>
<ParentComponent>
<ChildComponent1/>
<ChildComponent2/>
</ParentComponent>

Production Build

$ npm run build
$ npm start
npm install — save-dev terser-brunch
or
yarn add — dev terser-brunch
$ brunch build -p

Long Lists Can Be Virtualized

Reconciliation can be avoided

Not Mutating The Data

functionName() {
this.setState(state => ({
words: […state.words,’newWord’],
}));
};

Sources

  1. How Virtual-DOM and diffing works in React | by Gethyl George Kurian | Medium
  2. JSX In Depth — React (reactjs.org)
  3. Optimizing Performance — React (reactjs.org)

--

--

--

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

Recommended from Medium

Flow Bro, your friendly Flow helper

Creating web application for Docker using JavaScript!!

Interacting with Ethereum smart contracts in JavaScript

Week 7 — Our first App Engine and React URLs

ES6 Topic : var & let & const

React Hooks

Sort algorithm — Insertion Sort

Rise of the Reducer Pattern

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
Al-Junaed Islam

Al-Junaed Islam

More from Medium

React areas of exploration

Fetching Images With Different Image File Formats Using React

[React] use outside function for onClick

An introduction to React Hooks