React is a view generation, it’s pretty simplest and it works.
Well, It doesn’t.
As you said, it exists REDUX. Adding REDUX to the fray is not for free, every time we add a new library to our project, then the team must know about it, we must update it regularly and we must test it if it is working correctly or if it breaks some past functionality.
For example, every time we started a new project on React (something simple), it uses the next libraries:
@babel
@cnakazawa
@csstools
@hapi
@jest
@mrmlnc
@nodelib
@svgr
@types
@typescript-eslint
@webassemblyjs
@xtuc
abab
accepts
acorn
acorn-dynamic-import
acorn-globals
acorn-jsx
acorn-walk
address
ajv
ajv-errors
ajv-keywords
alphanum-sort
ansi-colors
ansi-escapes
ansi-html
ansi-regex
ansi-styles
anymatch
aproba
argparse
aria-query
arr-diff
arr-flatten
arr-union
array-equal
array-filter
array-flatten
array-includes
array-map
array-reduce
array-union
array-uniq
array-unique
arrify
asap
asn1
asn1.js
assert
assert-plus
assign-symbols
ast-types-flow
astral-regex
async
async-each
async-limiter
asynckit
atob
autoprefixer
aws-sign2
aws4
axobject-query
babel-code-frame
babel-eslint
babel-extract-comments
babel-jest
babel-plugin-dynamic-import-node
babel-plugin-istanbul
babel-plugin-jest-hoist
babel-plugin-macros
babel-plugin-syntax-object-rest-spread
babel-plugin-transform-object-rest-spread
babel-plugin-transform-react-remove-prop-types
babel-preset-react-app
babel-runtime
babylon
balanced-match
base
base64-js
batch
bcrypt-pbkdf
big.js
binary-extensions
bluebird
bn.js
body-parser
bonjour
boolbase
bootstrap
brace-expansion
braces
brorand
browser-process-hrtime
browser-resolve
browserify-aes
browserify-cipher
browserify-des
browserify-rsa
browserify-sign
browserify-zlib
browserslist
bser
buffer
buffer-from
buffer-indexof
buffer-xor
builtin-status-codes
bytes
cacache
cache-base
call-me-maybe
caller-callsite
caller-path
callsites
camel-case
camelcase
caniuse-api
caniuse-lite
capture-exit
case-sensitive-paths-webpack-plugin
caseless
chalk
chardet
chokidar
chownr
chrome-trace-event
ci-info
cipher-base
class-utils
clean-css
cli-cursor
cli-width
cliui
clone-deep
co
coa
code-point-at
collection-visit
color
color-convert
color-name
color-string
combined-stream
commander
common-tags
commondir
component-emitter
compressible
compression
concat-map
concat-stream
confusing-browser-globals
connect-history-api-fallback
console-browserify
constants-browserify
contains-path
content-disposition
content-type
convert-source-map
cookie
cookie-signature
copy-concurrently
copy-descriptor
core-js
core-js-compat
core-js-pure
core-util-is
cosmiconfig
create-ecdh
create-hash
create-hmac
cross-spawn
crypto-browserify
css-blank-pseudo
css-color-names
css-declaration-sorter
css-has-pseudo
css-loader
css-prefers-color-scheme
css-select
css-select-base-adapter
css-tree
css-unit-converter
css-what
cssdb
cssesc
cssnano
cssnano-preset-default
cssnano-util-get-arguments
cssnano-util-get-match
cssnano-util-raw-cache
cssnano-util-same-parent
csso
cssom
cssstyle
cyclist
damerau-levenshtein
dashdash
data-urls
date-now
debug
decamelize
decode-uri-component
deep-equal
deep-is
default-gateway
define-properties
define-property
del
delayed-stream
depd
des.js
destroy
detect-newline
detect-node
detect-port-alt
diff-sequences
diffie-hellman
dir-glob
dns-equal
dns-packet
dns-txt
doctrine
dom-converter
dom-serializer
domain-browser
domelementtype
domexception
domhandler
domutils
dot-prop
dotenv
dotenv-expand
duplexer
duplexify
ecc-jsbn
ee-first
electron-to-chromium
elliptic
emoji-regex
emojis-list
encodeurl
end-of-stream
enhanced-resolve
entities
errno
error-ex
es-abstract
es-to-primitive
escape-html
escape-string-regexp
escodegen
eslint
eslint-config-react-app
eslint-import-resolver-node
eslint-loader
eslint-module-utils
eslint-plugin-flowtype
eslint-plugin-import
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks
eslint-scope
eslint-utils
eslint-visitor-keys
espree
esprima
esquery
esrecurse
estraverse
esutils
etag
eventemitter3
events
eventsource
evp_bytestokey
exec-sh
execa
exit
expand-brackets
expect
express
extend
extend-shallow
external-editor
extglob
extsprintf
fast-deep-equal
fast-glob
fast-json-stable-stringify
fast-levenshtein
faye-websocket
fb-watchman
figgy-pudding
figures
file-entry-cache
file-loader
filesize
fill-range
finalhandler
find-cache-dir
find-up
flat-cache
flatted
flatten
flush-write-stream
follow-redirects
for-in
for-own
forever-agent
fork-ts-checker-webpack-plugin
form-data
forwarded
fragment-cache
fresh
from2
fs-extra
fs-write-stream-atomic
fs.realpath
function-bind
functional-red-black-tree
get-caller-file
get-own-enumerable-property-symbols
get-stream
get-value
getpass
glob
glob-parent
glob-to-regexp
global-modules
global-prefix
globals
globby
graceful-fs
growly
gud
gzip-size
handle-thing
handlebars
har-schema
har-validator
harmony-reflect
has
has-ansi
has-flag
has-symbols
has-value
has-values
hash-base
hash.js
he
hex-color-regex
history
hmac-drbg
hoist-non-react-statics
hosted-git-info
hpack.js
hsl-regex
hsla-regex
html-comment-regex
html-encoding-sniffer
html-entities
html-minifier
html-webpack-plugin
htmlparser2
http-deceiver
http-errors
http-parser-js
http-proxy
http-proxy-middleware
http-signature
https-browserify
iconv-lite
icss-replace-symbols
icss-utils
identity-obj-proxy
ieee754
iferr
ignore
immer
import-cwd
import-fresh
import-from
import-local
imurmurhash
indexes-of
inflight
inherits
ini
inquirer
internal-ip
invariant
invert-kv
ip
ip-regex
ipaddr.js
is-absolute-url
is-accessor-descriptor
is-arrayish
is-binary-path
is-buffer
is-callable
is-ci
is-color-stop
is-data-descriptor
is-date-object
is-descriptor
is-directory
is-extendable
is-extglob
is-fullwidth-code-point
is-generator-fn
is-glob
is-number
is-obj
is-path-cwd
is-path-in-cwd
is-path-inside
is-plain-object
is-promise
is-regex
is-regexp
is-resolvable
is-root
is-stream
is-svg
is-symbol
is-typedarray
is-windows
is-wsl
isarray
isexe
isobject
isstream
istanbul-lib-coverage
istanbul-lib-instrument
istanbul-lib-report
istanbul-lib-source-maps
istanbul-reports
jest
jest-changed-files
jest-cli
jest-config
jest-diff
jest-docblock
jest-each
jest-environment-jsdom
jest-environment-jsdom-fourteen
jest-environment-node
jest-get-type
jest-haste-map
jest-jasmine2
jest-leak-detector
jest-matcher-utils
jest-message-util
jest-mock
jest-pnp-resolver
jest-regex-util
jest-resolve
jest-resolve-dependencies
jest-runner
jest-runtime
jest-serializer
jest-snapshot
jest-util
jest-validate
jest-watch-typeahead
jest-watcher
jest-worker
js-levenshtein
js-tokens
js-yaml
jsbn
jsdom
jsesc
json-parse-better-errors
json-schema
json-schema-traverse
json-stable-stringify
json-stable-stringify-without-jsonify
json-stringify-safe
json3
json5
jsonfile
jsonify
jsprim
jsx-ast-utils
killable
kind-of
kleur
last-call-webpack-plugin
lazy-cache
lcid
left-pad
leven
levn
load-json-file
loader-fs-cache
loader-runner
loader-utils
locate-path
lodash
lodash.memoize
lodash.sortby
lodash.tail
lodash.template
lodash.templatesettings
lodash.unescape
lodash.uniq
lodash._reinterpolate
loglevel
loose-envify
lower-case
lru-cache
make-dir
makeerror
mamacro
map-age-cleaner
map-cache
map-visit
md5.js
mdn-data
media-typer
mem
memory-fs
merge-deep
merge-descriptors
merge-stream
merge2
methods
microevent.ts
micromatch
miller-rabin
mime
mime-db
mime-types
mimic-fn
mini-create-react-context
mini-css-extract-plugin
minimalistic-assert
minimalistic-crypto-utils
minimatch
minimist
mississippi
mixin-deep
mixin-object
mkdirp
move-concurrently
ms
multicast-dns
multicast-dns-service-types
mute-stream
nanomatch
natural-compare
negotiator
neo-async
nice-try
no-case
node-forge
node-int64
node-libs-browser
node-modules-regexp
node-notifier
node-releases
normalize-package-data
normalize-path
normalize-range
normalize-url
npm-run-path
nth-check
num2fraction
number-is-nan
nwsapi
oauth-sign
object-assign
object-copy
object-hash
object-keys
object-visit
object.assign
object.fromentries
object.getownpropertydescriptors
object.pick
object.values
obuf
on-finished
on-headers
once
onetime
opn
optimist
optimize-css-assets-webpack-plugin
optionator
original
os-browserify
os-locale
os-tmpdir
p-defer
p-each-series
p-finally
p-is-promise
p-limit
p-locate
p-map
p-reduce
p-try
pako
parallel-transform
param-case
parent-module
parse-asn1
parse-json
parse5
parseurl
pascalcase
path-browserify
path-dirname
path-exists
path-is-absolute
path-is-inside
path-key
path-parse
path-to-regexp
path-type
pbkdf2
performance-now
pify
pinkie
pinkie-promise
pirates
pkg-dir
pkg-up
pn
pnp-webpack-plugin
portfinder
posix-character-classes
postcss
postcss-attribute-case-insensitive
postcss-browser-comments
postcss-calc
postcss-color-functional-notation
postcss-color-gray
postcss-color-hex-alpha
postcss-color-mod-function
postcss-color-rebeccapurple
postcss-colormin
postcss-convert-values
postcss-custom-media
postcss-custom-properties
postcss-custom-selectors
postcss-dir-pseudo-class
postcss-discard-comments
postcss-discard-duplicates
postcss-discard-empty
postcss-discard-overridden
postcss-double-position-gradients
postcss-env-function
postcss-flexbugs-fixes
postcss-focus-visible
postcss-focus-within
postcss-font-variant
postcss-gap-properties
postcss-image-set-function
postcss-initial
postcss-lab-function
postcss-load-config
postcss-loader
postcss-logical
postcss-media-minmax
postcss-merge-longhand
postcss-merge-rules
postcss-minify-font-values
postcss-minify-gradients
postcss-minify-params
postcss-minify-selectors
postcss-modules-extract-imports
postcss-modules-local-by-default
postcss-modules-scope
postcss-modules-values
postcss-nesting
postcss-normalize
postcss-normalize-charset
postcss-normalize-display-values
postcss-normalize-positions
postcss-normalize-repeat-style
postcss-normalize-string
postcss-normalize-timing-functions
postcss-normalize-unicode
postcss-normalize-url
postcss-normalize-whitespace
postcss-ordered-values
postcss-overflow-shorthand
postcss-page-break
postcss-place
postcss-preset-env
postcss-pseudo-class-any-link
postcss-reduce-initial
postcss-reduce-transforms
postcss-replace-overflow-wrap
postcss-safe-parser
postcss-selector-matches
postcss-selector-not
postcss-selector-parser
postcss-svgo
postcss-unique-selectors
postcss-value-parser
postcss-values-parser
prelude-ls
pretty-bytes
pretty-error
pretty-format
private
process
process-nextick-args
progress
promise
promise-inflight
prompts
prop-types
proxy-addr
prr
psl
public-encrypt
pump
pumpify
punycode
q
qs
querystring
querystring-es3
querystringify
raf
randombytes
randomfill
range-parser
raw-body
react
react-app-polyfill
react-dev-utils
react-dom
react-error-overlay
react-is
react-redux
react-route
react-router
react-router-dom
react-scripts
read-pkg
read-pkg-up
readable-stream
readdirp
realpath-native
recursive-readdir
redux
regenerate
regenerate-unicode-properties
regenerator-runtime
regenerator-transform
regex-not
regexp-tree
regexpp
regexpu-core
regjsgen
regjsparser
relateurl
remove-trailing-separator
renderkid
repeat-element
repeat-string
request
request-promise-core
request-promise-native
require-directory
require-main-filename
requireindex
requires-port
resolve
resolve-cwd
resolve-from
resolve-pathname
resolve-url
restore-cursor
ret
rgb-regex
rgba-regex
rimraf
ripemd160
rsvp
run-async
run-queue
rxjs
safe-buffer
safe-regex
safer-buffer
sane
sass-loader
sax
saxes
scheduler
schema-utils
select-hose
selfsigned
semver
send
serialize-javascript
serve-index
serve-static
set-blocking
set-value
setimmediate
setprototypeof
sha.js
shallow-clone
shebang-command
shebang-regex
shell-quote
shellwords
signal-exit
simple-swizzle
sisteransi
slash
slice-ansi
snapdragon
snapdragon-node
snapdragon-util
sockjs
sockjs-client
source-list-map
source-map
source-map-resolve
source-map-support
source-map-url
spdx-correct
spdx-exceptions
spdx-expression-parse
spdx-license-ids
spdy
spdy-transport
split-string
sprintf-js
sshpk
ssri
stable
stack-utils
static-extend
statuses
stealthy-require
stream-browserify
stream-each
stream-http
stream-shift
string-length
string-width
stringify-object
string_decoder
strip-ansi
strip-bom
strip-comments
strip-eof
strip-json-comments
style-loader
stylehacks
supports-color
svg-parser
svgo
symbol-observable
symbol-tree
table
tapable
terser
terser-webpack-plugin
test-exclude
text-table
throat
through
through2
thunky
timers-browserify
timsort
tiny-invariant
tiny-warning
tmp
tmpl
to-arraybuffer
to-fast-properties
to-object-path
to-regex
to-regex-range
toidentifier
tough-cookie
tr46
trim-right
ts-pnp
tslib
tsutils
tty-browserify
tunnel-agent
tweetnacl
type-check
type-is
typedarray
uglify-js
unicode-canonical-property-names-ecmascript
unicode-match-property-ecmascript
unicode-match-property-value-ecmascript
unicode-property-aliases-ecmascript
union-value
uniq
uniqs
unique-filename
unique-slug
universalify
unpipe
unquote
unset-value
upath
upper-case
uri-js
urix
url
url-loader
url-parse
use
util
util-deprecate
util.promisify
utila
utils-merge
uuid
validate-npm-package-license
value-equal
vary
vendors
verror
vm-browserify
w3c-hr-time
w3c-xmlserializer
walker
watchpack
wbuf
webidl-conversions
webpack
webpack-dev-middleware
webpack-dev-server
webpack-log
webpack-manifest-plugin
webpack-sources
websocket-driver
websocket-extensions
whatwg-encoding
whatwg-fetch
whatwg-mimetype
whatwg-url
which
which-module
wordwrap
workbox-background-sync
workbox-broadcast-update
workbox-build
workbox-cacheable-response
workbox-core
workbox-expiration
workbox-google-analytics
workbox-navigation-preload
workbox-precaching
workbox-range-requests
workbox-routing
workbox-strategies
workbox-streams
workbox-sw
workbox-webpack-plugin
workbox-window
worker-farm
worker-rpc
wrap-ansi
wrappy
write
write-file-atomic
ws
xml-name-validator
xmlchars
xregexp
xtend
y18n
yallist
yargs
yargs-parser
So we start a new react project with that clusterfuck of libraries and we must pray that one of those libraries do not contain a trojan or virus or backdoor (and it has happened) because nobody could audit all those libraries for free.
But let’s say we won’t have troubles adding libraries and we add REDUX (REACT-REDUX) because everybody does that.
Why we need REDUX? It is because React’s components don’t talk to each other (if they are siblings). We have hooks but they are not widely used (why? beats me). So most projects use REACT+REDUX.
Now, if we use REDUX, then we won’t use React’ state unless we want redundancy (or apply some trick). So react is reduced (pun intent) to JSX.
Now, we are using REACT in our project that is simple but the states are gone, then we are not using React but JSX. Simple? yep.
But we are also using REDUX, and REDUX is another mess.
Can we work React without Redux? As I said, yes but it is not the de-facto standard so most of the time is REACT and REDUX in tandem.
Now, back to the topic.
Is React simple?
Yes but since it lacks pretty much everything, then the final use is overly complex.
- Theory: React is Simple
- Real-world scenario: React is not simple because it works with Redux (amongst other components).
But there is more.
Let’s say we want to create a standard project. If we do it in OOP, then the name of the type of the classes could change (Business Object, Model, EJB, etc.) but usually, the projects follow a simple structure. If even work on C# MVC, then we two folders for the controllers and for the view, so it’s easy to debug a code written for somebody else.
React doesn’t have it. Of course, React is only the View (and a view that requires a lot of code) But we could also work with classes, methods, arrow functions, and we could use action or not. Auditing a React code is not fun, because some developers work in some way while others in another way and some ways are not 100% compatible with other code.
Example:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}A react class has a lifecycle, properties, and states.
While
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}A method class lacks a lifecycle and it’s hard to use states. However, since we will use Redux, then we won’t need states but it is still messy.
