HELLO!

I am Abhishek Prasad .

→ JavaScript Developer

→ Software Eng. @ Fave

→ Open source contributor and

Owner/maintainer @wripplefoss

You can find me at

abhishek71994.github.io(old design.. don’t @ me)

1

Peeking into React

The background magic

2

What this talk is not gonna be about

  • Building React apps
  • Discussing optimizations deeply
  • Live coding… pls no

3

What this talk is going to be about

  • How react works from the get go
  • What it uses for optimizations
  • How to integrate memoization in React

4

What happens when you

npm i -g create-react-app ?

5

CRA npm repo

6

What happens when you

$ create-react-app `test-project`?

7

How CRA script works..

8

index.js

createReactApp.js

Where does the rest of the things come from?

9

REACT-SCRIPTS

10

“@babel/core”: “7.2.2”,

“@svgr/webpack”: “4.1.0”,

“babel-core”: “7.0.0-bridge.0”,

“babel-eslint”: “9.0.0”,

“babel-jest”: “23.6.0”,

“babel-loader”: “8.0.5”,

“babel-plugin-named-asset-import”: “0.3.1”,

“babel-preset-react-app”: “7.0.1”,

“bfj”: “6.1.1”,

“case-sensitive-paths-webpack-plugin”: “2.2.0”,

“css-loader”: “1.0.0”,

“dotenv”: “6.0.0”,

“dotenv-expand”: “4.2.0”,

“eslint”: “5.12.0”,

“eslint-config-react-app”: “3.0.7”,

“eslint-loader”: “2.1.1”,

“eslint-plugin-flowtype”: “2.50.1”,

“eslint-plugin-import”: “2.14.0”,

“eslint-plugin-jsx-a11y”: “6.1.2”,

“eslint-plugin-react”: “7.12.4”,

“file-loader”: “2.0.0”,

“fs-extra”: “7.0.1”,

“html-webpack-plugin”: “4.0.0-alpha.2”,

“identity-obj-proxy”: “3.0.0”,

“jest”: “23.6.0”,

“jest-pnp-resolver”: “1.0.2”,

“jest-resolve”: “23.6.0”,

“jest-watch-typeahead”: “0.2.1”,

“mini-css-extract-plugin”: “0.5.0”,

“optimize-css-assets-webpack-plugin”: “5.0.1”,

“pnp-webpack-plugin”: “1.2.1”,

“postcss-flexbugs-fixes”: “4.1.0”,

“postcss-loader”: “3.0.0”,

“postcss-preset-env”: “6.5.0”,

“postcss-safe-parser”: “4.0.1”,

“react-app-polyfill”: “0.2.1”,

“react-dev-utils”: “7.0.3”,

“resolve”: “1.10.0”,

“sass-loader”: “7.1.0”,

“style-loader”: “0.23.1”,

“terser-webpack-plugin”: “1.2.2”,

“url-loader”: “1.1.2”,

“webpack”: “4.28.3”,

“webpack-dev-server”: “3.1.14”,

“webpack-manifest-plugin”: “2.0.4”,

“workbox-webpack-plugin”: “3.6.3”

Okay.. The installation is done..

What happens next when we code?

11

VDAYUM!!

12

The usual DOM way

React VDOM

Reconciliation (Diffing)

13

Memoization

14

React memoization

15

React.memo

Links(Aka things that made this talk possible)

16

THANKS!

Questions?--------->

You can find me at:

BTW, FAVE is hiring…
Checkout out our career page.

Also… Feedback please?

17

KL React talk - Google Slides