Concepts of React JS — Part 1

📄 Table of Contents

React JS version 15.0
React Life Cycles

◉ state vs props

What happens when setState() function is called?

* shouldComponentUpdate()
* componentWillUpdate()
* render()
* componentDidUpdate()

◉ Container vs Functional Components

or Stateful vs Stateless Components

◉ Controlled vs Un-Controlled Components

The controlled component in action!

◉ Composition over Inheritance

◉ Constructor:-

getDerivedStateFromProps vs CWRProps

how componentWillReceiveProps works

◉ when to use CWRProps actually??

componentWillReceiveProps({someProp}) {
this.setState({...this.state, someProp})
}

how getDerivedStateFromProps works

state = {
cachedSomeProp: null
// ... rest of initial state
};
static getDerivedStateFromProps(nextProps, prevState) {
// do things with nextProps.someProp and prevState.cachedSomeProp
return {
cachedSomeProp: nextProps.someProp,
// ... other derived state properties
};
}
ComponentWillReceiveProps vs getDerivedStateFromProps

CWRProps vs shouldComponentUpdate

ComponentWillReceiveProps vs ShouldComponentUpdate

What’s new in React 16.0 ?

Is DOM slow, Really?

◉ Ref / keys

Context API (v 16.3 onwards, Provider + Consumer concept)

let understand why Facebook felt the need to build a library called React ?

function updateCommentsSubscriber (response) {
commentsArr = [ ...response ]
// commentsArr = ['Comment 1', 'Comment 2', ...]
var firstDiv = document.getElementById('first')
firstDiv.innerHTML = commentsArr.length
var secondDiv = document.getElementById('second')
secondDiv.innerHTML = commentsArr.toString()
...
}
class HelloReact extends React.Component {
render () {
return (
<div>Hello React!</div>
)
}
}
ReactDOM.render(<HelloReact>, document.getElementById('app'))

Rendering Child Nodes using the “map” function

renderComments (commentsArr) {

commentsArr = [{
id: 1,
text: "I'm a comment!"
}]

return (
<div class='comments-container'>
{
commentsArr.map (function (comment) {
return <div key={comment.id}>{comment.text}</div>
})
}
</div>
)
}

Compiling JSX to JavaScript

◉ ES6

function pokemon (id) { //id = 12
if (id === 12) {
var pokemonObj = {
id: 12,
name: 'butterfree',
height: 11,
weight: 22,
abilities: [
{
name: 'tinted-lens'
}
]
}
}
return pokemonObj
}

◉ Classes

class Berries {    constructor (berries) {
this.berries = berries
}
getSize () {
return this.berries.size
}
getGrowthTime () {
return this.berries.growth_time
}
}
const cherries = new Berries(berries)
cherries.getSize() // 20
cherries.getGrowthTime() // 3

◉ React Elements vs React Components

React.createElement("div", { className: 'heading' }, "Hello React!")
{
type: 'div',
props: {
className: 'heading',
children: 'Hello React!'
}
}

◉ Anti-patterns

Pure Components in React

class ImpureComponent extends React.PureComponent {…}

Note: In case of React Pure Component, the changes in react “props” and “state” is Shallow Compared.

Using the { pure } HOC from Re-compose

Why should data be IMMutable ?

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.